WP8.1学习系列(第二十五章)——控件样式_移动开发_编程开发_程序员俱乐部

XAML 框架提供许多自定义应用外观的方法。通过样式可以设置控件属性，并重复使用这些设置，以便保持多个控件具有一致的外观。

路线图： 本主题与其他主题有何关联？请参阅：

• 使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图
• 使用 C++ 的 Windows 运行时应用的路线图
• 应用功能大全系列中突出显示的 Windows 应用商店应用 UI 详细信息

本主题包含下列部分：

• 先决条件
• 样式基础知识
• 应用隐式或显式样式
• 使用基于样式
• 使用工具轻松处理样式
• 修改 Windows 运行时默认样式
• Template 属性
• 相关主题

先决条件

我们假定你可以将控件添加到 UI，设置控件的属性以及连接事件处理程序。有关将控件添加到应用的说明，请参阅快速入门：添加控件和处理事件。

样式基础知识

使用样式可将属性设置提取到可重复使用的资源中。下面的示例显示了具有设置BorderBrush、BorderThickness 和 Foreground 属性样式的 3 个按钮。通过应用样式，你无须单独为每个控件设置这些属性，并且这些控件全部都有相同的外观。

你可以定义在 Extensible Application Markup Language (XAML) 中为控件定义嵌入样式，或者作为可重复使用的资源。在单个页面的 XAML 文件中、App.xaml 文件中，或者单独的资源词典 XAML 文件中定义资源。可以在应用之间共享资源词典 XAML 文件，并且可以将多个资源词典合并到单个应用中。定义资源的位置决定了该资源可以使用的范围。页面级资源只在定义了它们的页面中可用。如果在 App.xaml 和页面中同时定义了具有相同关键字的资源，则页面中的资源将覆盖 App.xaml 中的资源。如果资源在单独的资源词典文件中定义，则它的范围由引用资源词典的位置确定。

在 Style 定义中，你需要一个 TargetType 属性和由一个或多个 Setter 元素组成的集合。TargetType 属性是一个指定要应用样式的 FrameworkElement 类型的字符串。TargetType 值必须指定由 Windows 运行时定义的派生的 FrameworkElement 类型或引用的程序集中提供的自定义类型。如果你试图将某个样式应用到某控件，而此控件的类型与你试图应用的样式的 TargetType 属性不匹配，则会发生异常。

每个 Setter 元素都需要一个 Property 和一个 Value。这些属性设置用于指示该设置将应用于哪个控件属性，以及为该属性设置的值。你可以使用特性或属性元素语法设置 Setter.Value。下面的 XAML 显示了在之前的示例中使用的样式。在此 XAML 中，前两个 Setter 元素使用特性语法，但是最后一个 Setter（用于设置 BorderBrush属性）使用属性元素语法。该示例不使用 x:Key 属性，因此该样式已隐式应用到按钮。隐式或显式应用样式在下一节进行介绍。

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
</Page.Resources>

应用隐式或显式样式

如果你将样式定义为资源，则有两种方法可将其应用到控件：

• 隐式方法，通过仅指定 Style 的 TargetType。
• 显式方法，通过指定 Style 的 TargetType 和 x:Key 特性，然后通过使用显式关键字的 StaticResource 引用设置目标控件的 Style 属性。

如果样式包含 x:Key 属性，则只能通过将控件的 Style 属性设置为关键字定义的样式，从而将其应用到控件。相反，没有 x:Key 特性的样式会自动应用到其目标类型的每个控件，这些控件没有显示样式设置。

下面两个按钮演示了隐式和显示样式。

在本示例中，第一个样式具有 x:Key 属性，其目标类型为 Button。第一个按钮的 Style 属性设置为此关键字，所以显示应用该样式。第二个样式会隐式应用到第二个按钮，因为该按钮的目标类型为 Button，并且该样式没有 x:Key 属性。

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Foreground" Value="MediumOrchid" />
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
</Page.Resources>
<Grid x:Name="LayoutRoot">
    <Button Content="Button" Height="23" Width="75" Style="{StaticResource PurpleStyle}" />
    <Button Content="Button" Height="23" Width="75" />
</Grid>

使用基于样式

为了使样式便于维护以及优化样式的重复使用，你可以创建从其他样式继承的样式。使用 BasedOn 属性可创建继承的样式。从其他样式继承的样式必须应用到同一类型的控件，或者从基本样式的目标类型派生出来的控件。例如，如果基本样式的目标类型为 ContentControl，则基于此样式的样式可应用到 ContentControl 或从ContentControl 派生的类型（如 Button 和 ScrollViewer）。如果基于样式的值没有设置，则从基本样式继承。要从基本样式更改值，基于样式会覆盖该值。 下一个示例演示了具有从同一基本样式继承的样式的 Button和 CheckBox。

基本样式应用到 ContentControl，并设置 Height 和 Width 属性。基于此样式的样式应用到 CheckBox 和Button，这些类型从 ContentControl 派生而来。基于样式为 BorderBrush 和 Foreground 属性设置不同的颜色。

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="30" />
    </Style>
    <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
    <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<Grid Background="White">
    <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}"/>
</Grid>

使用工具轻松处理样式

将样式应用到控件的一种快捷方式是，在 Microsoft Visual Studio XAML 设计界面上，右键单击控件并选择“编辑样式”或“编辑模板”（取决于右键单击的控件）。然后，通过选择“应用资源”来应用现有样式，或通过选择“创建空项”来定义一个新样式。 如果创建空白样式，则可以使用相应的选项在该页面、App.xaml 文件或一个单独的资源字典中进行定义。

修改 Windows 运行时默认样式

在可以使用来自 Windows 运行时默认 XAML 资源的样式时，应使用这些样式。在必须定义自己的样式时，如果可能，请尝试以默认样式为基础（如前所述，使用基于样式，或先编辑最初默认样式的副本）。

Template 属性

样式 setter 可用于 Control 的 Template 属性，实际上，此样式构成了多数典型的 XAML 样式和应用的 XAML 资源。此内容将在快速入门：控件模板这一主题中更详细地讨论。