WPF教程（十一）模板入门一(转)

佚名 6年前 (2019-05-15) 随笔 1200人围观抢沙发百度已收录

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

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

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

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

（一）ControlTemplate

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

<Window.Resources>
<ControlTemplate TargetType= "{x:Type Button}" x:Key="ButtonControlTemplate">
<Grid>
<Ellipse Width= "100" Height="100" >
<Ellipse.Fill>
<LinearGradientBrush StartPoint= "0,0" EndPoint="0,1">
<GradientStop Offset= "0" Color="Cyan" />
<GradientStop Offset= "1" Color="LightCyan" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width= "80" Height="80">
<Ellipse.Fill>
<LinearGradientBrush StartPoint= "0,0" EndPoint="0,1">
<GradientStop Offset= "0" Color="Yellow" />
<GradientStop Offset= "1" Color="Transparent" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter Content= "{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content= "Hi,WPF" Template="{StaticResource ButtonControlTemplate}" Click="Button_Click"/>
</Grid>

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

<Style x:Key= "FocusVisual">
<Setter Property= "Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin= "2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key= "Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key= "Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key= "Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key= "Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key= "Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key= "Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key= "Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key= "Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key= "Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key= "ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property= "FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property= "Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property= "BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property= "Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property= "BorderThickness" Value="1"/>
<Setter Property= "HorizontalContentAlignment" Value="Center"/>
<Setter Property= "VerticalContentAlignment" Value="Center"/>
<Setter Property= "Padding" Value="1"/>
<Setter Property= "Template">
<Setter.Value>
<ControlTemplate TargetType= "{x:Type Button}">
<Border x:Name= "border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name= "contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property= "IsDefaulted" Value="true">
<Setter Property= "BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property= "IsMouseOver" Value="true">
<Setter Property= "Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property= "BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property= "IsPressed" Value="true">
<Setter Property= "Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property= "BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property= "IsEnabled" Value="false">
<Setter Property= "Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property= "BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property= "TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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

（二）DataTemplate

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

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

<Window.Resources>
<DataTemplate x:Key= "MyItem">
<StackPanel Orientation= "Horizontal">
<Grid>
<Rectangle Stroke= "Yellow" Fill="Orange" Width="{Binding Price}"></Rectangle>
<TextBlock Text= "{Binding Year}"></TextBlock>
</Grid>
<TextBlock Text= "{Binding Price}"></TextBlock>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name= "listBox1" ItemTemplate="{StaticResource MyItem}"/>
<ComboBox x:Name= "comboBox1" ItemTemplate="{StaticResource MyItem}"/>
</Grid>

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<Unit> units = new List<Unit>();
Unit unit1 = new Unit() { Year = "2001", Price = 100 };
Unit unit2 = new Unit() { Year = "2002", Price = 120 };
Unit unit3 = new Unit() { Year = "2003", Price = 140 };
Unit unit4 = new Unit() { Year = "2004", Price = 160 };
Unit unit5 = new Unit() { Year = "2005", Price = 180 };
units.Add(unit1);
units.Add(unit2);
units.Add(unit3);
units.Add(unit4);
units.Add(unit5);
listBox1.ItemsSource = units;
comboBox1.ItemsSource = units;
}
}
class Unit
{
public string Year { get; set; }
public int Price { get; set; }
}

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

//Attention
xmlns:local= "clr-namespace:DataTemplate"
xmlns:c= "clr-namespace:System.Collections;assembly=mscorlib"
<Window.Resources>
<DataTemplate DataType= "{x:Type local:MyUnit}">
<StackPanel Orientation= "Horizontal">
<Grid>
<Rectangle Stroke= "Yellow" Fill="Orange" Width="{Binding Price}"></Rectangle>
<TextBlock Text= "{Binding Year}"></TextBlock>
</Grid>
<TextBlock Text= "{Binding Price}"></TextBlock>
</StackPanel>
</DataTemplate>
<c:ArrayList x:Key= "ds">
<local:MyUnit Year = "2001" Price="100"/>
<local:MyUnit Year = "2002" Price="120"/>
<local:MyUnit Year = "2003" Price="140"/>
<local:MyUnit Year = "2004" Price="160"/>
<local:MyUnit Year = "2005" Price="180"/>
</c:ArrayList>
</Window.Resources>
<Grid>
<StackPanel>
<ListBox x:Name= "listBox1" ItemsSource="{StaticResource ds}"></ListBox>
<ComboBox x:Name= "comboBox1" ItemsSource="{StaticResource ds}"></ComboBox>
</StackPanel>
</Grid>

public class MyUnit
{
public string Year { get; set; }
public int Price { get; set; }
}

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

<Window.Resources>
<DataTemplate x:Key= "roundbutton">
<Border CornerRadius= "8" Width="120" Background="Yellow" Opacity="0.8">
<TextBlock Text= "{TemplateBinding Content}" HorizontalAlignment="Center"/>
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<StackPanel x:Name= "stackpanel">
<Button Width= "200" Height="150" Margin="20" ContentTemplate="{StaticResource roundbutton}" Content="OK"/>
</StackPanel>
</Grid>

（三）ItemsPanelTemplate

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

<Grid>
<ListBox HorizontalAlignment="Left" Height="70" Margin="47,0,0,0" VerticalAlignment="Top" Width="39">
<system:String>abc</system:String>
<system:String>def</system:String>
<system:String>hij</system:String>
</ListBox>
<ListBox HorizontalAlignment="Left" Height="40" Margin="47,100,0,0" VerticalAlignment="Top" Width="100">
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Style>
<system:String>abc</system:String>
<system:String>def</system:String>
<system:String>hij</system:String>
</ListBox>
</Grid>

总结

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