WPF之各种Template

本文介绍WPF重写控件风格的时所用到的各种Template，包括以下
1.ItemsPanel
2.ItemTemplate
3.ItemContainerStyle
4.Template
5.ContentTemplate

对于ItemsPanel、ItemTemplate、ItemContainerStyle是用来设置子项风格，所有继承于是ItemsControl的控件都支持这三个属性。包括ComboBox、ListBox、
对于Template 所有继承于是Control的控件都有该属性，Template类型为ControlTemplate，并且支持通过重写
ControlTemplate来指定控件外观。
以下的示例皆以ComboBox来修改，其它ListBox之类的一样修改,先上一张默认下的ComboBox样式。

默认ComboBox.png

以下所有的示例所有的数据都是如下

public class Person
    {
        public int Age { get; set; }
        public string Name { get; set; }
        public string Sex { get; set; }
        public override string ToString()
        {
            return Name;
        }
    }

并且初始化一个列表PersonList

PersonList = new List<Person>()
            {
                new Person(){Age=20,Name="AAAA",Sex="女"},
                new Person(){Age=19,Name="BBB",Sex="女"},
                new Person(){Age=22,Name="CCC",Sex="男"},
            };

ItemsPanel

该属性类型为ItemsPanelTemplate
这个是用来重写子控件的布局样式，比如ComboBox的默认布局为StackPanel 的Vertical
我们重写ItemsPanel，把ComboBox子项横向排列，如下

<Window.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
        </ItemsPanelTemplate>
</Window.Resources>
<GroupBox Header="自定义ItemsPanel" Margin="10" Width="200">
                <ComboBox 
                    ItemsSource="{Binding PersonList,RelativeSource={RelativeSource AncestorType=Window}}" 
                    ItemsPanel="{DynamicResource ItemsPanelTemplate1}"/>
            </GroupBox>

效果如下

自定义ItemsPanel效果.png

ItemContainerStyle

该属性类型为Style
这是重写Item项风格Style，对于ComboBox则为重写ComboBoxItem的风格，示例

<Window.Resources>
<Style x:Key="ComboBoxItemStyle1" TargetType="{x:Type ComboBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Padding" Value="4,1"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <TextBlock Grid.Column="1" Text="{Binding Sex}" HorizontalAlignment="Right"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</Window.Resources>

效果如下

自定义ItemContainerStyle效果.png

ItemTemplate

该属性类型为DataTemplate，这是修改子项呈现数据格式，示例如下

<Window.Resources>
<DataTemplate x:Key="DataTemplate1">
            <Grid Background="AliceBlue" SnapsToDevicePixels="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Margin="10,0" Text="{Binding Name}"/>
                <TextBlock Grid.Column="1" Margin="10,0" Text="{Binding Age}"/>
                <TextBlock Grid.Column="2" Margin="10,0" Text="{Binding Sex}"/>
            </Grid>
        </DataTemplate>
</Window.Resources>

<GroupBox Header="自定义ItemTemplate" Margin="10" Width="200">
                <ComboBox 
                    ItemsSource="{Binding PersonList,RelativeSource={RelativeSource AncestorType=Window}}"
                    ItemTemplate="{DynamicResource DataTemplate1}" />
            </GroupBox>

效果如下

自定义ItemTemplate效果.png

Template

该属性的类型为ControlTemplate
请参考WPF之自定义Control

ContentTemplate

该属性数据类型为DataTemplate，所有继承于ContentControl的控件都有该属性，请参考ItemTemplate章节。

本文参考Demo-LessonTemplate