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 >

运行结果：





　　
　　最后，文章写的比较乱，也可以说不算是文章，代码比较多，如果对您有所帮助，那本人也很欣慰，新手上路，欢迎各位吐槽~~