在 Expression Blend 和 Silverlight 中构建更佳的按钮
4.90/5 (125投票s)
构建健壮、可伸缩且易于编辑的按钮的初学者指南
引言
所有按钮都必须看起来那么传统吗？在 Silverlight 中不必！
多亏了 Silverlight 和 Blend 的强大功能，我们现在可以制作出漂亮的按钮，Timmy Kokke 在他的 玻璃球按钮 文章中精彩地展示了这一点。但我们能做的不仅仅是多彩，所以我想分享一些关于如何更进一步的想法。同时讨论如何构建您的按钮，并考虑：布局、样式、动画、可伸缩性和重用。
因此，如果您是一名希望提高艺术技能的开发人员，一名刚接触 Expression Blend 环境的设计师，或者只是在努力理解 Expression Blend 的概念，那么这可能适合您或您团队中的某个人！
背景
网上有很多关于制作按钮的文章，无论是在 Photoshop、Illustrator、CorelDraw 等中，只需在 Google 图片中搜索“玻璃按钮”即可找到。这些可以提供灵感，但最重要的是：几乎所有原则都可以使用 Expression Blend 和 Expression Design 应用到 Silverlight。因此，我的目标不是专注于鹦鹉学舌地重新创建一个特定按钮，而是尝试帮助您充分利用 Expression Blend 来创建您自己的作品。Expression Blend 和 Silverlight 不仅仅是一个带有附加功能的矢量图软件包。它远不止于此，需要一种稍微不同的工作方式。以及在为应用程序设计图稿时需要额外考虑的事项。因此，我将尝试指导您制作健壮的按钮 (UserControls)，其原则可以应用于 Blend 环境中的任何地方，讨论诸如“可伸缩性”之类的问题，您的按钮在所有分辨率下是否都能看起来很好并正常工作等。您可能想要应用的一些技术和操作将无法缩放，例如边距和描边，以及模糊和投影等效果。希望我能引导您避免一些痛苦的错误，构建干净灵活的控件，使其工作良好并符合预期。
概述
在本教程中，我将涵盖重新创建上面介绍图像中显示的第一个按钮的所有内容。我将从理解矢量图但对 Silverlight 或 Expression Blend 一无所知的设计师的角度来讲解本教程。我将尝试在开始时记录每个步骤，希望随着我们的进展加快速度，以防止它变得乏味。这意味着，如果您是 Silverlight 和 Expression Blend 的新手，我建议您不要跳过任何部分。本教程也将作为我后续教程的先决条件。
我已将本教程细分为几个部分，以便于参考
第 1 节 - 基本按钮、布局和组件
在 Expression Blend 中打开一个新的 Silverlight 项目，并将其命名为“TestButton”。选择左侧工具栏中的按钮图标。
现在，通过在画板（中心布局面板）上拖动所需的按钮大小和位置，或双击按钮图标来在屏幕上放置一个按钮。尝试每种方法，看看不同的结果。现在让我们考虑按钮的大小应该是什么以及什么控制着您的按钮的大小。以及这与矢量图软件包有何不同。
画板提供了一些对按钮大小及其与父级关系的操纵和控制。但我希望您关注右侧“属性”选项卡的“布局”部分来控制您的按钮。
查看每个设置右侧出现的白点，这表明该设置不是“默认”设置。现在这些点也是按钮，因此单击“属性”选项卡“布局”部分中的每个白点并选择“重置”。
请注意您的按钮如何最终填充 LayoutRoot。（它的父对象在“对象和时间线”选项卡中。）在 Blend 中，最好让您的 对象 (控件) 动态调整大小和拉伸以适应其父 对象。
与其定义固定 宽度 和 高度 等绝对值，不如让父对象控制您的 对象 的大小。在“对象和时间线”中选择 LayoutRoot，并在“属性”选项卡的“布局”部分中更改其大小。看看这如何控制和定义您的按钮的大小。
使用小白点并选择“重置”将 LayoutRoot 设置回其默认值。现在我们不希望按钮完全填满我们的屏幕，我们可以使用边距在父对象 (LayoutRoot) 中控制按钮的大小。因此，在“对象和时间线”中选择按钮，输入一些边距值，或在画板中拖动按钮的边缘。
（值可以是负数，也可以是正数。）
目前我不会讨论水平和垂直对齐，除了说它们都应该设置为 Stretch，这是默认设置，所以使用“重置”功能。重要的是要理解，固定 宽度 和 高度 通常是不好的，除非它是“根对象”。
在“对象和时间线”中，单击“[UserControl]”并注意它有一个 640x480 的固定大小（未自动调整大小）。这是“根对象”，是构成此 对象（或 UserControl）的所有子元素/对象的父级。
所有（所有子级）都应该从父级那里获取如何布局的指令，只有它应该有一个固定大小。
因此总结一下，我希望您了解我们控制对象大小有两种基本方式
- 固定宽度和高度：当父对象调整大小时，按钮将不会缩放。
- 自动调整宽度和高度，并设置边距：按钮将随父对象缩放。
还有更多，我们稍后会介绍...
现在在“对象和时间线”中选择您的按钮，并将按钮的所有布局属性重置为默认值。将宽度和高度设置为 100x100 像素（固定大小）。我知道我说过使用固定宽度和高度是不好的，但出于我们的目的，按钮将是我们的“根对象”。（它将控制我们将要操作的所有子项的大小。）
现在右键单击您的按钮，然后选择“编辑模板”>“编辑副本”。您应该会看到一个名为“创建样式资源”的窗口。给这个样式资源（一个按钮 样式）起一个名字，比如“ButtonRound1”，然后选择“确定”。
（不要担心你给它起什么名字，因为它稍后可以在“资源”选项卡中更改，所有对它的引用都会自动更新。）
希望您已经发现，要进入按钮 Template，我们必须创建一个按钮 Style。那么它们有什么区别呢？基本上，Style 应该保存 UserControl (按钮) 的一般属性，例如 颜色 和 文本 应该在 Style 中控制。Template 是构成控件 (Button) 的零碎部分，并使用模板绑定从 Style 继承 颜色 和 文本 等属性。
更改所有 Template 组件（可能有很多）的颜色是不可取的，而这只需在 Style 中单击一下即可完成！
Style 可以编译成 资源字典，您的开发人员可能会请求，这可以随时完成，通过在 资源 选项卡中拖放。
但是，让我们继续我们的按钮，看看“按钮模板”到底是什么。在“对象和时间线”选项卡中，我们可以看到构成按钮的所有组件/部分的细分。
我已扩展该网格以显示子对象，为了清晰起见，我将构成模板的部分称为元素。在我们删除模板的大部分部件/元素之前，让我们快速了解一下我们有什么以及它是如何工作的。它主要由应用了“颜色”属性的 Grid 和 Rectangle 组成。以及一个“内容呈现器”，它是一个占位符，用于显示在对象根部指定或由开发人员在运行时定义的内容。
还有两个 Border 项/元素，它们具有与 Rectangle 类似的属性，但基本上对其边缘和角属性有更多控制。在 Template 中，选择 BackgroundAnimation 元素正上方的 Grid。现在查看右侧的“属性”选项卡，您将看到背景颜色旁边有一个小橙色点。
颜色选择器周围还有一个橙色矩形。这些指示符表示背景颜色通过模板绑定到 Style，不应在此处更改。相反，如果我们要更改此颜色，我们应该编辑 Style。
要编辑 Style，请单击画板左上角的 Style 图标（看起来像饼图、奶酪或吃豆人）。
“对象和时间线”选项卡中的所有组件/元素将消失，并替换为“<>Style”，表示我们处于 Style 中。
现在在 Style 中，转到“属性”选项卡并将背景颜色更改为亮红色。通过单击 Style 图标右侧的 Grid 节点返回按钮模板。
现在，“对象和时间线”选项卡中名为 Grid 的元素应该会自动选中。
再次查看“属性”选项卡中的背景颜色，看看它是否已更改。（希望它是亮红色。）如果您四处寻找，您会发现 Style 的 BorderBrush 通过模板绑定到名为 Background 的元素的 BorderBrush。BorderThickness 也是如此，这允许我们通过修改 Style 来进一步操作 UserControl (Button) 的外观。
但我们无法从 Style 中控制一切，并且拉出所有资源将是过多和笨拙的。例如，我们无法在 Style 中轻松控制或引用 MouseOver 颜色状态，我稍后会解释原因。
在“对象和时间线”中选择 BackgroundGradient 元素，并查看背景填充颜色。
请注意，它是一个白色渐变，其 Alpha（不透明度/透明度）在 Ribbon 上的四个渐变停止点处发生变化。
这使得其下方的 BackgroundAnimation 元素的实心块颜色以彩色渐变的形式透出。将叠加层应用于实心块颜色的原理非常强大，并且易于通过 Style 或颜色资源进行编辑或引用。
现在让我们看看按钮如何为不同的状态（如 RollOver、Pressed 和 Disabled）改变其外观。确保您位于“状态”选项卡（左上角）并选择 MouseOver 状态。现在展开“对象和时间线”选项卡中的所有元素。单击“对象和时间线”选项卡中“MouseOver”右侧的“显示时间线”图标。
请注意，现在画板周围有一个红色边框，并且“对象和时间线”选项卡中出现了一些蓝色关键帧。（关键帧是定义在某个时间点发生变化或固定值的点。默认情况下，这些将立即在零时刻发生。）选择 BackgroundAnimation 元素并查看“属性”选项卡中的 Opacity 值，看到它设置为 100%。现在将状态管理器改回“Base”，并看到 Opacity 现在设置为 0%。
BackgroundGradient 元素也发生变化，因为四个渐变停止点中的三个的 Alpha (Opacity) 减少了。这使得背景颜色在下半部分透出更多，但在上半部分没有。调查并尝试不同的状态，但请记住使用 Base 状态来创建和修改您的元素，因为它定义了所有其他状态的默认属性或起始点，然后您再修改它们。（您可以在“Base”状态下工作，并通过单击该状态左侧的眼睛图标来模拟另一个状态。）
希望您已经意识到 DisabledVisualElement 和 FocusVisualElement 分别只是叠加层和边框 (Stroke)。
在我们开始修改默认按钮之前还有最后一件事。之前我谈到什么定义按钮大小时，为了简化，我忽略了另一个可以定义按钮大小的东西。如果我告诉按钮只达到所需大小，会发生什么？要做到这一点，您首先需要退出按钮模板。可以通过单击画板顶部的“（按钮）”节点
或者“对象和时间线”中的“返回范围”图标。
现在，如下所示更改“属性”选项卡中的“布局”属性
确保所有属性都已重置，除了水平和垂直对齐，它们都设置为 Center。按钮将缩小到一个刚好足以容纳内容的尺寸（加上一点点，称为填充）。将字体大小增加到例如 48pt，看看这如何影响您的按钮。进入按钮的 Style，并在“属性”选项卡“布局”的扩展属性中，您将找到一个“Padding”选项。
或者，只需在“属性”选项卡顶部的搜索框中输入“padding”。
现在将值更改为 40，看看这如何影响按钮的大小。
如果您想查看 Padding 的设置方式，请查看按钮模板内 ContentPresenter 的“属性”选项卡。（请记住清除搜索以取消隐藏“属性”选项卡中不符合搜索条件的属性。）
Margin 属性通过模板绑定到 Style 的 Padding 属性。
因此，当我在 Style 中或按钮模板之外定义 Padding 更改时，我们实际上控制的是按钮模板内 ContentPresenter 的 Margin。冒着啰嗦的风险，我正在尝试展示样式的功能。同时也希望证明初始设计师可能对按钮的大小没有最终控制权。它可能取决于您的页面的 Size 和 Layout，以及其中定义的内容。
因此，我建议您考虑确保您的作品在所有尺寸下都能正常运行！
第 2 节 - 修改按钮
我们已经了解了构成默认按钮的不同元素，我们可以操纵我们拥有的元素。相反，让我们删除所有其他内容，除了 ContentPresenter。不必担心动画将丢失的警告消息。
（这是因为我们正在删除已应用动画的元素。）
我们现在只剩下按钮的基本外壳，其 Template 由一个 Grid 类型的元素和一个 ContentPresenter 类型的子元素组成。为什么我们有一个 Grid 作为根元素？因为 Grid 是用于格式化（控制）子元素布局的最佳布局容器。Grid 不仅可以包含多个子元素，还可以细分以约束子元素的比例和布局。我们将使用 Grid 将应用于按钮特定部分（例如“Rim”或“Face”）的元素分组。
那么让我们开始创建一个带 Rim 的圆形按钮吧。在“对象和时间线”选项卡中选择 Grid。然后单击并按住左侧工具栏中的矩形工具以显示椭圆工具。
在工具栏上，双击椭圆图标，一个 Ellipse 将作为 Grid 元素的子元素出现。
如果您从一开始就跟着操作，您的画板应该看起来像这样。Ellipse 没有填满按钮的整个区域，而是以 100x100 像素的大小插入在左上角。这是因为，尽管按钮希望是 100x100 像素，但 ContentPresenter 正在控制按钮的大小，这归因于我们之前为按钮设置的布局、字体大小和填充更改。使用“对象和时间线”中的“向上范围”图标退出按钮模板，并将字体大小从 48 重置为 8.25。请注意按钮如何缩小，并且曾经的圆形现在变成了一个被挤压的椭圆形。
接下来，将按钮的固定宽度和高度设置为 100x100 像素。
由于我们在 Style 中设置了过多的 Padding，文本现在无法正常显示。但是椭圆现在跨越了我们按钮的宽度，这正是我们想要的。所以使用 Style 图标进入 Style。
现在在“布局”部分的扩展属性中，将“填充”重置为默认值 3。现在文本正常显示，但椭圆仍然不是圆形。因此，使用 Style 图标右侧的图标选择椭圆，进入按钮模板。
（它可能显示为“ContentPresenter”，具体取决于“对象和时间线”中按钮模板最后选择的元素。）
确保选中了椭圆，查看“属性”选项卡中椭圆的布局属性。请注意，我们有未设置的设置被应用。
这是 Expression Blend 试图插入一个椭圆来填充按钮模板，它认为按钮模板是 100x100 像素。但是 ContentPresenter 正在控制按钮模板的大小，使其更大，所以布局只是尽力而为。
这可能有点令人困惑，但在设计时，为父对象（按钮）设置一个固定大小，并设置子对象自动填充它。在“属性”选项卡的“布局”部分中重置椭圆的所有默认值。（或者删除椭圆，然后双击左侧工具栏上的椭圆图标以插入一个新的椭圆。）
希望您有一个 Ellipse 元素和一个 ContentPresenter 元素。
在画板中，按钮文本不再可见，因为它被椭圆遮挡和隐藏。单击每个元素旁边的“眼睛”图标以显示或隐藏其后面的内容。（在 Photoshop 中，图层从下往上构建；在 Expression Blend 中，它们从上往下构建。）
因此，选择 ContentPresenter 元素并将其拖到 Ellipse 下方，从而使其位于 Ellipse 的前面，因为我们总是希望 ContentPresenter 在前面。但是每次我们添加一个新元素时，它都会位于列表的底部，因此位于 ContentPresenter 的前面。为了避免这种烦恼，我们将在自己的专用 Grid 中构建按钮的框架。
右键单击“椭圆”并选择“分组到 > 网格”。
现在重命名新创建的 Grid 并将其命名为“Rim”。
现在选择椭圆，并使用“Ctrl + C”、“Ctrl + V”（复制和粘贴）键复制椭圆。您现在应该在名为 Rim 的 Grid 中有两个 Ellipse，并且 ContentPresenter 不会被覆盖。
现在是开始命名我们的组件/元素的好时机。
因此，选择列表中的顶部 Ellipse 并将其命名为 BGround，然后选择列表中的底部 Ellipse 并将其命名为 RadialGradient。
选中名为 BGround 的 Ellipse 元素，并使用高级属性按钮，将 Fill 属性更改为 模板绑定 > Background。
这将设置我们的 Ellipse 的 Fill，从而使我们 UserControl 的整体颜色可以从我们 UserControl 的 Style 进行编辑。（我们还看不到任何结果或颜色变化，因为上面有另一个名为 RadialGradient 的 Ellipse）。
单击 RadialGradient 元素旁边的“眼睛”图标以显示 Style 的 Fill (Background) 颜色。
如果您尚未更改 Style 的 Background 颜色，您的按钮应如下所示
非常无聊，所以让我们将 RadialGradient 元素设置为叠加层，以控制下方 Background 颜色的 Opacity 和 Tone。
选择 RadialGradient 元素，在“属性”选项卡中，将其 Fill 更改为“渐变画笔”。
接下来，将渐变从 Linear 更改为 Radial。
现在将 Ribbon 上的两个渐变停止点都设置为白色，并像我一样放置在 Ribbon 上的位置：85、90、95 和 100。
（单击 Ribbon 上的任意位置可添加另一个渐变停止点，拖出 Ribbon 可将其移除至最少 2 个）。
接下来，将 Ribbon 位置 85 处的渐变停止点的 Alpha（透明度）设置为 0%。对 Ribbon 位置 100 处的渐变停止点重复上述步骤。这应该会给您一个看起来像这样的按钮
还不太漂亮，但你可以看到边框正在形成。放大你的按钮，你会发现边缘有一条烦人的黑线。这挡住了我们的渐变，它就是两个椭圆的“Stroke”。所以让我们把它去掉。选择每个 Ellipse 的 Stroke 并设置为“No Brush”。
边框开始看起来好多了，但对比度太强了。我们可以通过调整 Ribbon 上 90 和 95 处的渐变停止点的 Alpha 到 60% 来调整它
或者通过调整整个元素的 Opacity。
目前我的偏好是在渐变停止点进行调整，因为这使得在 0% 到 100% 之间调整整个元素更加简单。（或者不是吗？我们稍后会讨论这个问题...）
继续，我们希望我们的 Rim 环绕在按钮 Face 的外部。我希望页面颜色在 Rim 的内边缘透出。所以为了演示目的，我将把我的页面颜色改为难看的红色。使用“返回范围”图标退出按钮模板。并将 LayoutRoot 元素的 Fill 颜色更改为红色。
现在，为了使 Rim 的中心透明，我们可以使用一个不透明度蒙版。我们可以在两个 Ellipse 上都设置一个不透明度蒙版。（但我希望将它们保留用于我可能希望应用的一些进一步效果）。
相反，我将把它应用到 Ellipse 的父对象：名为 Rim 的 Grid 元素，因为它也支持不透明度蒙版。所以在“对象和时间线”中选择按钮，然后回到按钮模板。选择名为 Rim 的 Grid 元素；在“属性”选项卡中，选择不透明度蒙版。给它一个径向渐变，在 Ribbon 上设置渐变停止点为 0、84 和 85。
将 0 和 84 渐变停止点的 Alpha 设置为 0%，将 85 渐变停止点设置为 100%。（0 处的渐变停止点实际上不需要，但为了清晰起见保留）。构成按钮 Rim 的所有元素的内部 85% 现在都不可见。
通过更改“LayoutRoot” Grid 的 Fill 颜色进行测试。（请记住您在按钮模板中，需要按“返回范围”才能操作“LayoutRoot” Grid 颜色）。
现在回到按钮模板中，我们将开始创建我们的按钮 Face，使其位于 Rim 内部。确保您已选中名为 Rim 的 Grid 元素。双击左侧工具栏中的椭圆图标，这将在名为 Rim 的 Grid 内部插入一个新的 Ellipse。这对我们不起作用，因为 Ellipse 的内部 85% 缺失。这是因为它受到父对象，名为 Rim 的 Grid 元素的控制，该元素应用了不透明度蒙版，因此影响其所有子元素。所以我们需要将其移出名为 Rim 的 Grid 元素的父级控制。
在“对象和时间线”中选择椭圆，并将其拖到名为“[Grid]”的元素上。（注意 Ellipse 现在位于 ContentPresenter 前面）。
选择 ContentPresenter 并将其拖到列表底部。
现在选择椭圆，右键单击并选择“分组到 > 网格”。将新创建的 Grid 重命名为 Face。选择子 Ellipse 元素并将其重命名为“BGround1”。
（请注意，两个元素/组件不能共享相同的“X”名称！）。
现在，要使 Face 与 Rim 颜色相同：将 BGround1 元素的 Fill 颜色模板绑定到 Style 的 Background 颜色。
我们无法在画板中看到 Rim，因为它被新创建的 Face 遮挡了。
我们需要显示 Rim 区域以及 Rim 和 Face 之间的间隙。从我目前向您展示的来看，我们可以对 Face 应用一个不透明度蒙版。这与 Rim 上的不透明度蒙版是相反的。但这将意味着 Face 的子元素只有中间的 85% 是可见的。（笨拙，如果我们想使用子元素的 Stroke，则不好）。
Margin 可能是控制 Face 大小的另一种方法。选择名为 Face 的 Grid 元素，并将 Margin 的所有侧面设置为 10。
希望间距看起来很棒，关于按钮 Face 和 Rim，就像下面的例子一样
对于我们这种 100x100 像素的按钮来说，这很好。但我想知道如果我将按钮大小更改为 32x32 像素会发生什么。（这可能是值得显示风格化按钮的最低分辨率）。
但是，我不会改变这个按钮的大小，而是创建这个按钮样式的副本。这些副本会动态更新，因为它们共享相同的 Style 和 Template。所以退出按钮模板和样式，使用“返回范围”图标。在第一个按钮正下方再放置两个按钮。将大小分别设置为 64x64 和 32x32 像素。
现在我们需要告诉新按钮使用我们命名为 ButtonRound1 的 Style。
右键单击中间按钮，然后选择“编辑模板 > 应用资源 > 'ButtonRound1'”。
另一种方法是转到“资源”选项卡，并在“[UserControl]”中选择“ButtonRound1”。
将此样式资源拖到您的按钮上，释放鼠标，然后从弹出小窗口中选择“样式”。
对于这两个较小的按钮来说，情况看起来不太好，但在最大的按钮上却很好。出了什么问题？
由于我们在 Face 上设置了 Margin，按钮的 Face 在 Rim 内的间距不正确。回到按钮模板中，选择名为 Face 的 Grid。将 Margin 更改为 4 并查看结果。
看，现在 Face 在最小的按钮中正确适配，但在最大的按钮中却没有。设置 Margin 是确定性的，它设置了与其参考对象（父级）的固定像素距离。
所以 Margin 实际上不起作用，因为 Rim 和 Face 彼此不引用，它们都引用它们的父级。
第 3 节 - 可伸缩性问题
前面我说过在 Expression Blend 中有两种方式来调整对象大小，但还有更多！所有这些都与自动调整大小结合使用，水平和垂直对齐设置为 Stretch（默认）。（因此子元素将 Stretch 以响应父对象的指令。）
因此，为了正确地相互引用 Face 和 Rim，我们将使用一个比例变换。选择名为 Face 的 Grid 并将 Margin 重置为 0。
在“属性”选项卡中的 Margin 下面是一个名为“变换”的部分；如果当前折叠，请打开此部分并选择“缩放”选项卡。
现在将 X 轴和 Y 轴的比例设置为 0.8。现在 Face 在所有三种尺寸下都很好地位于 Rim 内。
您可能已经注意到，我们仍然在 Face 上有黑色边框，称为 Stroke。它似乎随着按钮变小而变得更重更粗。实际上并没有，因为它在所有三个按钮上都精确地是 1 像素厚。但是 1 像素在最小按钮的按钮表面上所占的比例比在最大按钮上要大。
在“对象和时间线”中选择名为 BGround1 的 Ellipse。在“属性”选项卡的“外观”部分更改描边粗细。
给它一个 4 的值并查看您的结果。
Stroke 不会缩放，因此大部分时间应避免使用，所以让我们摆脱它。我们可以将 Stroke Thickness 设置为 0，但最好告诉 Ellipse 不描边。
所以首先，将描边粗细重置为 1，这样可以保持整洁并使 XAML 更干净。并在“属性”选项卡“画笔”部分中选择 Stroke，然后选择“无画笔”。
我们也将 ContentPresenter 移开，因为它目前只是一个干扰。要在设计时隐藏它，请转到“对象和时间线”并单击元素旁边的“眼睛”图标。它将在运行时可见，这没关系，但不是我真正想要的，所以我将在运行时隐藏它。
要做到这一点，选择 ContentPresenter 并在“属性”选项卡中，将其 Visibility 更改为 Collapsed。
现在让我们通过添加另一个位于 BGround1 上方的 Ellipse 来为按钮表面增加一些深度。选择名为 Face 的 Grid 并双击左侧工具栏中的椭圆图标。
这将在名为 Face 的 Grid 元素中插入另一个具有漂亮干净“默认”设置的 Ellipse。选择 Ellipse 并将其重命名为“FaceRadialGradient”。为了清晰起见，我们同时将名为“BGround1”的 Ellipse 重命名为“FaceBGround”。
（请保持命名元素的一致性，以避免混淆，并帮助其他人稍后引用它们。）
现在，选中 FaceRadialGradient 元素，删除 Stroke 并将 Fill 设置为 Gradient (Radial)。
如果您的渐变停止点设置为默认值，则 Face 将如下所示
现在使用径向渐变图标右侧的“反转渐变停止点”图标翻转渐变停止点。
您的按钮 Face 现在应该如下所示
现在选择左侧渐变停止点，将 Alpha 设置为 30%，并移到 Ribbon 上的 75。
现在选择右侧渐变停止点，并将 Alpha 设置为 50%。
希望您的按钮开始看起来好一点了。
那么我为什么之前要反转渐变停止点呢？（所以黑色在右边，白色在左边。）因为 Tone 和 Transparency (Alpha) 都对 Fill 的 Gradient 有影响 （颜色可以用在 Tone 中，但这会降低更改配色方案时的灵活性）。
选中 Ribbon 上 100 处的右侧渐变停止点，将颜色从黑色更改为白色。查看结果
当渐变停止点设置为黑色时，Face 的边缘看起来相当暗。我们可以将右侧渐变停止点的 Tone 调整为深灰色。但我也想改变光线照射按钮的方式。所以我们将访问渐变画笔的一些看似隐藏的控件。在左侧工具栏中，选择渐变工具。（希望您现在会在按钮表面上方看到一个箭头工具。）
如果您看不到“渐变工具”，请查看“属性”选项卡的“投影”部分。
确保您的元素及其所有父元素都设置为“默认”。
（当元素或其任何父元素上设置了“投影”时，Blend 无法显示“渐变工具”）。
我们可以使用“渐变工具”做很多事情，例如调整“渐变停止点”。
但我们更感兴趣的是其他选项，例如偏移中心和调整大小。
所以点击并拖动 Arrow 的茎部（不要靠近 Gradient Stops），然后向上方稍微向左移动一点。
现在单击 Arrow 的头部以扩大渐变的范围。
使其仅覆盖 Face 的右下边缘。
.
现在 Face 看起来像是左上角有光源，大约在 315% (360%-45%)。
（或者相反的 180%，如果您将按钮视为凹的，而不是凸的）。
事情开始变得更好了，但我仍然对 Rim 和 Face 之间的间距不满意。
在最大的按钮中还好，但在最小的按钮中却丢失了，几乎不存在。
它的比例是正确的，但并非我们真正想要的。
理想情况下，我们希望 Rim 间距在调整大小时不进行 Scale。
或者以某种方式限制，我们可以使用 Margins 来做到这一点。
所以在“对象和时间线”中选择 Face 元素，并将所有侧面的 Margin 设置为 1。
所有三个按钮的按钮 Face 在所有侧面都缩小了 1 像素。
这有所帮助，并且对最大的按钮影响很小。
因为 1 像素在一个 100x100 像素的按钮上只占 1%。
但是 1 像素在 32x32 像素的按钮上大约占 3%。
所以我们结合了两种控制 Face 和 Rim 与其父级大小和关系的方法。
一个 Scale Transform 和一个 Margin。
（一个与对象的比例成比例，另一个是有限的）。
现在间距更好了，Rim 需要更粗一些。
因此，在仍选中 Face 元素的情况下，将 Scale Transform 的 X 和 Y 轴都更改为 0.75。
现在选择 Rim 元素并在“属性”选项卡中编辑“不透明度蒙版”。
将我们之前设置的“渐变停止点”从 0、84、85 更改为 Ribbon 上的新位置 0、79、80。
Rim 现在应该有更多内部可见。
我们现在需要更新 Rim 的渐变叠加，使其跨越我们显示的更大区域。
所以选择名为“RadialGradient”的 Ellipse，我们在这里时，将其重命名为“RimRadialGradient”。
然后对名为“BGround”的 Ellipse 执行相同的操作，将其重命名为“RimBGround”。
（这样更整洁，以后更容易引用。）
再次选择 RimRadialGradient 元素。
并在“属性”选项卡中将 Fill 的“渐变停止点”更改为：80、87.5、92.5 和 100。
我们现在有一个比例更好的按钮，带有更粗的 Rim。
如果您想知道我们是否仍然需要 Margins 来控制 Rim 到 Face 的间距。
尝试将 Face 元素的 Margins 重置为 0。
如果有什么的话，值为 2 可能会更好，所以将 Margins 设置为 2。
我们也将摆脱那可怕的红色背景。
在设计时，确保您的 UserControl（按钮）在深色背景和浅色背景上都看起来很好是有意义的。
所以，使用“返回范围”图标，退出“按钮模板”。
选择所有 3 个按钮，然后使用复制和粘贴复制 3 个，并将它们移动到右侧。
然后在“对象和时间线”中将一个黑色填充的 Rectangle 放在树的更高位置，因此位于按钮后面。
（您现在完全控制了我的按钮在几乎任何情况下的外观！）
第 4 节 - 整容手术
现在我们有了按钮的骨架，是时候让它变得漂亮了。
我想在 Rim 上应用一个渐变，以模仿 Face 上的照明效果。
回到您的“按钮模板”中，选择 RimRadialGradient 元素。
在“属性”选项卡中，选择“不透明度蒙版”并设置一个 Linear 渐变。
在左侧工具栏中选择“渐变工具”，并如下图所示进行设置
将“渐变停止点”设置为 Ribbon 上的 15，并将 Alpha 设置为 50%。
然后将“渐变停止点”设置为 Ribbon 上的 85，并将 Alpha 保持在 100%。
（在“不透明度蒙版”中，Tone 和颜色不相关，因为只影响 Transparency）。
将“渐变工具”的头部和尾部设置为边界框的角点，以确保 45% 角。
但在 Ribbon 上将“渐变停止点”设置为 0 和 100 没有任何意义。
（我们只能将“不透明度蒙版”应用于元素中可见的部分）。
所以我们 Rim 的左上角看起来比左下角亮一点。
但需要更多的对比度，而且不仅仅是 不透明度蒙版 决定这个元素的可见程度。
将“外观”部分中元素的“不透明度”设置为 50%。
但这只会降低这个元素的可见性和对比度。
（或者图层 - 如果您在考虑 Photoshop！）
相反，查看元素的 Fill，看看我们之前设置了什么。
Ribbon 上 87.5 和 92.5 处的“渐变停止点”的 Alpha 为 60%。
将这两个的 Alpha 更改为 90%。
这有帮助，但我们需要将此元素的“不透明度”重置回 100%。
希望这样能得到类似下图的效果
现在，我们的对角线渐变 不透明度蒙版 应用了充足的对比度。
但我们必须增加 Fill 的对比度，才能增加 不透明度蒙版 的对比度。
一个元素的 Fill 和 Stroke 是决定该元素透明度的主要组成部分。
如果 Fill 的 Alpha 为 50%，并且该元素的 Opacity 只有 50%，那么我实际上只能看到该元素的 25%。
即使我将该元素的 Opacity 设置为 100%，我仍然只能看到 50%，因为这是由 Fill 的 Alpha 值更深层次控制的。
您现在可能会问。
为什么将 Alpha 值设置为 90% 而不是 100%，然后将该元素的整体 Opacity 设置为 90%。
这会给我带来相同的结果吗？在这个例子中，几乎没有，但有一个区别！
将“渐变停止点”设置为 90%，而不是 100%，我对 Tone 有稍微更多的影响。
我也相信 90% 是我希望应用于此元素的最大值。
因此，通过这种方式，我可以通过将 Opacity 设置到 90% 以上来防止超出此值。
现在我们的按钮 Rim 看起来非常闪亮，这可能足以满足您的目的。
但这不太现实...
它真正需要的是 Rim 捕捉光线
只在外边缘，在左上角。
只在内边缘，在右下角。
如下图所示
那么，我们如何为凸起的边框创建更逼真的光照效果呢？
首先，重置（移除）应用于 RimRadialGradient 元素的不透明度蒙版，因为这已不再需要。
这使我们的 Rim 看起来非常明亮，因此将 RimRadialGradient 的 Opacity 设置为 40%。
这个元素（图层）现在将只提供 Rim 的基本轮廓/外形。
我们将叠加 2 个更多的 Ellipses 来定义我们的高光。
选择 Rim 元素，并使用左侧工具栏中的 Ellipse 工具。
在名为 Rim 的 Grid 中插入 2 个新的 Ellipses，并删除两个 Ellipses 上的 Stroke。
分别将它们重命名为“RimHighLightUpper”和“RimHighLightLower”。
单击 RimHighLightUpper 元素旁边的“Eye”符号以隐藏它。
现在我们可以在 RimHighLightUpper 不碍事的情况下处理 RimHighLightLower。
选择 RimHighLightLower，并设置一个 径向渐变填充， 在 Ribbon 上 86、94 和 100 处带有白色 渐变停止点。
将所有 渐变停止点 的 Alpha 设置为 0%，除了 94 处的那个，它应该为 100% Alpha。
使用“渐变工具”，移动并调整渐变大小，使其看起来像这样
渐变在右下内边缘看起来很好。
但左上角内边缘有一个不需要的高光。
所以为了去掉它，我们来应用一个只显示我们想要部分的 不透明度蒙版。
所以设置一个 线性渐变 在 不透明度蒙版 中，如下图所示。
在 Ribbon 上将 渐变停止点 设置为 55 和 75，并将每个的 Alpha 分别设置为 0% 和 100%。
下部高光看起来不错，所以隐藏此元素并继续处理上部高光。
选择 RimHighLightUpper 元素并取消隐藏它。
选中 RimHighLightUpper 元素，将其 Fill 设置为 径向渐变。
现在将 Fill 的白色 渐变停止点 设置为 Ribbon 上的 86、92 和 100。
将所有 渐变停止点 的 Alpha 设置为 0%，除了 94 处的那个，它应该为 100% Alpha。
接下来应用一个 不透明度蒙版，带有一个 线性渐变， 就像我们为下部高光所做的那样。
将 渐变停止点 设置为 55 和 75，并将每个的 Alpha 分别设置为 0% 和 100%。
（唯一的区别是，我们把“渐变工具”的头部和尾部指向相反的方向）。
现在再次选择 Fill，并在选中 Gradient Tool 的情况下。
偏移并放大渐变，使其看起来像下图所示
完成此操作后，取消隐藏名为“RimHighLightLower”的元素，并欣赏您的工作成果！
高光可能有点太强，需要稍微调整一下。
所以将 RimHighLightLower 元素的 Opacity 设置为 70%，将 RimHighLightUpper 设置为 80%。
我想这结束了我们为这个按钮的 Rim 所需要做的一切。
所以我们回到 Face，看看我们能做些什么。
选择 FaceRadialGradient 元素，并在 Fill 属性中。
将 Radial Gradient 的 Gradient Stops 更改为 Ribbon 上的 40 和 100。
分别将 Alpha 值设置为 100% 和 0%，并使用 Gradient Tool 如下图所示定位。
现在设置一个带有 径向渐变 的 不透明度蒙版，并在 Ribbon 上将 渐变停止点 设置为 79 和 80。
分别将 Alpha 值设置为 0% 和 100%。
希望您的 画板 看起来像这样
现在按钮开始真正成形，我们有一个漂亮的 Rim。
而且 Face 有一个吸引人的边框和 Inner，供我们发挥创意。
到目前为止，我们已经广泛使用 不透明度蒙版 来限制元素中显示的内容（或图层）。
但在这里使用 不透明度蒙版 来限制显示内容是没有意义的。
因为我们还需要对我的元素不断应用更多的 不透明度蒙版。
仅仅是为了保留 透明度，从而保留按钮的背景颜色。
但我们不需要担心 透明度，因为我们只显示背景颜色。
这是一个在按钮 (UserControl) 的 Style 中设置的 资源。
所以删除应用于 FaceRadialGradient 的 不透明度蒙版。
相反，在 Face 元素中创建一个新的 Ellipse，命名为“InnerBGround”。
右键单击 InnerBGround 元素并选择 分组到 > 网格。
将此 Grid 重命名为“Inner”，并确保其已展开以显示其子元素。
现在将“属性”选项卡“变换”部分中的 Scale 设置为 X 和 Y 轴的 0.8。
选择 InnerBGround 元素并移除 Stroke。
现在选择 Fill 属性，并在“高级属性选项”按钮中，选择 模板绑定 > 背景。
现在我们得到了与应用 不透明度蒙版 相同的结果，以形成我们按钮 Face 的 Inner。
但是可以自由地从一开始就叠加效果，或者使用 Stroke。
以及重新调整或微调我们的布局，关于其在不同尺寸下的间距。
所以选择名为“Inner”的 Grid，并将所有侧面的 Margins 设置为 2。
这有助于放大最小尺寸按钮的 Face 边框，就像我们为 Rim 所做的那样。
现在在名为 Inner 的元素中添加 2 个更多的 Ellipses。
将它们重命名为“InnerEdgeShadow”和“InnerGlossHighLight”，并移除两个元素上的 Stroke。
现在隐藏 InnerGlossHighLight 元素并选择“InnerEdgeShadow”。
将 Fill 更改为 径向渐变，在 Ribbon 上 50 和 100 处带有黑色 渐变停止点。
分别将 Alpha 值设置为 0% 和 100%。
现在将元素（或图层）的 Opacity 更改为 30%。
现在取消隐藏名为“InnerGlossHighLight”的元素并选择它。
给它一个 径向渐变 的 填充，在 Ribbon 上 49 和 50 处带有白色 渐变停止点。
分别将 Alpha 值设置为 100% 和 0%。
选中“渐变工具”，更改渐变比例以匹配所示。
（您可以将“渐变停止点”设置在 Ribbon 上的任何位置，并根据需要调整“渐变工具”的大小。）
现在将 InnerGlossHighLight 元素的 Opacity 更改为 50%。
然后应用一个 不透明度蒙版，带有一个 线性渐变，其 停止点 在 Ribbon 上 0 和 50 处。
分别将 Alpha 值设置为 100% 和 0%。
使用“渐变工具”，确保渐变看起来像下图
现在我们几乎重新创建了 Timmy Kokke 的玻璃球按钮。
唯一的真正区别是，我没有细分任何 网格 来控制比例。
（两种方法同样有效，这取决于您的偏好和具体情况，以确定最佳方法！）。
现在，让我们使用 Transform 旋转 InnerGlossHighLight 元素，使其具有与 Rim 相同的高光 Angle。
选择 InnerGlossHighLight，然后在“属性”选项卡“变换”部分中，将 Rotation Angle 更改为 45%。
（那么发生了什么？高光消失了。）
问题在于“不透明度蒙版”，它只能在 角度 0 和 180 时正确工作。
但为了解决这个问题，我们将把 旋转 角度 重置 回 0，而是应用一个 投影。
所以，在“投影”部分（正下方），将 Z 旋转角度 设置为 45%。
您的按钮现在应该如下所示
还记得我之前说过，当应用“投影”时，“渐变工具”在元素上不可见吗？
所以选择名为“InnerGlossHighLight”的元素，并尝试使用“渐变工具”编辑 Fill 或 Opacity Mask。
“渐变工具”无法访问，至少在 Blend 3 中如此，但未来的版本就不得而知了。
所以为了证明我的观点，移除 Projection，看看 Gradient Tool 现在可见。
现在按钮上只剩一件事要改了，所以重新应用 Projection。
选择 RimHighLightLower 元素，并将 Opacity 更改为 50%。
现在，这应该会减少右下角边缘上的高光。
随意发挥创意，修改这个按钮，但我现在对它的外观很满意。
第 5 节 - 交互和动画
现在我们有了一个漂亮的按钮，是时候通过添加一些交互和动画来赋予它生命了。
但首先，我们需要有一些可以动画化的东西，我们将从添加一点颜色开始。
现在，由于我们用 3 个基本组件（一个 Rim、一个 Face 和一个 Inner）创建了按钮，我们可以轻松地引入一个叠加层来影响这些组件的颜色，所以我们从 inner 开始。
确保您位于“按钮模板”中，并且已选择名为“Inner”的 Grid 元素。
现在插入一个新的 Ellipse 并将其命名为“InnerOverlayColour”。
将其在“对象和时间线”列表中的位置移动到图片所示位置。
移除 InnerOverlayColour 元素的 Stroke，并将 Fill 设置为亮红色。
现在这看起来有点亮和粗糙，所以让我们使用 不透明度蒙版 （这似乎是我最喜欢的工具！）。
因此，设置一个带有 径向渐变 的 不透明度蒙版，并在 Ribbon 上设置 渐变停止点 为 25 和 100。
分别设置为 100% 和 50% 的 Alpha 值。
这样好多了，但仍然有点亮，所以将 InnerOverlayColour 元素的 Opacity 设置为 90%。
现在我们有了一个漂亮温暖的中心光晕，边缘逐渐变暗。
这是 不透明度蒙版 和 InnerEdgeShadow 元素的组合。
尝试将 InnerEdgeShadow 的 Opacity 更改为 10%，并将 InnerOverlayColour 的 Fill 更改为 Green。
满意后，将 InnerEdgeShadow 的 Opacity 重置为 30%。
为了帮助您开发一个漂亮的配色方案，将 InnerOverlayColour 的 Fill 设置为 模板绑定 > BorderBrush。
现在，通过单击 画板 左上角的图标，进入按钮的 Style。
确保在“对象和时间线”中选中了 Style。
现在更改 Style 的 Background 和 BorderBrush 颜色。
看看编辑按钮的整体配色方案是多么容易。
我将使用 RGB 值 60、50 和 0 作为 Background，以及亮红色作为 BorderBrush。
您可能会看到 Style 还有另一个颜色画笔，名为“Foreground”，我们可以 模板绑定 到它。
您可能想知道为什么我们没有使用这个，而不是 BorderBrush。
Foreground 画笔控制着 ContentPresenter 的颜色，而 ContentPresenter 目前是隐藏的。
如果按钮中心与 ContentPresenter 颜色相同，则两者将无法相互可见。
所以我们姑且保持原样。
我们现在需要决定，我们的按钮将做什么？
在各种鼠标状态下，我们如何设置这些状态？
确保您已打开窗口左上角的“状态”管理器选项卡。
您应该会看到一个 CommonStates 列表，由 Normal、MouseOver、Pressed 和 Disabled 组成。
在 CommonStates 上方是 Base 状态，此状态作为所有其他状态的默认值应用。
所以让我们将 Base 状态设置为 没有 红光。
只要我们没有设置 关键帧，我们在此处定义的内容将反映在所有其他状态中。
这意味着 Normal 状态通常不需要任何 关键帧。
因为它通常与 Base 状态相同。
因此，确保您处于 Base 状态，选择 InnerOverlayColour 元素并将 Opacity 设置为 0%。
现在选择 MouseOver 状态，并将 InnerOverlayColour 元素的 Opacity 设置为 50%。
然后选择 Pressed 状态，并将 InnerOverlayColour 元素的 Opacity 设置为 90%。
现在按 F5 运行您的应用程序。
希望您的按钮在 MouseOver 期间会发光，并在 Pressed 时变得更亮。
但它需要一些改进，因为状态之间的转换是瞬间发生的。
它需要稍微减慢一点，在定义的时间内。
所以将 默认过渡 持续时间设置为 0.1 秒。
运行您的应用程序，查看变化。
（由于状态之间的过渡非常简单，只需要很短的持续时间）。
（设置过长的持续时间会使过渡显得滞后）。
我们下一步能做什么？嗯，我们可以做简单的颜色改变，比如在按钮 Pressed 时变为绿色。
但这不太明智，因为大约 10% 的人口是红绿色盲。
所以让我们引入一些运动，让按钮 Face 在 MouseOver 和 Pressed 期间增长。
选择 Face 元素，并在选中 MouseOver 状态的情况下。
将 Scale Transform 的 X 和 Y 轴都更改为 0.82。
选择 Pressed 状态，并执行与 MouseOver 状态相同的操作。
现在运行您的应用程序 (F5)。
因为我们现在在 Transition 从 Normal 到 MouseOver 期间有运动。
我们最初为该 Transition 设置的 Opacity 似乎有点过高。
因此，确保您处于 MouseOver 状态，选择 InnerOverlayColour 元素并将 Opacity 设置为 30%。
现在检查您的结果，当您在那里时，查看较小按钮上的 MouseOver 状态。
Face 不会像最大的按钮那样增长到接触 Rim 的边缘。
这是因为我们在 Face 元素上设置了 Margins。
我们可以为不同的状态更改 Margins，但它们不会动画。
它们将在 Transition 持续时间结束时一次性应用，导致动画卡顿。
所以我们不会为各种状态设置不同的 Margins，因为这只会带来问题。
但我们可以通过稍微调整 Margins 来使其更好地工作。
从 MouseOver 状态切换到 Base 状态。
并将 Face 元素的所有侧面的 Margins 设置为 1。
运行您的应用程序，看看较小的按钮现在工作得更好了。
现在让我们为过渡添加一点“流行”，通过应用 缓动函数。
首先，将 Transition 持续时间更改为 0.2 秒，然后单击左侧的小方块并选择 EasingFunction "Back Out"。
这将改变 Face 在新的 0.2 秒持续时间内 Scale 的方式。
我增加了持续时间，以便 缓动函数 有更多时间进行动画。
您可能更喜欢将持续时间设置为 0.3 秒，您的选择！
运行应用程序，并测试您的按钮在各种尺寸下的效果。
当 Face 改变 Scale 时，它应该会“弹出”，这会应用于所有 Keyframe 更改。
现在可能不常见的是，有人按下按钮并一直按住 Pressed 状态。
但为了演示，我们会这样做。
所以让我们设置一个动画，在 Pressed 状态下循环。
选择 Pressed 状态和 InnerOverlayColour 元素。
现在点击“显示时间线”图标打开 时间线。
现在在 Timeline 中，在 1.6 秒的持续时间处设置一个 Keyframe，如下图所示。
（使用 录制关键帧 图标，或者只是在 属性 选项卡中进行更改以自动生成一个。）
现在将 时间线 移到 0.8 秒，并插入另一个 关键帧。
现在将 InnerOverlayColour 元素的 Opacity 更改为 50%，用于此 Keyframe。
（我们首先设置最后一个 关键帧，以便它从持续时间为 0 秒的 关键帧 复制值。）
（这样我们的动画就可以循环，因为开始和结束是相同的。）
现在在“对象”和“时间线”中选择“Pressed”时间线，如下图所示
在“属性”选项卡中，选择 RepeatBehaviour 并设置为“Forever”。
运行您的应用程序，按下并按住按钮，希望欣赏您的发光和渐隐动画。
现在您的发光和渐隐动画以线性方式变化，而它应该更像一条正弦曲线。
我们可以为每个单独的 Keyframe 设置一个 EasingFunction 来模拟这一点。
只需点击每个并在“属性”选项卡中设置 EasingFunction 即可。
我将保留我的原样，但随意玩耍。
（我更感兴趣的是让红光随着淡入淡出而增长和收缩。）
我们可以尝试通过应用 Scale Transform 来实现。
但我已经知道这不会很好地工作。
因为 InnerOverlayColour 元素的边缘透明度 (Alpha) 在 不透明度蒙版 中只设置为 50%。
这意味着当我试图缩小和放大元素时，它将有一个硬边。这不是很理想。
正如我之前提到的，InnerEdgeShadow 元素也控制内部的边缘发光，我们将改变这一点。
因此，在Pressed状态下，选择InnerEdgeShadow元素并设置一个持续时间为1.6秒的动画。
（就像我们对InnerOverlayColour元素所做的那样。）
现在在0.8秒时，将InnerEdgeShadow元素的Opacity设置为60%。
并将InnerOverlayColour元素的Opacity设置为70%。
运行应用程序并测试结果。
我们现在有一个更亮的中心核心和更暗的内部发光边缘。
从而产生更逼真的电灯泡发光和渐隐效果。
我们可以通过随时间动画InnerOverlayColour元素的Fill上的Gradient Stops来进一步强调这一点。
因此，仍然在Pressed状态下，持续时间为0.8秒。
将Ribbon上设置为50的Gradient Stop更改为Ribbon上的30。
测试应用程序，希望您的按钮在Pressed状态下会调暗至中心核心。
（这可能希望能启发您创建一个Cyborg，或者甚至是《霹雳游侠》中的Kit！）
现在让我们为按钮的其他部分添加动画，例如Rim。
因此，在States管理器中选择Base状态。
选择Rim元素，并在此元素内插入一个Ellipse，并将其重命名为"RimOverlayColour"。
删除Stroke，将Fill设置为Template Binding > BorderBrush。
在Objects and Timeline中，将RimOverlayColour元素放置在RimBGround前面，如图所示。
确保在Base状态下，RimOverlayColour元素的Opacity设置为0%。
现在在MouseOver状态下，将Opacity设置为20%，在Pressed状态下设置为40%。
在Pressed状态下，设置一个持续时间为1.6秒的动画，就像我们之前做的那样。
现在在Timeline上的0.8秒处，将RimOverlayColour元素的Opacity设置为0%。
运行您的应用程序。
希望您在MouseOver期间会在Rim上看到轻微的红色提示，并在Pressed期间看到更强的发光和渐隐。
现在冒着过度的风险，让我们在Pressed状态下将Rim的Scale设置为脉冲大小。
在Pressed状态下，选择Rim元素并设置一个持续1.6秒的动画，就像我们之前做的那样。
现在转到0.8秒处的Keyframe，通过将X和Y轴值都更改为1.05，为Rim元素设置一个Scale Transform。
运行您的应用程序，看看Rim现在是如何呼吸的，即使它可能有点夸张！
（我将让您使用EasingFunction为每个Keyframe微调动画）。
这只是一次练习，这就是我犯了一个可以被认为是滔天大罪的原因！
通过将Rim的Scale增加到大于1。
因为Rim在Pressed时会超出其边界，并可能与页面上的其他对象重叠。
但由于我只将Rim的Scale从1增加到1.05，我认为这样可以，并且可以保留它。
或者在Base状态下，调整按钮的3个主要部分（Rim、Face及其Inner）的大小。
以及我们设置的All Scale动画Keyframes。
但是一种快速而粗略的补偿方法是Scale按钮所有3个部分的父对象。
因此，在Objects and Timelines中选择名为"[Grid]"的元素。
（为了我的图像清晰起见，我已经折叠了树形结构）。
现在为X和Y轴设置一个0.95的Scale Transform。
（这将补偿子对象的1.05Scale）。
如果您愿意，可以保留此更正，但我将删除它。
因为我确信这个UserControl周围总会有比我们的动画侵占的更多空间（Padding）。
现在，我们需要对按钮的3个主要States进行最后一次更改。
因此，选择RimHighLightLower元素，并在MouseOver和Pressed状态下，将Opacity设置为30%。
这稍微提示了当按钮Face尺寸增大时。
它会阻挡一些光线照射到Rim的内部下边缘。
关于此按钮的动画，我只做这些。
但请随意进一步增强它，例如通过动画Face的边框区域。
第6节 - 多种颜色和最终润色
在上一节中，我们为按钮设置动画时，只为按钮应用了一种颜色状态。
现在没有什么可以阻止您为Ellipse的Fill设置动画。
因此，为不同的状态改变按钮的颜色。
除非：您使用的颜色是Data Bound的。
在这种情况下，Template Bound到UserControl（按钮）Style中的BorderBrush。
我们无法随时间更改此Style Resource，因为它超出了我们的控制范围，无论如何这样做都没有意义。
（它会改变引用此Resource的每个对象、项目和元素的颜色，可能是整个页面/应用程序！）
相反，我们将在UserControl（按钮）中添加更多Ellipses。
因此，请确保您处于Button Template中，并处于Base状态。
选择名为"Inner"的Grid元素，插入并定位一个新的名为"InnerOverlaySecondColour"的Ellipse，如图所示。
移除Stroke，将Fill设置为亮紫色（RGB 255, 0, 255），并将元素的Opacity设置为90%。
现在设置一个Opacity Mask，就像您为Template Bound元素InnerOverlayColour所做的那样。
因此，选择InnerOverlayColour并选择Opacity Mask。
现在点击Advanced Properties按钮，选择"Convert to New Resource"。
在弹出窗口中，将您的Brush Resource命名为"ColourMask"，然后按OK。
现在回到InnerOverlaySecondColour元素并选择Opacity Mask。
点击"Brush Resources"选项卡，并从Local Brush Resources中选择"ColourMask"。
现在亮紫色已调暗，让我们为这个元素的Fill设置动画。
选择MouseOver状态并将Fill更改为亮绿色。
现在我们要移除我们之前应用的Scale Transform。
在MouseOver状态下，对Face元素进行操作。
因此，仍在MouseOver状态下，选择在Objects and Timeline中应用于Face元素的"RenderTransform"并删除。
按钮现在缩小到X和Y轴的Scale值均为0.75。
这些是在Base状态下设置的值，因此是按钮的默认值。
（但是，在Properties选项卡中重置Scale Transform的值会产生不同的结果，缩放会重置为1.0，这不是我们想要的！）
（展开树形结构以显示应用于元素的所有操作，这可以揭示任何不需要的或不必要的动画Keyframes）
现在，在MouseOver状态下，按钮比Rim小。
我们也应该将Rim上的下部内部高光恢复到Base状态。
因此，重复删除元素Keyframe的过程（这次，您需要删除Opacity）。
并再次删除InnerOverlayColour元素的Opacity。
接下来，确保您已选择InnerOverlaySecondColour元素。
转到Pressed状态并将Opacity设置为0%。
运行您的应用程序并查看结果。
希望您的按钮从紫色变为绿色，再变为红色。
请注意，当颜色改变时，它似乎在中间闪烁，让我们来调查一下。
将默认过渡设置为2.0秒，然后再次运行应用程序。
希望您能看到，当一种颜色的Opacity减小时，另一种颜色的Opacity会增加。
这在动画中间留下了一个空白区域，未被变化的颜色填充。
我对这种效果并不不满意，只要时间调整正确。
（有方法可以修改这种行为，但在这里不想跑题。）
查看默认过渡的EasingFunction。
我们将其设置为"Back Out"，以使我们的Scale Transform具有"弹出"动作。
查看曲线的剖面，看看它如何影响动画。
从零开始，曲线急剧上升，峰值远超100%，然后回落到100%。
我们可以通过改变Amplitude来改变峰值超出100%的强调程度。
此外，此EasingFunction配置文件在持续时间的几乎第一个四分之一处达到100%。
它对颜色变化和我们设置合适的持续时间没有帮助。
因此，删除EasingFunction并将默认过渡设置为0.5秒。
再次运行应用程序，注意颜色变化的持续时间大致相同。
（没有EasingFunction的情况下，大约是四分之一的时间，该EasingFunction在其剖面的大约四分之一处达到100%）。
现在将默认过渡更改为0.3秒，因为我认为这差不多是正确的。
接下来，我们将调整MouseOver状态，以更好地适应我们不断演变的按钮。
选择Rim元素，并将X和Y轴的Scale Transform都设置为1.05。
现在运行您的应用程序，看看您怎么想。
（我之前谈到过色盲，所以我确保在MouseOver（绿色）和Pressed（红色）之间有清晰的几何变化。）
现在还有很多我们可以动画的东西，但我会留给您，这里有一些建议：
- 在
Rim的与高光相对的边缘设置低光。 - 在
Pressed状态下动画下部高光Opacity，以匹配Rim的增长和缩小。 - 您还可以将
Face的边框区域设置为在Pressed状态下发红光，以匹配Rim的发光。
基本上，做任何您喜欢的事情，发挥您的创造力，没有对错之分，只有个人品味。
看看不同的EasingFunctions，也可以玩弄状态到状态的过渡。
第7节 - 焦点、禁用和内容
如果您来自图形背景。
您可能从未制作过艺术作品，考虑到像Focused这样的事情。
Focused是一种图形方式，用于指示用户屏幕上当前选择的Control是什么，或者哪个Control具有Tab控件的焦点。
Focused状态可以装饰，但不推荐。
因为它应该对所有Controls都是通用和统一的，其主要作用是辅助，而不是玩具。
（但那是我的看法，而且我无意为我可能需要的所有控件设计焦点样式）。
确保您处于Base状态，选择名为Grid的元素，并插入一个名为"FocusVisualElement"的新Ellipse。
移除Fill，并将Stroke Thickness设置为1，将颜色更改为（RGB 109, 189 and 209）。
现在在Base状态下，选择Opacity并将其设置为0%。
然后选择Focused状态并将Opacity设置为100%。
现在再次选择Base状态，然后点击Focused状态左侧的眼睛图标。
这使我们可以在Base状态下工作，而不设置任何定义从Base状态更改的Keyframes。
但最重要的是，查看在Base状态下不可见的Focused状态和元素。
现在运行您的应用程序，选择按钮以使其获得Focus，并测试Normal、MouseOver和Pressed状态。
您应该会在按钮边缘看到一个蓝色的环，但像我的按钮一样，它不会随按钮的其余部分一起动画。
因此，将FocusVisualElement元素移动到名为Rim的Grid元素内部。
现在运行您的应用程序，您会看到Focus现在遵循应用于Rim的动画。
但在我看来，它没有那么清晰，因为它放置在Rim外边缘的顶部。
（在默认按钮中，Stroke环刚好在按钮边缘内部，但在这里我将其设置在外部。）
因此，在选中FocusVisualElement元素并在Base状态下，将所有边的Margins设置为-1。
这有助于为Focus留出一点间隙，以防配色方案与Focus颜色匹配。
运行应用程序以查看结果。
您可能认为我们可以将Focus放置在按钮的Rim和Face之间。
但是我们已经为Rim设置了Opacity Mask，所以如果我们要让Focus在此区域可见，我们需要做一些工作。
在我看来，我们有3个直接的选项，但我将留给您思考这些。
我对当前的Focus很满意，所以我会继续。
禁用
我们还需要定义一个Disabled状态，它通常会部分空白Control的所有部分。
由于我们的按钮有2个部分，我们需要2个元素来空白它。
因为我们不想影响Control的透明部分。
从Rim开始，在Base状态下，在名为Rim的元素中放置一个新的Ellipse。
将这个新的Ellipse重命名为"DisabledVisualElement"，移除Stroke并确保Fill是白色。
现在在Base状态下将Opacity设置为0%，在Disabled状态下设置为55%。
（55%是默认按钮中使用的设置。）
现在回到Base状态，在名为Face的元素中插入一个新的Ellipse。
将其重命名为"FaceDisabledVisualElement"并按图示定位。
在Base状态下，将Opacity设置为0%，在Disabled状态下设置为55%。
希望您的按钮在Disabled状态下看起来像这样。
Content
由于此按钮的视觉样式，我们不太可能希望按钮中有任何内容。
无论是Image、Icon还是ContentPresenter。
但我们应该为ContentPresenter做一些准备，以防需要它。
选择ContentPresenter元素，并在Base状态下，将Visibility从Collapsed更改为Visible。
现在希望您的按钮看起来像这样。
运行应用程序并查看ContentPresenter的Scale是否不跟随按钮Face的Scale。
这可能对您来说没问题，但我希望它能跟踪按钮Face的Scale。
因此，将ContentPresenter移动到名为Face的元素内部。
文本现在更小，如下图所示，但会随着Face一起增长。
在运行的应用程序中，动画变化几乎不明显，因为文本太小且难以视觉参考。
假设文本能在最小的按钮中正常工作是不现实的，所以为了适应而将文本缩小只会是愚蠢的！
我们也不想真正尝试Scale文本，以适应所有可能的按钮尺寸。
我们还需要记住，通过将ContentPresenter放置在Face中。
文本的Scale被0.75或75%缩小，这是由Style定义的大小。
那么我们应该编辑Style中的Font Size吗？
或者我们应该更改Button Template中ContentPresenter的Scale吗？
我们应该更改Button Template中ContentPresenter的Scale，而不是Style中的Font Size。
这是因为，当我们将此Style应用于页面上的对象时，Font Size将在Scale上与其他页面上的对象匹配。
（如果我们为按钮Style设置11的Font Size，并为文本框Style做同样的事情，我们希望它们在页面上是相同的大小，而不是75%）
因此，让我们补偿我们自动应用的0.75的Scale Transform。
当我们把ContentPresenter放在名为Face的元素中时。
选择ContentPresenter并在Base状态下，为X和Y轴设置一个1.25的Scale Transform。
这将使Font Size恢复到按钮Style的默认设置，并与其他Controls的Styles相当。
现在，通过点击Artboard左上角的Style图标，进入Style。
确保您的Font Size已Reset为默认值8.25。
希望您的按钮上的文本与我的比例相同。
在Expression Blend中看起来不错，但在网页浏览器中运行时，Text仍然非常小。
所以可以公平地说，在这个UserControl（按钮）中。
当文本叠加在图形组件上时，它需要更大才能清晰。
现在我们可以再次增加ContentPresenter的Scale，但这次不行。
相反，我们应该增加Style中的Font Size。
这样它就预设在Style中，作为此UserControl的推荐最小值。
当我们对任何按钮应用此Style时，Font Size将更改为我们的预设（除非我们覆盖它）并为该UserControl进行适当调整。
因此，将Style中的Font Size更改为11，运行应用程序并自行决定。
现在，一个文本字符串（或单词）对于较小的按钮尺寸来说并不十分合适。
因此，通过点击"Button"图标（或Return Scope图标）退出按钮的Style。
选择最小的按钮，并在Properties选项卡的Common Properties中，ResetContent。
（请注意，默认的Font Size是11，这是因为它设置在底层Style中）
接下来选择中等大小的按钮，将Content更改为"8"，并将Font Size更改为24。
然后对深色背景上的按钮也做同样的操作。
现在，当在网页浏览器中显示时，希望您的按钮看起来像这样。
我认为这就是结局了！
这是完成按钮的源代码，包含三个推荐更新。
尽管我更希望您自己构建它！
摘要
我希望您觉得本教程具有教育意义，因为我已尽力使其尽可能线性且不重复。
但与此同时，我们也从错误中学习，根据需要进行调整，以充分利用我们的布局功能。
我真正想要的是您的创造力能够主导，并沿着我所展示的路径前进。
我并不是说这是唯一的路径，所以如果您能建设性地添加内容，请自己发布一个教程。
如果您想了解更多关于简介中所示的其他按钮Styles的教程，请告诉我。
其他教程
还有最后一件事，请务必给我的文章评分！:-)
历史
- 2010年3月11日：初始版本