本文介绍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样式。
以下所有的示例所有的数据都是如下
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>
效果如下
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>
效果如下
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>
效果如下
Template
该属性的类型为ControlTemplate
请参考WPF之自定义Control
ContentTemplate
该属性数据类型为DataTemplate,所有继承于ContentControl的控件都有该属性,请参考ItemTemplate章节。