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 它是一个级联的绑定数据模板

 1     <TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" >  

 2                     <TreeView.ItemTemplate>  

 3                         <HierarchicalDataTemplate ItemsSource="{Binding Children}">  

 4                             <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70"  

 5                                     Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove">  

 6                                 <StackPanel Orientation="Horizontal" Margin="2">  

 7                                     <Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" />  

 8                                     <TextBlock Text="{Binding ShowText}" Margin="2 0"/>  

 9                                 </StackPanel>  

10                             </Border>  

11                         </HierarchicalDataTemplate>  

12                     </TreeView.ItemTemplate>  

13    </TreeView>  

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