使用XAML创建按钮

本演练的目的在于介绍如何创建要在 Windows Presentation Foundation
（WPF） 应用程序中使用的动画按钮。本演练使用样式和模板来创建自定义的按
钮资源，通过该按钮资源可以重用代码并将按钮逻辑与按钮声明分开。本演练完
全是用可扩展应用程序标记语言 （XAML） 编写的。


本演练指导您通过在 Microsoft Visual Studio 中键入或复制和粘贴可扩展应
用程序标记语言 (XAML) 来逐步创建应用程序。
下图显示的是已完成的按钮。


让我们首先从创建一个新项目并向窗口中添加几个按钮开始。
创建新的 WPF 项目并向窗口中添加按钮

创建新的 WPF 项目：在“文件”菜单上，指向“新建”，再单击“项目”。此
时将打开下图所示的窗口。在左窗格中的“Visual C#”节点下面，选择“.NET
Framework 3.0”。在右窗格中，选择“Windows 应用程序 (WPF)”模板。将该
项目命名为“AnimatedButton”。这将创建应用程序的主干。

添加基本的默认按钮：本演练中所需的全部文件均由该模板提供。通过在解决方
案资源管理器中双击 Window1.xaml 文件来打开它。默认情况下，Window1.xaml
中存在一个 Grid 元素。移除 Grid 元素，并通过向 Window1.xaml 中键入或复
制和粘贴以下突出显示的代码来向可扩展应用程序标记语言 (XAML) 页面中添
加几个按钮：

按 F5 运行该应用程序；您应当能够看到类似下图的一组按钮。

现在您已经创建了基本按钮，这样就完成了在 Window1.xaml 文件中的工作。本
演练其余部分重点介绍如何在 app.xaml 文件中为这些按钮定义样式和模板。
接着，我们将会为这些按钮设置一些属性，以便控制按钮外观和布局。
您将使用资源来为整个应用程序定义按钮属性，而不是为这些按钮单独设置属
性。在概念上，应用程序资源与网页的外部级联样式表 (CSS) 相似；但是，资
源远比级联样式表 (CSS) 强大，在本演练结束时您将明白这一点。

定义 Application.Resources 块：打开 app.xaml 并添加下面突出显示的标记
（如果尚未添加）：

资源范围由资源的定义位置来确定。如果资源是在 app.xaml 文件的
Application.Resoureses 中定义的，则将允许从应用程序中的任何位置使用资
源。
创建一个样式并用该样式定义基本属性值：向 Application.Resources 块添加
下面的标记。此标记创建一个应用于该应用程序中所有按钮的 Style，并将这些
按钮的 Width 设置为 90，将 Margin 设置为 10：

TargetType 属性指定将该样式应用于 Button 类型的所有对象。每个 Setter
都为 Style 设置不同的属性值。因此，此时该应用程序中的每个按钮的宽度都
为 90，边距都为 10。如果您按 F5 运行该应用程序，则将看到下面的窗口。

您还可以对样式进行更多的处理，这包括以各种方式微调对象的目标、指定复杂
的属性值，甚至将样式作为其他样式的输入。
为资源设置样式属性值：使用资源，可以通过一种简单的方式来重用通常定义的
对象和值。为了使代码更加模块化，使用资源定义复杂值尤其有用。向 app.xaml
添加下面突出显示的标记。

您已经在 Application.Resources 块的正下方创建了一个名为
“GrayBlueGradientBrush”的资源。此资源将定义一个水平渐变。此资源可以
在该应用程序中的任何位置（包括 在 Background 属性的按钮样式 setter 内
部中）用作属性值。现在，所有的按钮都具有此渐变的 Background 属性值。
按 F5 运行该应用程序。其外观类似于下图：


在本节中，将创建一个用来自定义按钮外观（表示）的模板。按钮表示是由几个
赋予按钮独特外观的对象（包括矩形和其他组件）组成的。
到目前为止，对应用程序中按钮外观的控制已限制为更改按钮的属性。如果您希
望更彻底地改变按钮的外观，该怎么办？使用模板可以强有力地控制对象的表
示。由于模板可以在样式中使用，因此您可以将模板应用于所有应用了样式的对
象（在本演练中为按钮）。

设置模板：由于控件（如 Button）具有 Template 属性，因此您可以像对 Style
中所设置的其他属性值那样，使用 Setter 来定义模板属性值。向按钮样式中添
加下面突出显示的标记。

更改按钮表示：此时，您需要定义模板。添加下面突出显示的标记。此标记指定
了两个后跟 DockPanel 且具有圆角的 Rectangle 元素。DockPanel 用于承载按
钮的 ContentPresenter。A ContentPresenter 显示按钮的内容。本演练中，内
容为文本 ("Button 1", "Button 2", "Button 3")。所有模板组件（矩形和
DockPanel）都放置在一个 Grid 内。

按 F5 运行该应用程序。其外观类似于下图：

向模板中添加玻璃效果：接着将添加玻璃效果。首先创建一些用来生成玻璃渐变
效果的资源。将这些渐变资源添加到 Application.Resources 块中的任何位置：

这些资源将用作按钮模板的 Grid 中所插入的矩形的 Fill。
向模板添加下面突出显示的标记。

请注意，x:Name 属性为“glassCube”的矩形的 Opacity 为 0，因此，当您运
行该示例时，将看到上面并没有覆盖玻璃矩形。这是由于我们将在以后向该模板
中添加用户与该按钮交互时将触发的触发器。但是，您可以通过将 Opacity 值
更改为 1 并运行该应用程序来查看按钮现在的外观。请参见下图。在转至下一
步之前，请将 Opacity 更改回 0。


在本节中，将创建属性触发器和事件触发器来更改属性值和运行动画，以响应用
户操作（如将鼠标指针移到按钮上并单击）。
添加交互性（鼠标悬停、鼠标离开和单击等）的一个简便方法就是在模板或样式
内部定义触发器。若要创建 Trigger，需要定义一个属性“条件”，例如：按钮
的 IsMouseOver 属性值等于 true。随后将定义在触发条件为 true 时所发生的
setter（操作）。

添加模板触发器：向模板添加突出显示的标记。

添加属性触发器：向 ControlTemplate.Triggers 块添加突出显示的标记：

按 F5 运行应用程序，并查看在将鼠标指针移到按钮上时的效果。
添加焦点触发器：接着，将添加一些类似的 setter 来处理当按钮具有焦点时（例
如，当用户单击按钮之后）的情况。

按 F5 运行应用程序，并单击其中的某个按钮。请注意，在单击该按钮之后，该
按钮仍具有焦点，因此它仍将保持突出显示状态。如果您单击另一个按钮，则新
按钮将获得焦点，而上一个按钮则失去焦点。
为 MouseEnter 和 MouseLeave 添加动画：接着将向触发器添加一些动画。
在 ControlTemplate.Triggers 块内部的任意位置添加下面的标记。

当鼠标指针移到该按钮上时，玻璃矩形会收缩；当指针离开该按钮时，镜面矩形
会返回到其正常大小。
当指针移到该按钮上（引发 MouseEnter 事件）时会触发两个动画。这些动画会
使玻璃矩形沿着 X 轴和 Y 轴收缩。请注意 DoubleAnimation 元素的属性：
Duration 和 By。Duration 指定动画持续半秒多，By 指定玻璃收缩 10%。
第二个事件触发器 (MouseLeave) 只是停止第一个触发器。当您停止某个
Storyboard 时，所有的动画属性都恢复到其默认值。因此，当用户将指针移开
按钮时，该按钮将返回到鼠标指针移到其上之前的状态。
添加单击按钮时的动画效果：最后一步是添加在用户单击按钮时将触发的触发
器。在 ControlTemplate.Triggers 块内部的任意位置添加下面的标记：

按 F5 运行应用程 序，并单击其中的某个按钮。当您单击某个按钮时，玻璃矩形
会旋转。

在本演练中，进行了下列练习：
使 Style 面向对象类型 (Button)。
使用 Style 控制整个应用程序中按钮的基本属性。
创建要用于 Style setter 的属性值的资源（如渐变）。
通过向按钮应用模板来自定义整个应用程序中按钮的外观。
自定义按钮的行为（包括动画效果）来响应用户操作（如 MouseEnter、MouseLeave
和 Click）。