Expression Blend & Silverlight 中的街机按钮
4.96/5 (57投票s)
创建、调整和样式化 Arcade 按钮所需的所有工具
引言
您是否对街机和用力拍打“开火”按钮有着美好的回忆？您甚至可能在想，由于重复性劳损引起的关节炎何时才会发作！好吧，我将向您展示如何重新创建这个深受喜爱的按钮，这样我们就可以给它更多的敲击！
概述
但本教程的真正目的是演示如何倾斜按钮的角度，使其看起来似乎远离用户。我们将通过使用Grid对象的一些强大功能来实现这一点，同时讨论替代方法。我们还将研究如何组合基本形状来创建更复杂的元素，并简要介绍效果。
在开始本教程之前，我建议您阅读我的“制作更好的按钮”教程（初学者指南）。
我将本教程分为几个部分，以便于参考
第一部分 - 设置按钮
在 Expression Blend 中打开一个新应用程序，并将其命名为“ArcadeButton”。
在“画板”上，设置3个按钮，尺寸分别为100x100、64x64和32x32。
现在将64x64像素按钮的内容设置为“8”，字体大小设置为24。
删除（重置）32x32像素按钮的内容。
（随意在内容中放置您想要的任何内容 - 这是您的按钮！）
复制这些按钮，并将它们设置在黑色Rectangle上，如下图所示
（为了在本教程中清晰起见，我使用了非白色作为我的浅色背景）。
右键单击其中一个按钮，然后选择“编辑模板” > “编辑副本”。
在“创建样式资源”窗口中，将您的按钮样式命名为“ArcadeButton”。
从“按钮模板”作用域向上，并将“ArcadeButton”样式复制到其他5个按钮。
返回“按钮模板”，删除除ContentPresenter之外的所有元素。
您现在可能希望保存您的项目副本，并将其命名为“BlankButtonTemplate”。
（这将为您节省下一个按钮的设计时间，但这是您的选择）。
现在选择名为Grid的元素，然后双击“椭圆工具”在模板中插入一个椭圆。
将椭圆重命名为“RimBGround”，右键单击它，然后选择“分组到” > “Grid”。
将新的Grid元素重命名为“Rim”，并将其移动到“对象和时间线”中的ContentPresenter上方。
选择ContentPresenter并将其隐藏，方法是将元素可见性设置为Collapsed。
（隐藏ContentPresenter是可选的，我为了本教程的清晰度而隐藏了它）。
现在选择RimBGround元素，删除描边，并将填充设置为Template Binding > Background。
接下来转到样式，设置一个更有趣的颜色。
我选择了一种深红色（RGB 180, 0, 0）。
现在回到按钮模板，让我们开始考虑如何倾斜圆圈，以产生我们正在以某个角度观察它的感觉。
现在有几种方法可以尝试做到这一点
- 在元素（或父元素）上设置旋转投影，将边框倾斜远离我们（围绕X轴）。
- 在Y轴上缩放边框，将圆圈压扁成椭圆。
- 细分父对象，以便子对象仅占按钮模板的一部分。
这些方法都可以奏效，但有些会使我们的生活更轻松。
就像第一种方法一样，在元素上设置30度绕元素X轴的旋转投影。
如果您阅读了我关于按钮的先前文章。
您将知道，当应用投影时，渐变工具将不再可用。
所以让我们放弃这种方法，看看将Y轴的缩放设置为0.8，以倾斜我们的视角。
这无疑产生了视角变化的印象。
但就像改变投影一样，这种倾斜是中心发生的。
这意味着我们的按钮正面（顶部）将必须位于按钮模板的中心线之上。
相对定位元素对我们来说在本教程中将非常重要。
在按钮模板中插入一个椭圆，带有黑色描边，无填充。
应用X和Y的缩放变换，以生成一个比例上适合第一个的椭圆。
（0.7和0.53的值似乎非常适合我们按钮的内部部分。）
现在我们有了按钮的内部基座，让我们复制这个椭圆并定位顶部。
但是，当我设置边距以在最大的按钮中定位顶部时，请看看较小按钮的结果。
您可能认为，以这种方式控制不同尺寸下按钮顶部表面的位置将是一场噩梦。
但是，我们可以不使用边距来定位UserControl内的元素，而是改变中心点。
请注意，默认情况下，X和Y坐标都设置为0.5（中间）。
这些值与UserControl成比例，而不是像Margins那样固定在像素中的有限值。
X和Y都设置为0，会将中心点移动到左上角。
而X和Y都设置为1，会将中心点移动到右下角。
因此，在选定代表按钮顶部的椭圆后，重置边距。
现在将Y的中心点更改为0.2。
看看这如何解决了使用边距产生的缩放问题。
那么到底发生了什么？
首先，尝试将应用于顶部椭圆的缩放变换从0.53更改为0.2。
该椭圆以0.2（或20%）的比例值进行缩放，从新的中心点向上和向下。
但是，因为按钮模板（或父元素）在中心点下方比上方有更大的范围。
它会按比例在此方向上缩放更多，因为新的中心点下方范围的20%比上方更多。
（基本上，在中心下方，它占据了到其边界（父元素）范围的20%，并在其上方做了同样的事情）。
我在下图中高亮了中心点。
这对于使对象缩放偏离中心、缩放到远处，甚至从侧面或角落生长非常有用。
（我可能会在另一个教程中演示...）
我们可以使用这种移动中心点的方法来创建我们的按钮。
但我希望使用Grid来实现。
（我在本教程末尾包含了一个通过更改中心点构建按钮的示例。）
所以让我们看看第三种选择，即细分一个Grid，将按钮模板进行细分。
并告知子对象仅占用按钮模板的一部分。
所以删除我们添加的2个黑色椭圆，并删除应用于RimBGround元素的缩放变换。
选择名为Root的Grid元素，并确保选择了选择工具。
在“画板”中，单击按钮模板左侧的浅蓝色条带。
这将会在Grid元素中插入一个行分隔符。
（就像单击顶部条带会插入一个标题分隔符一样）。
现在这是Grid的真正强大之处，我们可以通过3种方式控制此行分隔符的行为。
但我们将将其保留在默认的Star状态。
Star表示它是比例的，因此是总尺寸的百分比，对我们来说非常完美！
（有许多其他资源讨论Grid，如果您不熟悉Grid，我建议您查找这些资源）。
我希望我的行分隔符距离Grid顶部五分之一处，即20%。
我可以通过编辑“属性”选项卡“布局”部分的扩展区域中的RowDefinitions来精确设置。
（在Star模式下，RowDefinitions的总和应为1，相当于100%。因此20%是0.2）。
我们也可以在XAML中设置此项，这是我的首选。
所以单击“拆分视图”图标，以显示XAML代码。
代码是上下文敏感的，将跟随选定的元素。
当Grid被选中时，您的XAML应如下所示
因此，当RowDefinitions设置为0.2 Star和0.8 Star时，选择Rim元素。
现在使用“选择工具”，将Rim元素的顶部边缘向下拖动，直到它吸附到行分隔符上。
名为Rim的元素应如下图所示“吸附”在行分隔符上。
（检查“属性”选项卡“布局”部分，并确保边距全部设置为0）。
它现在应该已固定并引用到此行分隔符。
（如果分隔符在“画板”中移动，元素将保持固定并应用边距以进行补偿）。
（但是当分隔符在代码中调整大小时，元素将跟随分隔符。）
第二部分 - 形成边框
现在让我们快速对边框进行一些修饰。
复制并粘贴名为RimBGround的元素，以制作一个完全相同且具有相同锚定的副本。
将此新元素重命名为“RimContour”，并删除描边。
将填充设置为径向渐变，其中包含1个黑色渐变停止点和3个白色渐变停止点。
将它们分别放置在色带的70、74、95和100处。
将黑色渐变停止点保持在100% Alpha，将接下来的2个白色渐变停止点设置为60%，最后一个设置为0%。
这应该会为您提供一个如下图所示的黑洞。
现在我们需要稍微偏移这个覆盖层，使用渐变工具向上和向左移动。
因此，单击箭头的柄，然后朝顶部和一小部分向左拖动。
通过单击拖动箭头的头部，还可以稍微缩小渐变。
现在，将不透明度蒙版应用于RimContour元素，使用线性渐变。
将箭头设置为如下图所示，在色带上设置15、35、60和85的渐变停止点。
将Alpha值分别设置为100%、30%、30%和70%。
您可能已经意识到，我的渐变不是以 45 度运行的，因为我从矩形的角落到角落，而不是正方形。
目前这没关系，因为在我们完成按钮后，我们可以回来编辑/调整它。
第三部分 - 凸起的按钮顶部
选择名为 Grid 的根元素，然后双击“椭圆工具”插入一个新椭圆。
选择新椭圆，右键单击，然后选择“分组到” > “Grid”。
将此新Grid重命名为“RaisedButton”，展开它，然后再次选择椭圆。
再次右键单击椭圆，然后再次选择“分组到” > “Grid”。
将此新Grid重命名为“Top”，然后将椭圆重命名为“TopBGround”。
现在选择ContentPresenter并将其拖到“对象和时间线”列表的底部。
希望您的元素树在“对象和时间线”中看起来如下图所示。
选择RaisedButton元素，并为X和Y轴设置0.7的缩放变换。
现在我们有了按钮内部的开始，但它需要像我们对边框所做的那样进行倾斜。
确保选中了RaisedButton元素，并选择了选择工具。
在“画板”中，单击RaisedButton元素左侧的浅蓝色条带。
现在将RowDefinitions的Star尺寸设置为0.8和0.2。
接下来，选择名为Top的元素，并将底部边缘向上拖动，直到它吸附到我们刚刚设置的行分隔符上。
按钮顶部现在与边框的比例正确，并且完美地缩放以适应所有按钮尺寸。
接下来，选择TopBGround元素，并将填充设置为Template Binding > BorderBrush。
同时删除描边，然后向上作用域到样式。
将BorderBrush设置为实心填充，颜色与我们为背景颜色设置的深红色相同（RGB 180, 0, 0）。
我将RaisedButton和边框设置为相同颜色，但使用样式中的不同资源的原因是。
因为我喜欢它都是一种颜色，但我想要在稍后探索不同颜色方案时进行更改的能力。
让我们快速使顶部变得漂亮，所以回到按钮模板。
选择TopBGround元素，然后复制并粘贴以复制该元素。
将新元素重命名为“TopEdgeShine”，删除描边并重置填充。
现在将填充设置为径向渐变，在色带的85、90、95 和 100处具有白色渐变停止点。
接下来将Alpha值分别设置为0%、100%、100%和0%。
运气好的话，您应该会得到与下图中相同的结果。
现在应用不透明度蒙版，以柔化上面的“光环”效果。
将其设置为线性渐变，在色带上15、45、55和85处设置渐变停止点。
接下来将Alpha值分别设置为100%、0%、0%和60%。
（请记住，这个线性渐变也不是45%的角度，但就像边框一样，我们稍后可以进行调整。）
现在复制并粘贴TopEdgeShine元素以复制它，并将其重命名为“TopDimpleHighLight”。
重置不透明度蒙版，并将填充设置为径向渐变，在色带的50和55处具有白色渐变停止点。
将Alpha值分别设置为100%和0%。
现在选择渐变工具，旋转并调整以匹配下图。
（请记住，所需的渐变工具大小取决于您放置渐变停止点的位置）。
（所以我们可以将渐变停止点设置在色带的90和100处，并将渐变工具的大小设置为更小）。
现在应用一个带有线性渐变的不透明度蒙版到TopDimpleHighLight。
将渐变停止点设置在色带的50和100处，Alpha值分别为0%和100%。
使用渐变工具，将箭头设置为如下图所示。
（请记住，这仍然不是45度，但与之前一样，我们稍后将进行调整。）
第四部分 - 凸起的按钮侧面（裙边）
现在有几种方法可以创建裙边（或凸起按钮的侧面）。
我们可以创建一个新月形，只填充裙边可见的部分，但这会导致布局问题。
因为当设置为拉伸并填充其父对象时，该元素将无法正确比例化。
如果我们不拉伸以填充，新月形元素将无法适用于所有按钮尺寸。
我们可以像前面展示的那样，通过在父对象上使用行分隔符来约束新月形元素。
这会奏效，但我们也需要制作这个形状笨拙的新月形元素。
如果我们要调整按钮的高度，甚至对其进行动画处理，它也不会非常灵活。
所以，取而代之的是，我们将使用一个小技巧来欺骗用户，让他们认为裙边只填充了其可见区域。
（请记住，按钮的顶部不是透明的，所以裙边在其后面并不会有问题。）
因此，在“对象和时间线”中，选择RaisedButton元素。
并设置另一个行分隔符，如下图所示。
现在在XAML中，将RowDefinitions设置为0.2、0.6和0.2，如下图所示。
在仍选中RaisedButton元素的情况下，通过双击左侧工具栏中的椭圆工具插入一个新的椭圆。
使用选择工具，将这个新椭圆的顶部向下拖动，直到它吸附到我们刚刚设置的行分隔符上。
（请注意，名为Top的Grid元素跨越了这个新的行分隔符，不需要受其约束。）
现在右键单击椭圆，然后选择“分组到” > “Grid”。
将此新Grid元素重命名为“Skirt”，并将椭圆重命名为“SkirtBGround”。
在“对象和时间线”中，将Skirt元素拖到RaisedButton元素上，将其放置在正面后面。
按钮现在应该看起来如下图所示。
（您是否注意到我们创建的Grid从我们分组的椭圆复制了其布局属性。）
选择SkirtBGround元素，删除描边，并将填充设置为Template Binding > BorderBrush。
这开始看起来像裙边，因为底部边缘很好地嵌入在边框的阴影内。
（您可能已经像我在这里一样偏移了形成边框的渐变。）
（但别担心，我们稍后会解决这个问题...）。
但是，我们仍然缺少裙边的左右两侧。
所以我们需要一个元素来填充名为Skirt的Grid元素的一部分。
我们可以通过在Skirt中插入一个由25%和50%的行分隔符控制的Rectangle来实现。
但这在动画方面将很麻烦，并且比需要它更复杂。
取而代之的是，我们在Skirt的Grid元素中设置一个行分隔符，比例为50%，这相当于我们需要填充的侧裙区域的底部边缘。
确保您的RowDefinitions设置为0.5 Star和0.5 Star，并如下图所示。
现在在名为Skirt的Grid元素的上部插入一个Rectangle。
（为了清晰起见，通过单击“对象和时间线”中它旁边的眼睛来隐藏Top元素。）
确保Rectangle的边距设置为0，并且您的按钮看起来如下图所示。
现在在“对象和时间线”中，选择Rectangle和SkirtBGround元素。
从顶部菜单栏选择对象 > 组合 > 联合。
如果您按照我描述的顺序选择了元素，您将得到一个类型为Path的新元素，如下所示。
这个新元素的属性将继承自构成这个Path的最后选择的元素。
因此，如果您选择的是Rectangle而不是SkirtBGround元素。
您需要再次删除这个新路径元素的描边，并将填充设置为Template Binding > BorderBrush。
最后，您还需要将这个新的Path元素重命名为“SkirtBGround”。
我们不再需要创建Rectangle时设置的行分隔符，所以当Skirt元素被选中时。
单击“画板”中的选择工具的行分隔符的头部，然后删除它。
（这可能很棘手，所以如果需要，请放大一点。）
您可能还会发现名为SkirtBGround的Path元素消失了，但这只是一个刷新问题。
如果发生这种情况，请单击眼睛图标两次，以隐藏和取消隐藏SkirtBGround元素。
接下来取消隐藏我们为了清晰而隐藏的Top元素。
现在我们有了按钮裙边的侧面，但顶部25%的元素中也有一些不需要的组件。
但与其尝试用Grid和行分隔符来控制这一点，我将回到我值得信赖的朋友，不透明度蒙版。
如果您阅读了我第一篇按钮文章，您会知道我们可以随时间动画化渐变停止点。
这将使以后动画化此按钮变得非常容易。
但与其在名为SkirtBGround的Path元素上设置不透明度蒙版。
（我们将将其应用于父对象，从而应用于其所有子对象。）
所以选择名为Skirt的元素，并设置一个带有线性渐变的不透明度蒙版。
在色带上25和26处设置渐变停止点，Alpha值分别为0%和100%。
（渐变工具的默认设置应该没问题，如果不行，请调整以匹配上图。）
现在我们需要给按钮裙边一些形状，所以通过复制和粘贴来复制SkirtBGround元素。
将此元素重命名为“SkirtGradient”，重置填充并将其设置为线性渐变。
在色带的0、20、50、80和100处放置黑色渐变停止点。
将Alpha值分别设置为40%、10%、0%、60%和100%。
使用渐变工具，将渐变从左到右设置为如下图所示。
现在将SkirtGradient元素的不透明度设置为60%，以降低对比度。
目前看起来不错，如果需要，我们以后可以对其进行调整。
接下来选择名为SkirtGradient的元素，通过复制和粘贴进行复制。
将此新元素重命名为“SkirtEdgeShadow”，并将填充更改为径向渐变。
在色带的90和100处设置黑色渐变停止点，Alpha值分别为0%和100%。
将元素不透明度保持在60%，除非您更喜欢其他值。
第五部分 - 最后的修饰
按钮现在看起来不错，并且具有我们所需的所有基本组件。
我们只需要一些小的增强来完成它。
这可能包括使用渐变工具重新调整RimContour元素上填充渐变的位置，以使其整齐地环绕裙边。
但在调整之前，让我们让按钮在边框上投射阴影。
现在最简单的方法是使用效果，而Blend 3内置了2种这样的效果。
模糊效果和阴影效果，我们将使用后者。
因此，在“对象和时间线”中选中RaisedButton元素。
单击“属性”选项卡“外观”部分中效果旁边的“新建”按钮。
从弹出窗口中，选择“DropShadowEffect”并单击OK。
（为了在本教程中节省空间，我缩小了弹出窗口。）
现在，在仍选中RaisedButton元素的情况下，单击“属性”选项卡“外观”部分效果的展开器。
现在更改Expression Blend提供的一些默认设置。
将BlurRadius设置为3，Opacity设置为50%，ShadowDepth设置为3。
我们将保留其余设置不变，但请随意尝试。
例如更改Direction，即光源的起始角度。
（315度显然是360度减去45度。与时钟表盘上的10:30相同。）
比较最小按钮上的阴影深度与最大按钮上的阴影深度。
（上面显示的是最小按钮）
它比最大按钮上的阴影更明显，因为它们的像素大小相同。
这意味着DropShadowEffect是有限的，并且与按钮大小不成比例，它不会Scale！
所以我们需要另一种方法来生成此效果，但我将保留DropShadowEffect，因为它柔化了按钮的右侧。
选择名为Rim的元素，并将一个新的椭圆插入此Grid中，并命名为“RimButtonShadow”。
在选中RimButtonShadow元素的情况下，删除描边并将填充设置为径向渐变。
现在在色带的75、95和100处设置黑色渐变停止点，Alpha值分别为100%、50%和0%。
使用渐变工具，按如下图所示调整渐变的尺寸和位置。
现在将RimButtonShadow元素的不透明度设置为50%，以降低对比度。
请注意，此效果会按按钮大小的完美比例缩放。
而且最好的部分是我们可以随时间动画化这个渐变的位置！
但在我们开始玩Visual State Manager (VSM)之前，让我们总结一下我们学到的东西。
第六部分 - Grid 与 Scale Transform
希望我已向您展示，可伸缩性在Silverlight中很重要。
谁愿意为 Windows 应用程序设计一组按钮，然后又必须为移动应用程序重新设计它们？
我当然不想，您呢？
我们已经看到，某些效果和技术是有限的，不会Scale。
但是，让我们考虑两种可以Scale的技术。
带偏移中心点的Scale Transform和Grid Subdivision，哪种更好？
好吧，Scale Transform非常方便且易于使用，并且可以随时间进行动画。
但是，Scale Transform只会根据父对象的中心点缩小或增长。
这不够灵活，如果我们已经使用中心点来控制UserControl的Layout。
而使用行和标题分隔符的Grid进行细分，在定位方面功能强大得多。
然而，在Blend 3中，我们无法随时间动画化行或标题分隔符。
（没有开发者的帮助是不行的，应该有替代方案...）。
所以我的简单建议是：如果不需要更改中心点，请尝试Scale Transform。
如果需要任何类型的偏移，请考虑Grid Subdivision，因为它使中心点可以用于进一步的操作。
这意味着我们应用于RaisedButton元素以调整其在边框内的尺寸的Scale Transform...
可以通过将其元素放置在细分 Grid中来定位和调整子元素的大小来实现。
Grid因为细分器而变得相当拥挤，但这种定位方法有其优势。
它提供了简单、明显的控制，用于定位和偏移RaisedButton元素（向左稍微移动一点）。
这意味着我们可以稍微偏移RimContour元素的Fill属性，以增强我们的按钮边框**，使其与光线方向更符合。**
（左侧按钮完美居中，右侧按钮在边框上稍微偏左。）
（允许我编辑并偏移RimContour Fill属性）。
但我们真的需要吗？这是您的选择，也许需要更多练习使用行和标题分隔符。
（我在本教程的末尾包含了这两种变体的源代码）。
最重要的是要记住，细分 Grid是最好的！
并且仍然将中心点留给您，以便在需要应用Scale Transform时使用。
这意味着我们可以为已经从其父对象中心偏移的元素应用偏移Scale。
我们在这个教程中不想这样做，但如果收到任何请求，我将做一个教程来进一步解释这一点...
第七部分 - 基本动画
为了使本教程不过于冗长，我将只为这个按钮设置一些基本功能。
所以选择名为Top的元素，并确保您已打开VSM (Visual State Manager)。
现在选择Pressed状态，在RenderTransform部分，将Y轴的位置平移设置为10。
请注意，按钮的顶部现在在UserControl (Button Template)内向下移动10像素。
现在，通过阅读前面的部分，您可能已经意识到这个距离是有限的。
它会将按钮顶部向下移动10像素，而不管按钮尺寸如何。
这对于我们最小的按钮来说是行不通的。
通过按F5运行应用程序，亲自看看。
（我已将所有按钮设置为Pressed状态，通过将Pressed状态模拟为Base状态。）
按钮的顶部平移（移动）的距离比我们想要的要远，尤其是在最小的按钮上。
因为在32x32像素的Control Template (Button Template)中，10像素的比例并不现实。
据我所知，在Expression Blend中，我们无法使位置平移可缩放。
（但我不喜欢说“不能”或“无法”，所以如果有一种方法可以使用Translate进行Scale，请告诉我。）
（我们可以通过更改中心点来实现，但这比我在这里想说的要复杂。）
所以，我们将不得不接受这个有限值，并为不同的按钮尺寸进行调整。
接着，Pressed状态下的按钮还会显示部分裙边背景，因为它不再被按钮顶部隐藏。
因此，为了纠正这一点，我们需要为Pressed状态编辑Skirt元素的不透明度蒙版。
所以仍然在Pressed状态下，选择Skirt元素，然后单击不透明度蒙版。
现在将色带上的渐变停止点从25和26分别移动到50和51。
运行您的应用程序并检查结果。
您可能已经注意到，将这些渐变停止点移动到色带的50和51处，实际上“过度”补偿了顶部的位移。
这是因为顶部和裙边元素占据了父细分 Grid的不同部分。
因此，由于具有不同的父参考中心，它们不会完美地按比例缩放。
我在大按钮上过度补偿，在最小按钮上补偿不足。
通过将Top元素的不透明度设置为30%，并查看Pressed状态下的最大和最小按钮，自己检查一下。
由于我们为每个元素引用了不同的父参数，因此无法按比例缩放它们。
我们所能做的就是最好的猜测，这对于这个按钮来说已经足够了。
现在为动画设置持续时间，在默认过渡中设置为0.2秒。
既然我们在这里，就通过设置“Back Out”的缓动函数来给它一些“弹出”效果。
运行应用程序并检查结果。
现在按钮的反应相当真实，我们只需要调整阴影，就可以为现实世界完成我们的按钮。
所以选择名为RimButtonShadow的元素，仍然在Pressed状态下。
使用渐变工具，移动和缩放渐变以匹配下图。
再次运行您的应用程序并检查结果。
希望您现在拥有一个漂亮的按钮，其功能就像在现实世界中一样！
第八部分 - 结论
现在我已经向您展示了如何创建一个功能性的Arcade Button。
但我更感兴趣的是展示技术，而不是我们按钮的视觉质量。
请记住，我曾告诉过您，我们可以稍后调整一些线性渐变，因为它们不是45%。
但当时这样做会很棘手，因为我们还没有所有元素，无法引用我们所有的调整。
所以现在是时候编辑它们了，如果您愿意。
这些包括
- 应用于RimContour元素的不透明度蒙版。
- 应用于TopEdgeShine元素的不透明度蒙版。
- 应用于TopDimpleHighLight元素的不透明度蒙版。
根据您的需要调整这些，以及本教程中的任何其他元素。
请记住，边框和RaisedButton是Template Bound到样式的，所以请在此处根据您的需要编辑您的颜色方案。
我的意图不是成为您的设计师，只是成为您的向导！
这结束了本教程，因为我已经为您提供了创建、调整和样式化此按钮所需的所有工具！
我将把Disabled和Focused元素及状态留给您自己添加。
如果您需要帮助，请参考我的初学者指南。
（请记住在Disabled状态下将DropShadowEffect的不透明度设置为0%。）
此外，请随意为MouseOver状态添加一些动画。
最后，我们还需要为ContentPresenter添加一个围绕X轴的30度投影。
结束！- 如果您发现本教程有教育意义或有用，请评价它。
我的下一篇教程将在几天内发布，而不是像之前所说的关于VSM。
但如果您喜欢前两篇，我敢肯定您会喜欢它。
所以收藏我！
祝您狩猎愉快，请务必评价我的文章！
第九部分 - 完成的变体
以下是使用Grid分隔符的首选施工方法
以下是替代方法，即改变中心点
以下是本教程涵盖的基础版本
（以防您想要所有变体）
其他教程
历史
- 2010 年 3 月 23 日：初始版本