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

川长思鸟来 2022-05-12 02:48 244阅读 0赞

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

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

**（一）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就具有这样的解剖功能，让我们来看看模板源码：

可以看出，其模板是由一个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类型的例子，请注意比较。

总结

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

[GroupStyle]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.groupstyle.aspx
[Panel]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.groupstyle.panel.aspx
[ItemsControl]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.itemscontrol.aspx
[ItemsPanel]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.itemscontrol.itemspanel.aspx