星空雅梦

WPF教程（十一）模板入门一

2018年09月21日 17:30:57 yangwenxue1989 阅读数：401

 

在前面一篇我们粗略说了Style，如果要自定义一个个性十足的控件，仅仅依靠样式和行为是不行的，他们只能通过控件的既有属性来简单改变外观，还需要有ControlTemplate来彻底定制，这是改变Control的呈现，也可以通过DataTemplate来改变Data的呈现，对于ItemsControl，还可以通过ItemsPanelTemplate来改变Items容器的呈现。

从上段文字可以总结出，模板大概分为3种：(1)ControlTemplate；(2)DataTemplate；(3)ItemsControl，第一种我们经常能用到，比较常见，现在我们来一一介绍：

（一）ControlTemplate

控件模板可以将自定义模板应用到某一特定类型的所有控件，主要有两个重要属性：VisualTree内容属性和Triggers触发器。所谓VisualTree(视觉树),就是呈现我们所画的控件。Triggers可以对我们的视觉树上的元素进行一些变化，一般用于单内容控件。

1.  
   <Window.Resources>
2.  
   <ControlTemplate TargetType="{x:Type Button}" x:Key="ButtonControlTemplate">
3.  
   <Grid>
4.  
   <Ellipse Width="100" Height="100" >
5.  
   <Ellipse.Fill>
6.  
   <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
7.  
   <GradientStop Offset="0" Color="Cyan" />
8.  
   <GradientStop Offset="1" Color="LightCyan" />
9.  
   </LinearGradientBrush>
10.  
    </Ellipse.Fill>
11.  
    </Ellipse>
12.  
    <Ellipse Width="80" Height="80">
13.  
    <Ellipse.Fill>
14.  
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
15.  
    <GradientStop Offset="0" Color="Yellow" />
16.  
    <GradientStop Offset="1" Color="Transparent" />
17.  
    </LinearGradientBrush>
18.  
    </Ellipse.Fill>
19.  
    </Ellipse>
20.  
    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
21.  
    </Grid>
22.  
    </ControlTemplate>
23.  
    </Window.Resources>
24.  
    <Grid>
25.  
    <Button Content="Hi,WPF" Template="{StaticResource ButtonControlTemplate}" Click="Button_Click"/>
26.  
    </Grid>

上面代码自定义了一个Button控件模板，为什么能替代默认模板？我们就要"解剖"Button来了解其内部结构，VS2013自带的Expression Blend 5就具有这样的解剖功能，让我们来看看模板源码：

1.  
   <Style x:Key="FocusVisual">
2.  
   <Setter Property="Control.Template">
3.  
   <Setter.Value>
4.  
   <ControlTemplate>
5.  
   <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
6.  
   </ControlTemplate>
7.  
   </Setter.Value>
8.  
   </Setter>
9.  
   </Style>
10.  
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
11.  
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
12.  
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
13.  
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
14.  
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
15.  
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
16.  
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
17.  
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
18.  
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
19.  
    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
20.  
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
21.  
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
22.  
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
23.  
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
24.  
    <Setter Property="BorderThickness" Value="1"/>
25.  
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
26.  
    <Setter Property="VerticalContentAlignment" Value="Center"/>
27.  
    <Setter Property="Padding" Value="1"/>
28.  
    <Setter Property="Template">
29.  
    <Setter.Value>
30.  
    <ControlTemplate TargetType="{x:Type Button}">
31.  
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
32.  
    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
33.  
    </Border>
34.  
    <ControlTemplate.Triggers>
35.  
    <Trigger Property="IsDefaulted" Value="true">
36.  
    <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
37.  
    </Trigger>
38.  
    <Trigger Property="IsMouseOver" Value="true">
39.  
    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
40.  
    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
41.  
    </Trigger>
42.  
    <Trigger Property="IsPressed" Value="true">
43.  
    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
44.  
    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
45.  
    </Trigger>
46.  
    <Trigger Property="IsEnabled" Value="false">
47.  
    <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
48.  
    <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
49.  
    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
50.  
    </Trigger>
51.  
    </ControlTemplate.Triggers>
52.  
    </ControlTemplate>
53.  
    </Setter.Value>
54.  
    </Setter>
55.  
    </Style>

可以看出，其模板是由一个Border里面放了一个ContentPresenter构成的，然后是触发器定义的默认行为，相对比较简单，现在已经被我们新定义的替代了，因为新模板里没写Trigger，所以没有像默认的那种触发效果。这个Button内部比较简单，就一个ControlTemplate，像ScrollBar等控件，内部是相当复杂的。

（二）DataTemplate

数据模板，在WPF中，决定数据外观的是DataTemplate，即DataTemplate是数据内容的表现形式，一条数据显示成什么样子，是简单的文本还是直观的图形，就是由DataTemplate决定的。

内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。下面通过设计继承ItemsControl类控件ListBox及ComboBox控件的DataTemplate，把单调的数据显示成直观的柱状图。

1.  
   <Window.Resources>
2.  
   <DataTemplate x:Key="MyItem">
3.  
   <StackPanel Orientation="Horizontal">
4.  
   <Grid>
5.  
   <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding Price}"></Rectangle>
6.  
   <TextBlock Text="{Binding Year}"></TextBlock>
7.  
   </Grid>
8.  
   <TextBlock Text="{Binding Price}"></TextBlock>
9.  
   </StackPanel>
10.  
    </DataTemplate>
11.  
    </Window.Resources>
12.  
    <Grid>
13.  
    <ListBox x:Name="listBox1" ItemTemplate="{StaticResource MyItem}"/>
14.  
    <ComboBox x:Name="comboBox1" ItemTemplate="{StaticResource MyItem}"/>
15.  
    </Grid>

1.  
   public partial class MainWindow : Window
2.  
   {
3.  
   public MainWindow()
4.  
   {
5.  
   InitializeComponent();
6.  
   List<Unit> units = new List<Unit>();
7.  
   Unit unit1 = new Unit() { Year = "2001", Price = 100 };
8.  
   Unit unit2 = new Unit() { Year = "2002", Price = 120 };
9.  
   Unit unit3 = new Unit() { Year = "2003", Price = 140 };
10.  
    Unit unit4 = new Unit() { Year = "2004", Price = 160 };
11.  
    Unit unit5 = new Unit() { Year = "2005", Price = 180 };
12.  
    units.Add(unit1);
13.  
    units.Add(unit2);
14.  
    units.Add(unit3);
15.  
    units.Add(unit4);
16.  
    units.Add(unit5);
17.  
    listBox1.ItemsSource = units;
18.  
    comboBox1.ItemsSource = units;
19.  
    }
20.  
    }
21.  
    class Unit
22.  
    {
23.  
    public string Year { get; set; }
24.  
    public int Price { get; set; }
25.  
    }

也可以把某个类型作用在DataTemplate上，方法是设置DataTemplate的DataType属性。上面的例子也可以通过这种方式实现：

1.  
   //Attention
2.  
   xmlns:local="clr-namespace:DataTemplate"
3.  
   xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
4.  
   <Window.Resources>
5.  
   <DataTemplate DataType="{x:Type local:MyUnit}">
6.  
   <StackPanel Orientation="Horizontal">
7.  
   <Grid>
8.  
   <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding Price}"></Rectangle>
9.  
   <TextBlock Text="{Binding Year}"></TextBlock>
10.  
    </Grid>
11.  
    <TextBlock Text="{Binding Price}"></TextBlock>
12.  
    </StackPanel>
13.  
    </DataTemplate>
14.  
    <c:ArrayList x:Key="ds">
15.  
    <local:MyUnit Year = "2001" Price="100"/>
16.  
    <local:MyUnit Year = "2002" Price="120"/>
17.  
    <local:MyUnit Year = "2003" Price="140"/>
18.  
    <local:MyUnit Year = "2004" Price="160"/>
19.  
    <local:MyUnit Year = "2005" Price="180"/>
20.  
    </c:ArrayList>
21.  
    </Window.Resources>
22.  
    <Grid>
23.  
    <StackPanel>
24.  
    <ListBox x:Name="listBox1" ItemsSource="{StaticResource ds}"></ListBox>
25.  
    <ComboBox x:Name="comboBox1" ItemsSource="{StaticResource ds}"></ComboBox>
26.  
    </StackPanel>
27.  
    </Grid>

1.  
   public class MyUnit
2.  
   {
3.  
   public string Year { get; set; }
4.  
   public int Price { get; set; }
5.  
   }

上面例子示范的是然继承自ItemsControl类的控件的DataTemplate，下面就写个ContentTemplate支持的数据模板：

1.  
   <Window.Resources>
2.  
   <DataTemplate x:Key="roundbutton">
3.  
   <Border CornerRadius="8" Width="120" Background="Yellow" Opacity="0.8">
4.  
   <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center"/>
5.  
   </Border>
6.  
   </DataTemplate>
7.  
   </Window.Resources>
8.  
   <Grid>
9.  
   <StackPanel x:Name="stackpanel">
10.  
    <Button Width="200" Height="150" Margin="20" ContentTemplate="{StaticResource roundbutton}" Content="OK"/>
11.  
    </StackPanel>
12.  
    </Grid>

（三）ItemsPanelTemplate

ItemsPanelTemplate在MSDN的解释是：ItemsPanelTemplate 指定用于项的布局的面板。 GroupStyle 具有一个类型为 ItemsPanelTemplate 的 Panel属性。 ItemsControl 类型具有一个类型为ItemsPanelTemplate 的 ItemsPanel 属性。ItemsPanelTemplate用于指定项的布局。下面，我们先看个ItemsControl类型的例子，请注意比较。

1.  
   <Grid>
2.  
   <ListBox HorizontalAlignment="Left" Height="70" Margin="47,0,0,0" VerticalAlignment="Top" Width="39">
3.  
   <system:String>abc</system:String>
4.  
   <system:String>def</system:String>
5.  
   <system:String>hij</system:String>
6.  
   </ListBox>
7.  
   <ListBox HorizontalAlignment="Left" Height="40" Margin="47,100,0,0" VerticalAlignment="Top" Width="100">
8.  
   <ListBox.Style>
9.  
   <Style TargetType="ListBox">
10.  
    <Setter Property="ItemsPanel">
11.  
    <Setter.Value>
12.  
    <ItemsPanelTemplate>
13.  
    <StackPanel Orientation="Horizontal"></StackPanel>
14.  
    </ItemsPanelTemplate>
15.  
    </Setter.Value>
16.  
    </Setter>
17.  
    </Style>
18.  
    </ListBox.Style>
19.  
    <system:String>abc</system:String>
20.  
    <system:String>def</system:String>
21.  
    <system:String>hij</system:String>
22.  
    </ListBox>
23.  
    </Grid>

总结

模板分为三大类：DataTemplate 数据外衣、ControlTemplate 控件外衣及ItemsPanelTemplate 项布局，这极大丰富了我们对各种样式的需求。上文粗略地按我的方式分3种，当然仁者见仁，很多博客也有不同的划分方法。考虑到篇幅，后续几章节，我会再细细介绍模板所需用到的其它知识点。