使用 XAML 创建具有动画,玻璃效果的按钮.doc

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