Win10系列：UWP界面布局基础9

在XAML中，样式、模板、画笔和动画等都被看做是资源，它们最终的作用都是相同的，就是让设计人员可以使用这些资源创建更好的视觉效果，对其设计的产品外观进行标准化统一，那么如何使用这些资源并组织和重用呢，本节就来讲解样式、模板、画笔和动画的概念，以及它们的使用方法。

3.3.1 样式

在开发应用程序过程中，添加一个控件时可以通过设置控件的属性来控制它的显示外观。例如，对于TextBox文本框，可以通过设置字体属性得到不同的文本显示效果，这些属性包括FontFamily（字体类型）、FontSize（字体大小）、FontStyle（字形）和Foreground（字体颜色）等。尽管设计人员可以对应用程序的外观逐个进行大量的自定义操作，但他们还是需要一个功能强大的样式设置，以便在应用程序内部和应用程序之间共享和维护外观。

1.样式的定义及引用

在XAML中，任何派生自FrameworkElement或FrameworkContentElement的元素下都可以定义样式。通常情况是将样式作为资源定义在元素的Resources属性元素下，语法格式如下所示：

<object.Resources>

<Style TargetType="ControlTypeName" x:Key="StyleKey">

<Setter Property="AttributeName" Value="AttributeValue">

</Setter>

...

</Style>

</object.Resources>

在上述语法格式中：

• TargetType属性，用于指定要设置样式的控件类型，属性值是派生自FrameworkElement或FrameworkContentElement的类型，如果试图将样式应用到与TargetType属性值不匹配的控件，就会发生异常。

• x:Key属性，用来设置样式的键，以便通过这个键来引用该样式。
• Setter元素用来设置控件的属性，一个Style可以有多个Setter，每个Setter元素都需要一个Property字段和一个Value字段，这两个字段分别表示控件的属性和为该属性设置的值。其中，设置Value字段的方式可以参考3.2.3节中介绍的属性设置方法，这里就不具体介绍了。

例如，在Page.Resources属性元素下定义一个页面级别的按钮样式资源，样式资源的键为ButtonStyle，并在Setter元素中设置按钮的FontFamily属性、FontStyle属性和FontSize属性的值分别为楷体、Italic和10像素，对应的XAML代码片段如下所示：

<Page.Resources>

<Style TargetType="Button" x:Key="ButtonStyle">

<Setter Property="FontFamily" Value="楷体"/>

<Setter Property="FontStyle" Value="Italic"/>

<Setter Property="FontSize" Value="10"/>

</Style>

</Page.Resources>

在前面章节中提到，资源的定义位置不同，其有效使用范围也会不同，当把样式定义为资源时，它同样遵循这样的规则。在XAML应用程序中，样式作为资源时的作用范围包括如下情况：

• 如果在Application.Resource属性元素中定义样式，则该样式可在应用程序中的任何位置使用。
• 如果在Page.Resource属性元素中定义样式，则该样式只可在当前页面中使用。
• 如果在控件的Resource属性元素中定义，则只对该控件的子孙控件有效，如Canvas控件。
• 如果在Application.Resource属性元素和Page.Resource属性元素中同时定义了相同的样式，则在页面中定义的样式将覆盖Application.Resource属性元素中定义的样式。
• 在Application.Resource属性元素中定义的样式将覆盖在单独的资源字典文件中定义的相同样式。

除了引用已经定义好的样式资源外，还可以在添加控件时通过定义Style属性元素直接为其定义样式，这时的样式仅作用于该控件本身。例如在向一个页面中添加一个按钮时，在Button.Style属性元素中定义Style元素，并在Style元素中设置按钮的文本颜色为红色，相应的XAML代码片段如下所示：

<Button Content="按钮" Width="100" Height="40">

<Button.Style>

<Style TargetType="Button">

<Setter Property="Foreground" Value="Red"/>

</Style>

</Button.Style>

</Button>

样式被定义成资源后，像其他资源一样，可以根据样式资源的键使用StaticResource标记扩展来引用相应的样式，然后赋值给元素的Style属性，语法格式如下所示：

<object Style="{StaticResource StyleKey}" ...> ... </object>