DataTemplate总结2（学习）

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

DataTemplate的使用比较简单 示例如下（注意DT内部元素多是binding到后台代码的数据）

    //比较下面的例子，这里ItemsControl省略掉了ItemSource属性的设置，ItemSource用来连接后台数据
<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="/Wilma.MainWindowViewModel;component/Images/del.png"/>  
                                           </DockPanel>  
                                       </ToggleButton>  
                                   </Border>  
                               </DataTemplate>
                           </ItemsControl.ItemTemplate>
     </ItemsControl>

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

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

    <TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" >  
                    <TreeView.ItemTemplate>  
                        <HierarchicalDataTemplate ItemsSource="{Binding Children}">  
                            <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70"  
                                    Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove">  
                                <StackPanel Orientation="Horizontal" Margin="2">  
                                    <Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" />  
                                    <TextBlock Text="{Binding ShowText}" Margin="2 0"/>  
                                </StackPanel>  
                            </Border>  
                        </HierarchicalDataTemplate>  
                    </TreeView.ItemTemplate>  
   </TreeView>  

这样我们就可以给一个treeview绑定数据了UI会级联的绑定数据对象的Children属性