碼上歡樂
相關內容    簡體    繁體

WPF Template模版之DataTemplate與ControlTemplate的關系和應用【二】

本文轉載自   查看原文   2016-09-25 19:51   8421    WPF

1. DataTemplate和ControlTemplate的關系

    學習過DataTemplate和ControlTemplate，你應該已經體會到，控件只是數據的行為和載體，是個抽象的概念，至於它本身長成什么樣子（控件內部結構），它的數據會長成什么樣子（數據顯示結構）都是靠Template生成的。決定控件外觀的是ControlTemplate，決定數據外觀的是DataTemplate，它們正是Control類的Template和ContentTemplate兩個屬性值

    凡是Template，最終都要作用在控件上，這個控件就是Template的目標控件，也叫模板化控件。你可能會問:DataTemplate的目標應該是數據呀，怎么會是控件呢。DataTemplate給人的感覺的確是施加在數據對象上，但施加在數據對象上生成的一組控件總得有個載體吧？這個載體一般落實在一個叫做ContentPresenter對象上。ContentPresenter類只有ContentTemplate屬性、沒有Template屬性，這就證明了承載由DataTemplate生成的一組控件是他的專門用途。

    至此我們可以看出，由ControlTemplate生成的控件樹其樹根就是ControlTemplate的目標控件，此模板化控件的Template屬性值就是一個ControlTemplate實例。與之相仿，由DataTemplate生成的控件其樹根是一個ContentPresenter控件，此模板化控件的ContentTemplate屬性值就是這個DataTemplate實例。因為ContentPresenter控件是ControlTemplate控件樹上的一個節點，所以DataTemplate控件樹是ControlTemplate里面的一個子樹。

    顯然，如果把數據對象賦值給ContentPresenter的DataContext屬性，由DataTemplate生成的控件自然會找到這個數據對象並把它當作自己的數據源。

2. 應用


2.1 應用1

    

    為Template設置其應用目標有兩種方法，一個是逐個設置控件的Template/ContentTemplate/ItemTemlate/CellTemplate等屬性，不想應用Template的控件不設置；另一種是整體應用，即把Template應用到某個類型的控件或者數據上。
把ControlTemplate應用到所有控件上需要借助Style來實現，但Style不能標記X:KEY，例如下面的代碼：

 

[html]  view plain  copy
 
 print?
  1. <Window x:Class="WpfApplication11.wnd11421"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="wnd11421" Height="200" Width="300">  
  5.     <Window.Resources>  
  6.         <!--ControlTemplate作用在所有目標控件上，Style不能標記x:key-->  
  7.         <Style TargetType="{x:Type TextBox}">  
  8.             <Setter Property="Template">  
  9.                 <Setter.Value>  
  10.                     <!--使用TemplateBinding，與模版目標一致-->  
  11.                     <ControlTemplate TargetType="{x:Type TextBox}">  
  12.                         <Border SnapsToDevicePixels="True"  
  13.                                 Background="{TemplateBinding Background}"  
  14.                                 BorderBrush="{TemplateBinding BorderBrush}"  
  15.                                 BorderThickness="{TemplateBinding BorderThickness}"  
  16.                                 CornerRadius="5">  
  17.                             <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ScrollViewer>  
  18.                         </Border>  
  19.                     </ControlTemplate>  
  20.                 </Setter.Value>  
  21.             </Setter>  
  22.             <Setter Property="Margin" Value="5"></Setter>  
  23.             <Setter Property="BorderBrush" Value="Black"></Setter>  
  24.             <Setter Property="Height" Value="28"></Setter>  
  25.         </Style>  
  26.     </Window.Resources>  
  27.     <StackPanel>  
  28.         <TextBox></TextBox>  
  29.         <TextBox></TextBox>  
  30.         <TextBox Style="{x:Null}"></TextBox>  
  31.     </StackPanel>  
  32. </Window>  
    Style沒有X：key標記，默認為引用到所有的x:type指定的控件上，如果不想應用則將style標記為{x:null}。運行效果如下圖：

 

 

2.2 應用2

 

    把DataTemplate應用到某個數據類型上是設置DataTemplate的DataType屬性，並且DataTemplate作為資源時也不能帶x:key標記， 例如下面的代碼：

 

[html]  view plain  copy
 
 print?
  1. <Window x:Class="WpfApplication11.wnd11422"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:local="clr-namespace:WpfApplication11"  
  5.         Title="wnd11422" Height="200" Width="300">  
  6.     <Window.Resources>  
  7.         <!--DataTemplate作用在某個數據類型上，使用DataType，不能設置x:key-->  
  8.         <DataTemplate DataType="{x:Type local:Unit}">  
  9.             <Grid>  
  10.                 <StackPanel Orientation="Horizontal">  
  11.                     <Grid>  
  12.                         <Rectangle Fill="Red" Width="{Binding Price}" Stroke="Yellow"></Rectangle>  
  13.                         <TextBlock Text="{Binding Year}"/>  
  14.                     </Grid>  
  15.                     <TextBlock Text="{Binding Price}"></TextBlock>  
  16.                 </StackPanel>  
  17.             </Grid>  
  18.         </DataTemplate>  
  19.     </Window.Resources>  
  20.     <StackPanel>  
  21.         <ListBox x:Name="_listBox"></ListBox>  
  22.         <ComboBox x:Name="_comBox"></ComboBox>  
  23.     </StackPanel>  
  24. </Window>  

 

代碼中的DataTemplate的目標數據類型和ListBox的條目類型都是Unit:

 

[csharp]  view plain  copy
 
 print?
  1. /// <summary>  
  2. /// DataType  
  3. /// </summary>  
  4. public class Unit  
  5. {  
  6.     public int Price { get; set; }  
  7.     public string Year { get; set; }  
  8. }  
指定數據源：

 

 

[csharp]  view plain  copy
 
 print?
  1. public partial class wnd11422 : Window  
  2. {  
  3.     public wnd11422()  
  4.     {  
  5.         InitializeComponent();  
  6.   
  7.         List<Unit> _listUnit = new List<Unit>()  
  8.         {  
  9.             new Unit(){Price=100, Year="2001" },  
  10.             new Unit(){Price=120, Year="2002" },  
  11.             new Unit(){Price=140, Year="2003" },  
  12.             new Unit(){Price=180, Year="2004" },  
  13.             new Unit(){Price=150, Year="2005" },  
  14.             new Unit(){Price=200, Year="2006" },  
  15.         };  
  16.   
  17.         _listBox.ItemsSource = _listUnit;  
  18.         _comBox.ItemsSource = _listUnit;  
  19.     }  
  20. }  
此時DataTemplate會自動加載到所有的Unit類型對象上，盡管我沒有為ListBox和CompBox指定ItemTemplate，一樣會得到下圖的效果：

 



2.3 應用3

 

    很多時候數據是以XML形式存取的，如果把XML節點先轉換為CLR數據類型再應用DataTemplate就麻煩了。DataTemplate很智能，具有直接把XML數據節點當作目標對象的功能-----XML數據中的元素名（標簽名）可以作為DataType，元素的子節點和Attribute可以使用XPath來訪問。下面的代碼使用XmlDataProvider作為數據源（其XPath指出的必須是一組節點），請注意細節之處的變化，結果和應用2的效果相同：

 

[html]  view plain  copy
 
 print?
  1. <Window x:Class="WpfApplication11.wnd11423"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="wnd11423" Height="200" Width="300">  
  5.     <Window.Resources>  
  6.         <!--Xml中的元素名可以作為DataType-->  
  7.         <DataTemplate DataType="XUnit">  
  8.             <Grid>  
  9.                 <StackPanel Orientation="Horizontal">  
  10.                     <Grid>  
  11.                         <Rectangle Fill="Red" Width="{Binding XPath=@Price}" Stroke="Yellow"></Rectangle>  
  12.                         <TextBlock Text="{Binding XPath=@Year}"/>  
  13.                     </Grid>  
  14.                     <TextBlock Text="{Binding XPath=@Price}"></TextBlock>  
  15.                 </StackPanel>  
  16.             </Grid>  
  17.         </DataTemplate>  
  18.         <!--XPath指定一組節點-->  
  19.         <XmlDataProvider x:Key="ds" XPath="XUnits/XUnit">  
  20.             <x:XData>  
  21.                 <XUnits xmlns="">  
  22.                     <XUnit Price="100" Year="2001"></XUnit>  
  23.                     <XUnit Price="120" Year="2002"></XUnit>  
  24.                     <XUnit Price="140" Year="2003"></XUnit>  
  25.                     <XUnit Price="180" Year="2004"></XUnit>  
  26.                     <XUnit Price="150" Year="2005"></XUnit>  
  27.                     <XUnit Price="200" Year="2006"></XUnit>  
  28.                 </XUnits>  
  29.             </x:XData>  
  30.         </XmlDataProvider>  
  31.     </Window.Resources>  
  32.     <StackPanel>  
  33.         <!--XmlDataProvider使用Binding-->  
  34.         <ListBox x:Name="_listBox" ItemsSource="{Binding Source={StaticResource ds}}"></ListBox>  
  35.         <ComboBox x:Name="_comBox" ItemsSource="{Binding Source={StaticResource ds}}"></ComboBox>  
  36.     </StackPanel>  
  37. </Window>  

 

 

2.4 應用4

 

    XML的優勢就是可以方便的表示帶有層級的數據，比如：年級----班級----小組 或  主菜單---次菜單----三級菜單。同時WPF准備了TreeView和MenuItem控件來顯示層級數據。能夠幫助層級控件顯示層級數據的模板是HierachicalDataTemplate。下面是實際工作中常見的例子：

    值得一提的是，HierarchicalDataTemplate的作用不是MenuItem的內容而是它的Header。如果對MenuItem的單擊事件進行偵聽處理，我們就可以從被單擊的MenuItem的Header中取出XML數據。

 

[html]  view plain  copy
 
 print?
  1. <Window x:Class="WpfApplication11.wnd11424"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="wnd11424" Height="400" Width="300">  
  5.     <Window.Resources>  
  6.         <!--年級模版-->  
  7.         <HierarchicalDataTemplate DataType="Grade" ItemsSource="{Binding XPath=Class}">  
  8.             <TextBlock Text="{Binding XPath=@Name}"></TextBlock>  
  9.         </HierarchicalDataTemplate>  
  10.         <!--班級模版-->  
  11.         <HierarchicalDataTemplate DataType="Class" ItemsSource="{Binding XPath=Group}">  
  12.             <RadioButton Content="{Binding XPath=@Name}"></RadioButton>  
  13.         </HierarchicalDataTemplate>  
  14.         <!--分組模版-->  
  15.         <HierarchicalDataTemplate DataType="Group">  
  16.             <CheckBox Content="{Binding XPath=@Name}"></CheckBox>  
  17.         </HierarchicalDataTemplate>  
  18.   
  19.         <!--數據模版-->  
  20.         <XmlDataProvider x:Key="ds" XPath="Data/Grade">  
  21.             <x:XData>  
  22.                 <Data xmlns="">  
  23.                     <Grade Name="一年級">  
  24.                         <Class Name="甲班">  
  25.                             <Group Name="A組"></Group>  
  26.                             <Group Name="B組"></Group>  
  27.                             <Group Name="C組"></Group>  
  28.                         </Class>  
  29.                         <Class Name="乙班">  
  30.                             <Group Name="A組"></Group>  
  31.                             <Group Name="B組"></Group>  
  32.                             <Group Name="C組"></Group>  
  33.                         </Class>  
  34.                     </Grade>  
  35.                     <Grade Name="二年級">  
  36.                         <Class Name="丙班">  
  37.                             <Group Name="A組"></Group>  
  38.                             <Group Name="B組"></Group>  
  39.                             <Group Name="C組"></Group>  
  40.                         </Class>  
  41.                         <Class Name="丁班">  
  42.                             <Group Name="A組"></Group>  
  43.                             <Group Name="B組"></Group>  
  44.                             <Group Name="C組"></Group>  
  45.                         </Class>  
  46.                     </Grade>  
  47.                 </Data>  
  48.             </x:XData>  
  49.         </XmlDataProvider>  
  50.     </Window.Resources>  
  51.     <!--監聽事件-->  
  52.     <StackPanel MenuItem.Click="StackPanel_Click">  
  53.         <Menu ItemsSource="{Binding Source={StaticResource ds}}"></Menu>  
  54.         <TreeView ItemsSource="{Binding Source={StaticResource ds}}" Margin="5"></TreeView>  
  55.     </StackPanel>  
  56. </Window>  
事件處理器：

 

 

[csharp]  view plain  copy
 
 print?
  1. private void StackPanel_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     // Head為XmlElement  
  4.     XmlElement xmlElem = (e.OriginalSource as MenuItem).Header as XmlElement;  
  5.     MessageBox.Show(xmlElem.Attributes["Name"].Value);  
  6. }  
 

 



 

 
 
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 WPF Template模版之DataTemplate與ControlTemplate【一】 wpf中在style的template尋找ControlTemplate和DataTemplate的控件 DataTemplate和ControlTemplate的關系 WPF的ControlTemplate和DataTemplate簡介 WPF中ControlTemplate和DataTemplate的區別 WPF中ControlTemplate,ItemsPanelTemplate ,DataTemplate [WPF]如何使用代碼創建DataTemplate(或者ControlTemplate) WPF之DataTemplate WPF Template模版之尋找失落的控件【三】 [UWP]如何使用代碼創建DataTemplate(或者ControlTemplate)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM