WPF中模板（ControlTemplate and DataTemplate）

WPF中的模板是一个特别重要的概念，对于做UI开发的同学来说熟悉ControlTemplate（控件模板）和DataTemplate（数据模板）是必须掌握的技能，否则就只能做个拖控件的菜鸟。

下面就着重介绍下这两类模板的概念和使用。

1.ControlTemplate 就是我们常说的控件模板，主要用途是更改控件的外观，比如你要修改一个Button的形状是圆形的，改变背景颜色，定制动画效果等等。

下面举例说明它的应用，一个简单的例子就是我们想把TabControl的tab页放在下面，那么就可以这样修改TabControl的style

[csharp]
<Style TargetType="{x:Type TabControl}" x:Key="ButtomTab">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TabPanel Grid.Row="1" Panel.ZIndex="1" Margin="0" IsItemsHost="True" Background="Transparent" />
                        <Border Grid.Row="0" Background="White" BorderThickness="1 0 1 0" CornerRadius="0" >
                            <ContentPresenter ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

从代码中我们可以看到ControlTemplate 里面是一个Grid然后你可以布局它的TabPanel的位置，我们把TabPanel 的属性设置为Grid.Row="1" 这样就使得TabPanel 放在了内容
ContentPresenter 的下面这样我们就可以得到一个tab页在下面的tabcontrol控件。看吧，够简单easy吧。

具体怎么设置style，每个控件的controltemplate是什么样的可以看看这篇文章有了它wpf的style可以任你发挥了

当然在controltemplate里面还有个非常重要的概念就是trigger，在以后的博客里我会具体介绍tirgger的使用。

2.DataTemplate就是我们所说的数据模板，主要用于数据的呈现，比如你列表控件里面放哪些数据，怎么排版这些数据，是横着排还是竖着排。大部分在itemscontrol和treeview类得控件绑定数据所用，它不影响外观，只为呈现数据内容。

DataTemplate的使用比较简单示例如下

[csharp]
<ItemsControl x:Name="ic_PowerPort" AlternationCount="2">
                      <ItemsControl.ItemTemplate>
                          <DataTemplate>
                              <Border Margin="1" x:Name="back" Height="50">
                                  <ToggleButton HorizontalAlignment="Stretch" MouseDoubleClick="ToggleButton_Click">
                                      <DockPanel >
                                          <TextBlock Text="{Binding Name}" ToolTip="{Binding Name}" Margin="10 0 0 0" VerticalAlignment="Center" TextTrimming="WordEllipsis"/>
                                          <Image x:Name="_img" Width="18" Height="18" Margin="10 0" MouseLeftButtonDown="DelPowerPort_Click" HorizontalAlignment="Right" Source="/Vdc3D.Coms.DModelEditor;component/Images/del.png"/>
                                      </DockPanel>

                                  </ToggleButton>
                              </Border>
                      </ItemsControl.ItemTemplate>
                  </ItemsControl>
从上面的代码我们可以看出给定一个ItemsControl 的控件用于显示一个列表，里面绑定一个对象的Name属性，同是还有个Image 用于删除，由此可以知道DataTemplate的主要作用是在绑定数据的时候做数据呈现的。

在此特别说明下TreeView 的数据绑定需要一个HierarchicalDataTemplate 它是一个级联的绑定数据模板

[csharp]
<TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" >
&nbs

补充：软件开发 , C# ,