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

下图显示的是已完成的按钮。 创建基本按钮 让我们首先从创建一个新项目并向窗口中添加几个按钮开始。 创建新的 WPF 项目并向窗口中添加按钮 启动 Visual Studio。 创建新的 WPF 项目：在“文件”菜单上，指向“新建”，再单击“项目”。?找到“Windows 应用程序(WPF)”模板并将项目命名为“AnimatedButton”。?这将创建应用程序的主干。 添加基本的默认按钮：本演练中所需的全部文件均由该模板提供。?通过在解决方案资源管理器中双击 Window1.xaml 文件来打开它。?默认情况下，Window1.xaml 中存在一个?Grid?元素。?移除?Grid?元素，并通过向 Window1.xaml 中键入或复制和粘贴以下突出显示的代码来向可扩展应用程序标记语言 (XAML) 页面中添加几个按钮： Window x:Class=AnimatedButton.Window1 xmlns=/winfx/2006/xaml/presentation xmlns:x=/winfx/2006/xaml Title=AnimatedButton Height=300 Width=300 Background=Black !-- Buttons arranged vertically inside a StackPanel. -- StackPanel HorizontalAlignment=Left ButtonButton 1/Button ButtonButton 2/Button ButtonButton 3/Button /StackPanel /Window 按 F5 运行该应用程序；您应当能够看到类似下图的一组按钮。 现在您已经创建了基本按钮，这样就完成了在 Window1.xaml 文件中的工作。?本演练其余部分重点介绍如何在 app.xaml 文件中为这些按钮定义样式和模板。 设置基本属性 接着，我们将会为这些按钮设置一些属性，以便控制按钮外观和布局。?您将使用资源来为整个应用程序定义按钮属性，而不是为这些按钮单独设置属性。?在概念上，应用程序资源与网页的外部级联样式表 (CSS) 相似；但是，资源远比级联样式表 (CSS) 强大，在本演练结束时您将明白这一点。?若要进一步了解资源，请参见资源概述。 使用样式为按钮设置基本属性 定义 Application.Resources 块：打开 app.xaml 并添加下面突出显示的标记（如果尚未添加）： Application x:Class=AnimatedButton.App xmlns=/winfx/2006/xaml/presentation xmlns:x=/winfx/2006/xaml StartupUri=Window1.xaml Application.Resources !-- Resources for the entire application can be defined here. -- /Application.Resources /Application 资源范围由资源的定义位置来确定。?如果资源是在 app.xaml 文件的?Application.Resoureses?中定义的，则将允许从应用程序中的任何位置使用资源。?若要了解有关定义资源范围的更多信息，请参见资源概述。 创建一个样式并用该样式定义基本属性值：向?Application.Resources?块添加下面的标记。?此标记创建一个应用于该应用程序中所有按钮的?Style，并将这些按钮的?Width?设置为 90，将?Margin?设置为 10： Application.Resources Style TargetType=Button Setter Property=Width Value=90 / Setter Property=Margin Value=10 / /Style /Application.Resources TargetType?属性指定将该样式应用于?Button?类型的所有对象。?每个?Setter?都为?Style?设置不同的属性值。?因此，此时应用程序中的每个按钮的宽度都为 90，边距都为 10。?如果您按 F5 运行应用程序，则会看到下面的窗口。 您还可以对样式进行更多的处理，这包括以各种方式微调对象的目标、指定复杂的属性值，甚至将样式作为其他样式的输入。?有关更多信息，请参见样式设置和模板化。 为资源设置样式属性值：使用资源，可以通过一种简单的方式来重用通常定义的对象和值。?为了使代码更加模块化，使用资源定义