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

样式继承

为了使样式便于维护及重复使用，可以在一个样式上引用其他的样式，这就是样式继承。样式继承的方法是：在Style元素的BasedOn属性上使用StaticResource标记扩展来引用被继承的样式。

由继承的概念可知，继承样式会自动继承被继承样式中的属性设置。如果更改继承样式中某个属性的值，而这个属性也在被继承样式中设置，那么继承样式中的值会覆盖被继承样式中的值。

例如，定义一个页面级别的ContentControl控件样式资源，样式资源的键为BasicStyle，并在Setter元素中设置控件的文本颜色为黄色。接着，针对该控件类型再定义一个样式资源，资源的键为InheritStyle，在该样式中设置控件的高度为30像素，边框的粗细为2像素，并且在Style元素的BasedOn属性上使用StaticResource标记扩展引用样式BasicStyle，相应的XAML代码片段如下所示：

<Page.Resources>

<Style x:Key="BasicStyle" TargetType="ContentControl">

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

</Style>

<Style x:Key="InheritStyle" TargetType="ContentControl" BasedOn="{StaticResource BasicStyle}">

<Setter Property="Height" Value="30"/>

<Setter Property="BorderThickness" Value="2"/>

</Style>

</Page.Resources>

在上面的代码中，InheritStyle样式是继承样式，BasicStyle样式是被继承样式，在文本颜色上InheritStyle样式会产生和BasicStyle样式一样的效果。

需要注意的是，继承样式应该应用到和被继承样式的目标类型相同的控件中，或者从被继承样式的目标类型派生出来的控件中。例如，被继承样式的目标类型为ContentControl，那么继承样式可应用于ContentControl控件或从ContentControl类型派生的控件（如Button控件）。

3.3.2 模板

由上一节可以看出，样式只是更改控件本身的一些简单属性，只能在有限的范围内更改控件的外观，如果想实现更丰富的外观效果，仅通过样式设置是无法满足的。在实际应用程序开发中，通常是通过创建模板来控制控件的复杂外观，同时增强代码的维护性和可重用性。下面来介绍XAML中两种常用的模板：DataTemplate和ControlTemplate。

1. DataTemplate

在将ItemsControl类型的控件（如ListBox）绑定到数据集合时，或者在多个ContentControl控件之间共享UIElement对象时，经常会用DataTemplate（数据模板）来定义数据在界面中的表现方式。

DataTemplate元素的定义格式如下所示：

<DataTemplate ...>

    templateContent

</DataTemplate>

其中，在省略部分可以设置DataTemplate元素的属性，templateContent表示定义的DataTemplate对象树，该树只能有一个根对象，而该根对象可以有零个或更多的子对象。

例如，有一个customer对象集合，每个customer对象包含属性customerName、customerSex和customerAge。在向一个页面中添加一个ListBox列表框时，要把它绑定到这个对象集合，使列表框的每个列表项对应一个customer对象，方法是把列表框的ItemTemplate属性设置为数据模板，并在这个数据模板中把TextBlock文本块的Text属性绑定到customer对象的属性上。对应的XAML代码片段如下所示：

<ListBox Width="100" Margin="10" ItemsSource="{Binding}">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Text="{Binding Path=customerName}"/>

<TextBlock Text="{Binding Path=customerSex}"/>

<TextBlock Text="{Binding Path=customerAge}"/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

在上面代码中，列表框的每个列表项是一个数据模板，在结构上由一个堆栈面板构成，在StackPanel面板上放置三个紧挨着的TextBlock控件，并且将它们的Text属性分别绑定到customer对象的customerName、customerSex和customerAge属性上，以存放每个客户的信息。

这样，在创建列表框时，每个列表项对应一个客户，列表项的内容就是客户的信息，包括姓名、性别和年龄。也就是说，第一个列表项的内容为第一个客户的信息，第二个列表项的内容为第二个客户的信息，依此类推。

在此示例中，DataTemplate数据模板直接定义在了ListBox控件内部，因此它只能作用于该控件。为了实现多个控件共享数据模板，可以将数据模板定义为资源，然后通过控件的ItemTemplate属性或ContentTemplate属性（针对ContentControl类型的控件）来引用该资源。例如，要让页面上的多个按钮具有相同的图形，那么可以定义一个包含此图形的DataTemplate资源，然后将对该资源的引用赋值给这些按钮的ContentTemplate属性。

2. ControlTemplate

前面提到过，可以通过属性设置来控制控件的表现形式，但由于XAML中的控件所提供的属性并不能覆盖控件外观的方方面面，因此在使用XAML对应用程序界面进行设计的时候，设计人员常常需要自定义控件的外观，常用方法就是定义控件模板。控件模板对应.Net中的ControlTemplate类，是FrameworkTemplate类的直接派生类。

在XAML语法中，ControlTemplate元素的定义格式如下所示：

<ControlTemplate ...>

<VisualTreeRootNode>

VisualTreeNodeContents

</VisualTreeRootNode>

</ControlTemplate>

其中，VisualTreeRootNode是ControlTemplate对象树的根对象；VisualTreeNodeContents表示VisualTreeRootNode元素对象的内容，它可以是文本，也可以是嵌套定义的子孙对象。在省略部分可以设置ControlTemplate元素的属性。

在实际开发中，可以把ControlTemplate直接定义在控件内部，也可以定义成资源，然后通过控件的Template属性来引用该模板资源。像其他属性一样，可以通过下列方法设置控件的Template属性：

• 使用属性元素语法来设置Template属性，并内联定义ControlTemplate。
• 将ControlTemplate定义为资源，然后把对该资源的引用赋值给控件的Template属性。
• 使用Style样式设置Template属性和定义ControlTemplate。

为了更好地理解，下面分别给出每类方法的一个示例。

示例1：以按钮控件为例演示如何使用属性元素语法设置Template属性，并且内联定义ControlTemplate。相应的代码片段如下所示：

<Button Content="内联定义控件模板">

<Button.Template>

<ControlTemplate TargetType="Button">

<!--在此处定义按钮控件模板的内容-->

</ControlTemplate>

</Button.Template>

</Button>

在这个示例中，通过定义Button.Template属性元素并在内部定义ControlTemplate模板来控制按钮的显示外观。

示例2：以文本框控件为例演示如何将ControlTemplate定义为资源，以及把对该资源的引用赋值给控件的Template属性。相应的代码片段如下所示：

<Page>

<Page.Resources>

<ControlTemplate TargetType="TextBox" x:Key="TextBoxTemplate">

<!--在此处定义文本框控件模板的内容-->

</ControlTemplate>

</Page.Resources>

<TextBox Name="TextBoxSample" Text="引用模板资源！" Template="{StaticResource TextBoxTemplate}"/>

</Page>

这段代码表示首先在页面中定义一个ControlTemplate模板资源，目标类型为TextBox，并设置资源的键为TextBoxTemplate，然后向页面中添加一个名称为"TextBoxSample"的文本框，并且使用StaticResource标记扩展引用TextBoxTemplate资源赋值给文本框的Template属性。

示例3：以复选框控件为例演示如何用Style样式设置控件的Template属性和定义ControlTemplate。相应的代码片段如下所示：

<StackPanel>

<StackPanel.Resources>

<Style TargetType="CheckBox" x:Key="CheckBoxStyle">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="CheckBox">

<!--在此处定义复选框控件模板的内容-->

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</StackPanel.Resources>

<CheckBox Content="引用样式资源" Style="{StaticResource CheckBoxStyle}"/>

</StackPanel>

此段代码表示在StackPanel面板中首先定义一个键为"CheckBoxStyle"的复选框样式资源，在样式中设置Template属性的值为ControlTemplate。然后添加一个CheckBox复选框，并通过StaticResource标记扩展引用样式CheckBoxStyle赋值给CheckBox控件的Style属性。这样，复选框的外观就会按照控件模板的设计来显示。