Silverlight 中的玻璃球按钮
4.95/5 (26投票s)
这是一个关于如何将一个基础的 Silverlight 按钮样式化为一个“玻璃球”按钮的详细教程。
引言
Silverlight 的一个好处是几乎可以重新设计所有内容。今天我想向您展示如何在 Expression Blend 中创建一个玻璃球风格的按钮。下图显示了最终效果。
样式化按钮
您可以从任何 Silverlight 2 项目开始，为了简单起见，我创建了一个空项目。只需在面板上添加一个标准的 Silverlight 按钮。我们即将创建的玻璃按钮样式在方形按钮上看起来效果最好，因此请将按钮的宽度和高度设置为相同的值，例如 64。
要编辑按钮的模板，请右键单击按钮，选择“编辑控件部件(模板)”，然后单击“编辑副本…”。
创建一个新的样式资源，并为其命名，例如 ButtonGlassOrbTemplate。单击“确定”。
现在您看到的是默认的按钮模板。可以看到，它由一些基本组件构成：几个 Grid、Border、Rectangle 和 ContentPresenter。
这些都很好……但我们不需要它们，所以删除除根 Grid 和 ContentPresenter 之外的所有内容。忽略关于状态无效的消息。我们稍后会修复它们。
为了让按钮正确缩放，最好的方法是使用百分比配置 Grid。在示例中，我使用了以下行和列的尺寸：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.7*"/>
<ColumnDefinition Width="0.15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.04*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.56*"/>
</Grid.RowDefinitions>
为了添加按钮的整体颜色，请在堆栈中添加一个 ellipse。确保 Grid 行和列都为 0，并且 RowSpan 和 ColumnSpan 都设置为 3，使其填充整个网格。
要像更改原始按钮的背景颜色一样更改背景颜色，您必须将填充和描边颜色绑定到背景颜色。要做到这一点，点击填充画笔和描边画笔旁边的方块，然后选择模板绑定，再点击背景。
您将立即看到按钮的颜色发生变化。如果一切顺利，它应该看起来像这样。
要创建玻璃效果，我们需要添加几个渐变层。要创建第一个，请在堆栈中添加另一个 ellipse，并命名为 VerticalGradientEllipse。将其放置在 contentPresenter 和 BackgroundEllipse 之间。
网格设置与第一个 ellipse 类似。将填充画笔更改为渐变。保持默认的渐变方向，从上到下。将第一个 GradientStop 设置为白色，alpha 值为 25%。然后，将最后一个 GradientStop 设置为黑色，alpha 值为 60%。最后一步，在中间添加一个 GradientStop 并将其 alpha 设置为 0%。这将生成以下 XAML：
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#3FFFFFFF"/>
<GradientStop Color="#00787878" Offset="0.5"/>
<GradientStop Color="#99000000" Offset="1"/>
</LinearGradientBrush>
为了使边框看起来比背景稍微暗一些，请将描边颜色设置为黑色，alpha 值为 50%。
现在，按钮看起来应该像这样：
添加另一个具有与上一个相同的网格配置的 ellipse。将其命名为 RadialGradientEllipse。将其放置在 VerticalGradientEllipse 和 contentPresenter 元素之间。
将此的描边画笔设置为无，并将填充颜色再次设置为 GradientBrush 。通过点击第一个 GradientStop 正下方的图标来将渐变类型设置为径向。
将第一个 GradientStop 设置为白色，alpha 值为 40%，最后一个 GradientStop 设置为黑色，alpha 值为 60%。此时按钮开始看起来像一个球体。
为了给按钮带来玻璃般的外观，需要一个“反射”。再添加一个 ellipse 并命名为 ReflectionEllipse。
这个 ellipse 放置在 contentPresenter 的顶部。将 Grid Row 和 Column 设置为 1。RowSpan 和 ColumnSpan 也设置为 1。描边画笔必须设置为无。使用 GradientBrush 作为填充。对于第一个 GradientStop ，我使用了 73% alpha 的全白色。结尾的 GradientStop 也是白色，但 alpha 值为 0%。此时按钮应该具有那种光泽感。这是一个很好的时机，可以暂时退出模板编辑模式，尝试为按钮设置不同的颜色。
状态
这个按钮最后需要一些用于 MouseOver 和单击的效果。通过删除模板中的所有默认元素，按钮的状态将被清除。要添加的第一个状态是 MouseOver 状态。在本例中，我试图给人一种光线照亮球体底部的感觉。首先，在堆栈中添加另一个 ellipse。将其命名为 GlowEllipse ，并将其放置在 RadialGradientEllipse 和 contentPresenter 之间。将描边画笔设置为无画笔，并将填充设置为 GradientBrush。渐变始于一种偏暗的黄色，alpha 值为 75%，例如 #BFFFD200。渐变以相同的颜色结束，但完全透明，alpha 值为 0%。
将 GlowEllipse 放置在网格的第二行，即 Row 1。给它一个 RowSpan 为 2，使其一直延伸到底部。通过将 Column 设置为 0 并设置 ColumnSpan 为 3，使其跨越按钮的整个宽度。为了确保它与按钮的边框保持一定距离，将左右边距设置为 5，上边距设置为 13，下边距设置为 3。此时按钮应该看起来像这样。
要为按钮添加鼠标悬停时的动画效果，请展开状态面板，并确保仍然选中了基础状态。将 GlowEllipse 的不透明度设置为 0%。这将隐藏光晕。现在选择MouseOver 状态。
编辑区域周围会出现一个红色边框，表示正在记录元素的属性更改。将 GlowEllipse 的不透明度设置为 100%。现在，当鼠标悬停在按钮上时，GlowEllipse 将显示出来。对于已按下状态，我选择让按钮稍微变大一点。要记录已按下状态的属性，请首先在堆栈中选择Grid 图层，然后从状态面板中选择已按下状态。
将 X 和 Y 缩放比例更改为 1.1，使其稍大一点。为了与 MouseOver 状态保持一致，在此状态下也将 GlowEllipse 的不透明度设置为 100%。将事务持续时间设置为 0.2 秒，以便有时间从一个状态过渡到另一个状态。
此时，您应该已经得到了本页顶部按钮的复制品。请随意尝试其他设置，并添加此按钮的其他状态。
历史
- 2009 年 3 月 31 日：首次上传