|
本演练的目的在于介绍如何创建要在 Windows Presentation Foundation （WPF） 应用程序中使用的动画按钮本演练使用样式和模板来创建自定义的按钮资源通过该按钮资源可以重用代码并将按钮逻辑与按钮声明分开本演练完全是用可扩展应用程序标记语言 （XAML） 编写的 重要说明 本演练指导您通过在 Microsoft Visual Studio 中键入或复制和粘贴可扩展应用程序标记语言 (XAML) 来逐步创建应用程序 下图显示的是已完成的按钮 创建基本按钮 让我们首先从创建一个新项目并向窗口中添加几个按钮开始 创建新的 WPF 项目并向窗口中添加按钮 启动 Visual Studio 创建新的 WPF 项目在文件菜单上指向新建再单击项目此时将打开下图所示的窗口在左窗格中的Visual C#节点下面选择NET Framework 在右窗格中选择Windows 应用程序 (WPF)模板将该项目命名为AnimatedButton这将创建应用程序的主干 添加基本的默认按钮本演练中所需的全部文件均由该模板提供通过在解决方案资源管理器中双击 Windowxaml 文件来打开它默认情况下Windowxaml 中存在一个 Grid 元素移除 Grid 元素并通过向 Windowxaml 中键入或复制和粘贴以下突出显示的代码来向可扩展应用程序标记语言 (XAML) 页面中添加几个按钮 按 F 运行该应用程序您应当能够看到类似下图的一组按钮 现在您已经创建了基本按钮这样就完成了在 Windowxaml 文件中的工作本演练其余部分重点介绍如何在 appxaml 文件中为这些按钮定义样式和模板 设置基本属性 接着我们将会为这些按钮设置一些属性以便控制按钮外观和布局 您将使用资源来为整个应用程序定义按钮属性而不是为这些按钮单独设置属性在概念上应用程序资源与网页的外部级联样式表 (CSS) 相似但是资源远比级联样式表 (CSS) 强大在本演练结束时您将明白这一点 使用样式为按钮设置基本属性 定义 ApplicationResources 块打开 appxaml 并添加下面突出显示的标记（如果尚未添加） 资源范围由资源的定义位置来确定如果资源是在 appxaml 文件的 ApplicationResoureses 中定义的则将允许从应用程序中的任何位置使用资源 创建一个样式并用该样式定义基本属性值向 ApplicationResources 块添加下面的标记此标记创建一个应用于该应用程序中所有按钮的 Style并将这些按钮的 Width 设置为 将 Margin 设置为 TargetType 属性指定将该样式应用于 Button 类型的所有对象每个 Setter 都为 Style 设置不同的属性值因此此时该应用程序中的每个按钮的宽度都为 边距都为 如果您按 F 运行该应用程序则将看到下面的窗口 您还可以对样式进行更多的处理这包括以各种方式微调对象的目标指定复杂的属性值甚至将样式作为其他样式的输入 为资源设置样式属性值使用资源可以通过一种简单的方式来重用通常定义的对象和值为了使代码更加模块化使用资源定义复杂值尤其有用向 appxaml 添加下面突出显示的标记 您已经在 ApplicationResources 块的正下方创建了一个名为GrayBlueGradientBrush的资源此资源将定义一个水平渐变此资源可以在该应用程序中的任何位置（包括在 Background 属性的按钮样式 setter 内部中）用作属性值现在所有的按钮都具有此渐变的 Background 属性值 按 F 运行该应用程序其外观类似于下图 创建一个定义按钮外观的模板 在本节中将创建一个用来自定义按钮外观（表示）的模板按钮表示是由几个赋予按钮独特外观的对象（包括矩形和其他组件）组成的 到目前为止对应用程序中按钮外观的控制已限制为更改按钮的属性如果您希望更彻底地改变按钮的外观该怎么办？使用模板可以强有力地控制对象的表示由于模板可以在样式中使用因此您可以将模板应用于所有应用了样式的对象（在本演练中为按钮） 使用模板定义按钮的外观 设置模板由于控件（如 Button）具有 Template 属性因此您可以像对 Style 中所设置的其他属性值那样使用 Setter 来定义模板属性值向按钮样式中添加下面突出显示的标记 更改按钮表示此时您需要定义模板添加下面突出显示的标记此标记指定了两个后跟 DockPanel 且具有圆角的 Rectangle 元素DockPanel 用于承载按钮的 ContentPresenterA ContentPresenter 显示按钮的内容本演练中内容为文本 (Button Button Button )所有模板组件（矩形和 DockPanel）都放置在一个 Grid 内 按 F 运行该应用程序其外观类似于下图 向模板中添加玻璃效果接着将添加玻璃效果首先创建一些用来生成玻璃渐变效果的资源将这些渐变资源添加到 ApplicationResources 块中的任何位置 这些资源将用作按钮模板的 Grid 中所插入的矩形的 Fill 向模板添加下面突出显示的标记 请注意x:Name 属性为glassCube的矩形的 Opacity 为 因此当您运行该示例时将看到上面并没有覆盖玻璃矩形这是由于我们将在以后向该模板中添加用户与该按钮交互时将触发的触发器但是您可以通过将 Opacity 值更改为 并运行该应用程序来查看按钮现在的外观请参见下图在转至下一步之前请将 Opacity 更改回 创建按钮交互性 在本节中将创建属性触发器和事件触发器来更改属性值和运行动画以响应用户操作（如将鼠标指针移到按钮上并单击） 添加交互性（鼠标悬停鼠标离开和单击等）的一个简便方法就是在模板或样式内部定义触发器若要创建 Trigger需要定义一个属性条件例如按钮的 IsMouseOver 属性值等于 true随后将定义在触发条件为 true 时所发生的 setter（操作） 创建按钮交互性 添加模板触发器向模板添加突出显示的标记 添加属性触发器向 ControlTemplateTriggers 块添加突出显示的标记 按 F 运行应用程序并查看在将鼠标指针移到按钮上时的效果 添加焦点触发器接着将添加一些类似的 setter 来处理当按钮具有焦点时（例如当用户单击按钮之后）的情况 按 F 运行应用程序并单击其中的某个按钮请注意在单击该按钮之后该按钮仍具有焦点因此它仍将保持突出显示状态如果您单击另一个按钮则新按钮将获得焦点而上一个按钮则失去焦点 为 MouseEnter 和 MouseLeave 添加动画接着将向触发器添加一些动画 在 ControlTemplateTriggers 块内部的任意位置添加下面的标记 当鼠标指针移到该按钮上时玻璃矩形会收缩当指针离开该按钮时镜面矩形会返回到其正常大小 当指针移到该按钮上（引发 MouseEnter 事件）时会触发两个动画这些动画会使玻璃矩形沿着 X 轴和 Y 轴收缩请注意 DoubleAnimation 元素的属性Duration 和 ByDuration 指定动画持续半秒多By 指定玻璃收缩 % 第二个事件触发器 (MouseLeave) 只是停止第一个触发器当您停止某个 Storyboard 时所有的动画属性都恢复到其默认值因此当用户将指针移开按钮时该按钮将返回到鼠标指针移到其上之前的状态 添加单击按钮时的动画效果最后一步是添加在用户单击按钮时将触发的触发器在 ControlTemplateTriggers 块内部的任意位置添加下面的标记 按 F 运行应用程序并单击其中的某个按钮当您单击某个按钮时玻璃矩形会旋转 摘要 在本演练中进行了下列练习 使 Style 面向对象类型 (Button) 使用 Style 控制整个应用程序中按钮的基本属性 创建要用于 Style setter 的属性值的资源（如渐变） 通过向按钮应用模板来自定义整个应用程序中按钮的外观 自定义按钮的行为（包括动画效果）来响应用户操作（如 MouseEnterMouseLeave 和 Click） |
