[翻译]Templates in WPF

(本文翻译自c-sharpcorner上的关于Template的文章，原文地址：http://www.c-sharpcorner.com/UploadFile/mahesh/templates-in-wpf/。)

WPF中有以下三种模板：

• Control Template
• Items Panel Template
• Data Template

Control Template

　　控件的ControlTemplate定义了控件的外观。我们可以通过简单的改变控件的ControlTemplate来改变或定义空间的新外观。当你写自己的控件时ControlTemplate更加有用。你可以定义控件的默认外观。例如，一个WPF Button控件拥有矩形布局，但通过ControlTemplates你可以构建一个拥有圆形布局的定制的Button并且当你鼠标覆盖或点击它时改变它的颜色。

　　XAML中的ControlTemplate元素在设计(design-time)时定义了一种ControlTemplate。模板通常使用FrameworkElement的Resources属性被定义为资源。下面的代码段提供了为Button元素定义ControlTemplate模板的语法。

1 <Grid>
2 <Grid.Resources>
3     <ControlTemplate x:Key="RoundButtonTemplate" />
4 </Grid.Resources>
5 </Grid>

　　现在，让我们想象我们需要创建图1中的圆形按钮，按钮的外圆与内圆有不同的颜色，当鼠标覆盖(mouse over)或者按下按钮时，按钮的背景颜色改变。

　　　　图1

以下代码段创建了一个ControlTemplate并添加了Grid作为ControlTemplate的内容(content)。现在，无论你将什么内容放到ControlTemplate里，你的控件都会成为那个样子。如你所见，下面的代码段中，我们添加两个半径和颜色不同的内涵Grid的椭圆。

1 <Grid.Resources>
2     <ControlTemplate x:Key="RoundButtonTemplate" >
3         <Grid>
4       <Ellipse Width="100" Height="100" Name="ButtonBorder"
5                   Fill="OrangeRed"  />
6             <Ellipse Width="80" Height="80" Fill="Orange"  />
7         </Grid>
8     </ControlTemplate>
9 </Grid.Resources>  

下面的代码段创建了一个Button元素并把它的模板设置为上述代码创建的ControlTemplate。

1 <Button Template="{StaticResource RoundButtonTemplate}" >OK</Button>  

最后输出生成了图1中的按钮。

TargetType Property

　　TargetType属性是用来限制ControlTemplate能够应用于其上的元素的类型。以下代码段确保RoundButtonTemplate只可以被应用在Button元素上。

1 <ControlTemplate x:Key="RoundButtonTemplate" TargetType="{x:Type Button}" >  

ControlTemplate Triggers

　　现在不如添加一些很酷的特征到这个控件上。让我们在鼠标覆盖(mouse over)或者按下的时候驱动Button。当鼠标覆盖Button时我们改变它的颜色，当按下时我们减小它的尺寸。

ControlTemplate的Trigger属性负责处理这些事件。以下代码段添加了Button的IsMouseOver和IsPressed事件的Trigger。在一个IsMouseOver事件中，我们改变Button内圆的颜色。在一个IsPressed事件中，我们改变内圆的宽度和高度，并改变外圆的颜色填充。

 1 <ControlTemplate.Triggers>
 2     <Trigger Property="Button.IsMouseOver" Value="True">
 3         <Setter TargetName="InnerCircle" Property="Fill" Value="LightGreen" />
 4     </Trigger>
 5     <Trigger Property="Button.IsPressed" Value="True">
 6         <Setter TargetName="InnerCircle" Property="Width" Value="60" />
 7         <Setter TargetName="InnerCircle" Property="Height" Value="60" />
 8         <Setter TargetName="OuterCircle" Property="Fill" Value="Gray" />
 9      </Trigger>
10 </ControlTemplate.Triggers> 

　　如下代码段所示，我改变了椭圆的Fill属性的一些代码，并使用gradient brushe填充他们。

 1 <Ellipse Width="100" Height="100" Name="OuterCircle" >
 2     <Ellipse.Fill>
 3         <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.5">
 4             <GradientStop Offset="0" Color="OrangeRed"  />
 5             <GradientStop Offset="1" Color="Orange" />
 6         </LinearGradientBrush>
 7     </Ellipse.Fill>
 8 </Ellipse>
 9 <Ellipse Width="80" Height="80" Name="InnerCircle">
10     <Ellipse.Fill>
11         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
12             <GradientStop Offset="0" Color="White" />
13             <GradientStop Offset="1" Color="OrangeRed" />
14         </LinearGradientBrush>
15     </Ellipse.Fill>
16 </Ellipse>  

新的按钮如图2所示，如果你将鼠标至于其上，你将看到内圆的背景颜色变为绿色，如图3所示。

　　　　图2

如果按下按钮，你将会看到外圆的背景颜色变为灰色，内圆的宽度和高度减小。

　　　　图3

初学WPF，英语水平有限，不足之处请批评指正。