WPF中ControlTemplate,ItemsPanelTemplate ,DataTemplate
使用WPF的过程中，设计界面常会用到几种模板，如ControlTemplate, ItemsPanelTemplate 和 DataTemplate, 在这里对每一个介绍一番。
ControlTemplate
说明：用以控件控件的外观，如下代码就是用来设计一个自定义的按钮样式。
<Style TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border BorderThickness="1" BorderBrush="Red" CornerRadius="5"> 1<!--<ContentControl VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>--> 2<!--<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>--> 3<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
注意点：
示例代码中1，2，3片段用那一个都是可以的，相同的结果，其中2，3是等价的，使用ContentPresenter时会隐式的进行TemplateBinding，这的确是经常需要的。其中1最终也是使用了ContentPresenter用来呈现内容，所以不建议使用ContentControl，有点大才小用的赶脚。实际上也是如此，ContentControl中包含ContentPresenter.
ItemsPanelTemplate
说明：用以定义集合控件的容器外观，如ListBox,Combox 等等，这里使用一个自定义的listBox用以说明，其默认外观是上下排列，这里修改成横向排列。
示例代码：
<ListBox HorizontalAlignment="Left" Height="100" Margin="49,111,0,0" VerticalAlignment="Top" Width="100"> <system:String>abc</system:String> <system:String>def</system:String> <system:String>hij</system:String> </ListBox> <ListBox HorizontalAlignment="Left" Height="31" Margin="184,111,0,0" VerticalAlignment="Top" Width="100"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"></StackPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> <system:String>abc</system:String> <system:String>def</system:String> <system:String>hij</system:String> </ListBox>
DataTemplate
说明：以命名来看，是用来表现数据外观的，先上一个简单的示例：
public class Person { public string Name { get; set; } public string Des { get; set; } } <wpfApplication1:Person x:Key="p1" Name="P1" Des="Girl"/> <DataTemplate x:Key="dt1" DataType="wpfApplication1:Person"> <TextBlock> <Run Text="{Binding Name}"/> <Run Text=":"/> <Run Text="{Binding Des}"/> </TextBlock> </DataTemplate> <Button Content="{StaticResource p1}" HorizontalAlignment="Left" Margin="204,219,0,0" VerticalAlignment="Top" Width="193" Height="36"/> <Button Content="{StaticResource p1}" ContentTemplate="{StaticResource dt1}" HorizontalAlignment="Left" Margin="204,275,0,0" VerticalAlignment="Top" Width="193" Height="35"/>
运行结果：
解析：数据模板用来呈现数据，在这个例子中，直接将Button的内容指向一个Person类，若不指定其DataTemplate，则Button的内容只会简单的显示为绑定对象的ToString内容，指定了Person的显示方式，则会按照预期的想法进行呈现。
HierarchicalDataTemplate
该数据模板主要应用于比较复杂的树形结构中，HierarchicalDataTemplate从DataTemplate继承而来，其用法也相当的简单，这里给一个简单的示例即可。
代码：
<DockPanel.Resources>
<HierarchicalDataTemplate DataType = "{x :Type local :Person}"
ItemsSource = "{Binding Path=Persons}">
<TextBlock Text ="{Binding Path =Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType = "{x :Type local :Child}"
ItemsSource = "{Binding Path=Persons}">
<TextBlock Text ="{Binding Path =Des}"/>
</HierarchicalDataTemplate>
</DockPanel.Resources>
<TreeView x :Name="st">
</TreeView>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += MainWindow_Loaded;
}
private void MainWindow_Loaded( object sender, RoutedEventArgs e)
{
st.ItemsSource = new List< Person>(){ Person.GetRandomPerson(),Person .GetRandomPerson() };
}
}
public class Person
{
public string Name { get; set; }
public string Des { get; set; }
public List< Child> Persons { get; set; }
public static Person GetRandomPerson( int count=0)
{
var random = new Random( DateTime.Now.Millisecond);
var next = random.Next();
var person = new Person {Name = "name" + next, Des = "des" + next};
person.Persons = new List< Child>();
if (count++ < 5)
{
for ( int i = 0; i < next % 10; i++)
{
person.Persons.Add( Child.GetRandomPerson(count));
}
}
return person;
}
}
public class Child
{
public string Name { get; set; }
public string Des { get; set; }
public List< Child> Persons { get; set; }
public static Child GetRandomPerson( int count = 0)
{
var random = new Random( DateTime.Now.Millisecond);
var next = random.Next();
var person = new Child { Name = "name" + next, Des = "des" + next };
person.Persons = new List< Child>();
if (count++ < 2)
{
for ( int i = 0; i < next % 10; i++)
{
person.Persons.Add(GetRandomPerson(count));
}
}
return person;
}
}
运行结果：
StyleSelector and DataTemplateSelector
考虑到这样一种场景，集合控件需要根据不同的行去设置不同的行样式及内容呈现方式，这就用到了这两个Selector，需要继承这两个类，定义自己需要的效果。同样的，以代码作为示例，并演示相关结果
Code:
class MyStyleSelector : StyleSelector { public Style StyleContainsO { get; set; } public Style StyleOther { get; set; } public override Style SelectStyle( object item, DependencyObject container) { Style re; ItemsControl itmesControl = ItemsControl.ItemsControlFromItemContainer(container); var index = itmesControl.ItemContainerGenerator.IndexFromContainer(container); if (index%3==0) re = StyleContainsO; else { re = StyleOther; } return re; } } class MyDataTemplateSelector : DataTemplateSelector { public DataTemplate DataContainsO { get ; set ; } public DataTemplate DataOther { get ; set ; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { if (item.ToString().Contains( "O")) return DataContainsO; return DataOther; } } <Window.Resources > <!-- 数据 --> <x: Array xmlns: sys="clr-namespace:System;assembly=mscorlib" Type="sys:String" x:Key ="array"> <sys: String>Op</sys :String> <sys: String>Kip</sys :String> <sys: String>Opp</sys :String> <sys: String>Oms</sys :String> <sys: String>Kmp</sys :String> </x: Array> <!-- 自定义3种样式 --> <Style x :Key="st1" TargetType="ListBoxItem"> <Setter Property ="Background" Value="Gray" /> <Setter Property ="HorizontalContentAlignment" Value="Center" /> </Style> <Style x :Key="st2" TargetType="ListBoxItem"> <Setter Property ="Background" Value="DarkOliveGreen" /> <Setter Property ="HorizontalContentAlignment" Value="Center" /> </Style> <DataTemplate x :Key="d1"> <TextBlock Text ="{Binding Mode =OneWay}"></TextBlock> </DataTemplate> <DataTemplate x :Key="d2"> <TextBox Text ="{Binding Mode =OneWay}"></TextBox> </DataTemplate> <!-- XML命名空间loc是MyStyleSelector的CLR命名空间 --> <local: MyStyleSelector x:Key ="mySelector" StyleContainsO="{StaticResource st1}" StyleOther="{StaticResource st2}"/> <local: MyDataTemplateSelector x:Key ="myDataSelector" DataContainsO="{StaticResource d1}" DataOther="{StaticResource d2}"/> </Window.Resources > <ListBox ItemsSource="{StaticResource array}" ItemContainerStyleSelector="{ StaticResource mySelector}" ItemTemplateSelector="{ StaticResource myDataSelector}"> </ListBox >
运行结果：
最后，文章写的比较乱，也可以说不算是文章，代码比较多，如果对您有所帮助，那本人也很欣慰，新手上路，欢迎各位吐槽~~
