HierarchicalDataTemplate可以叫做"層級(jí)式數(shù)據(jù)模板",主要是應(yīng)用層級(jí)比較明顯數(shù)據(jù)集合。下面我來一步步演示HierarchicalDataTemplate在Silverlight treeview中的使用方法。在演示中,我將引用另外一個(gè)Silverlight控件ListBox進(jìn)行對(duì)比,因?yàn)?,Treeview和Listbox都屬于Itemscontrol,
所以有很多類似相同之處,通過對(duì)比能夠幫助大家記憶以及使用該控件。
首先建立一個(gè)空的項(xiàng)目,
在MainPage頁面中建立一個(gè)ListBox,在Xaml中寫入代碼,
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas./markup-compatibility/2006"
6 xmlns:sys="clr-namespace:System;assembly=mscorlib"
7 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
8 <Grid x:Name="LayoutRoot">
9 <ListBox>
10 <sys:String>樹型演示1</sys:String>
11 <sys:String>樹型演示2</sys:String>
12 <sys:String>樹型演示3</sys:String>
13 <sys:String>樹型演示4</sys:String>
14 <sys:String>樹型演示5</sys:String>
15 </ListBox>
16 </Grid>
17 </UserControl>
運(yùn)行后會(huì)顯示:
在上面代碼基礎(chǔ)上,我們可以添加一個(gè)ItemTemplate,對(duì)數(shù)據(jù)進(jìn)行綁定。
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas./markup-compatibility/2006"
6 xmlns:sys="clr-namespace:System;assembly=mscorlib"
7 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
8 <Grid x:Name="LayoutRoot">
9 <ListBox>
10 <ListBox.ItemTemplate>
11 <DataTemplate>
12 <TextBlock Foreground="Blue" Text="{Binding}" />
13 </DataTemplate>
14 </ListBox.ItemTemplate>
15 <sys:String>樹型演示1</sys:String>
16 <sys:String>樹型演示2</sys:String>
17 <sys:String>樹型演示3</sys:String>
18 <sys:String>樹型演示4</sys:String>
19 <sys:String>樹型演示5</sys:String>
20 </ListBox>
21 </Grid>
22 </UserControl>
23
運(yùn)行結(jié)果如下:
這里L(fēng)istBox的選項(xiàng)都變成了藍(lán)色。
就像我們前面所說的,ListBox是一個(gè)ItemsControl,任何ItemsControl都是相同的,可以將它們的內(nèi)容包括到一個(gè)容器中。所以,我們可以再次重寫上面代碼:
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas./markup-compatibility/2006"
6 xmlns:sys="clr-namespace:System;assembly=mscorlib"
7 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
8 <Grid x:Name="LayoutRoot">
9 <ListBox>
10
11
12 <ListBoxItem Content="樹型演示1">
13 <ListBoxItem.ContentTemplate>
14 <DataTemplate x:Name="myTemplate">
15 <TextBlock Foreground="Blue" Text="{Binding}" />
16 </DataTemplate>
17 </ListBoxItem.ContentTemplate>
18 </ListBoxItem>
19 <ListBoxItem Content="樹型演示2" ContentTemplate="{Binding ElementName=myTemplate}" />
20 <ListBoxItem Content="樹型演示3" ContentTemplate="{Binding ElementName=myTemplate}" />
21 <ListBoxItem Content="樹型演示4" ContentTemplate="{Binding ElementName=myTemplate}" />
22 <ListBoxItem Content="樹型演示5" ContentTemplate="{Binding ElementName=myTemplate}" />
23 </ListBox>
24 </Grid>
25 </UserControl>
26
在上面的代碼中,ListBox中創(chuàng)建五個(gè)ListBoxItem,ListBoxItem的Content屬性綁定著不同的選項(xiàng),而ListBoxItem的ContentTemplate綁定著ListBox的ItemTemplate。
運(yùn)行結(jié)果和上面的相同:
根據(jù)上面的基礎(chǔ),我們可以使用同樣的概念來理解Silverlight Treeivew控件。
在使用Treeview控件前,需要添加引用,Treeview控件被裝配在System.Windows.Controls下,另外在客戶端頁面需要添加命名空間如下:
Treeview控件也是一個(gè)ItemsControl,同樣,每次初始化,Treeview控件會(huì)為所屬選項(xiàng)創(chuàng)建TreeViewItem。 如果我們使用和ListBox同樣的代碼,可以得到下面結(jié)果,
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas./markup-compatibility/2006"
6 xmlns:sys="clr-namespace:System;assembly=mscorlib"
7 xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
8 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
9 <Grid x:Name="LayoutRoot">
10 <Controls:TreeView>
11 <sys:String>樹形演示1</sys:String>
12 <sys:String>樹形演示2</sys:String>
13 <sys:String>樹形演示3</sys:String>
14 </Controls:TreeView>
15 </Grid>
16 </UserControl>
17
運(yùn)行結(jié)果:
同樣,也可以添加ItemTemplate到Treeview控件,
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas./markup-compatibility/2006"
6 xmlns:sys="clr-namespace:System;assembly=mscorlib"
7 xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
8 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
9 <Grid x:Name="LayoutRoot">
10 <Controls:TreeView>
11 <Controls:TreeView.ItemTemplate>
12 <DataTemplate>
13 <TextBlock Foreground="Green" Text="{Binding}" />
14 </DataTemplate>
15 </Controls:TreeView.ItemTemplate>
16 <sys:String>樹型演示1</sys:String>
17 <sys:String>樹型演示2</sys:String>
18 <sys:String>樹型演示3</sys:String>
19 </Controls:TreeView>
20 </Grid>
21 </UserControl>
22
運(yùn)行結(jié)果:
從上面,我們可以看出,ListBox和Treeview有很多相似之處,在一些情況下基本可以替換使用,但是,這兩個(gè)控件也有明顯的區(qū)別。TreeView控件在建立選項(xiàng)的時(shí)候,使用的是TreeViewItem類,而TreeViewItem是HeaderedItemsControl(詳細(xì)定義可以查看MSDN http://msdn.microsoft.com/en-us/library/system.windows.controls.treeviewitem(VS.95).aspx),作為HeaderedItemsControl,可以將控件選項(xiàng)內(nèi)容賦值到Header或者HeaderTemplate屬性中。這里,我們可以簡單的理解,HeaderedItemsControl的Header/HeaderTemplate和ContentControl的Content/ContentTemplate功能是相同的,都是呈現(xiàn)內(nèi)容的載體。 所以,在ListBox中,選項(xiàng)是被綁定到ListBoxItem的content屬性中,而在Treeview控件中,選項(xiàng)是被綁定到TreeViewItem的Header屬性中。同樣,TreeView的ItemTemplate綁定也可以使用TreeviewItem的HeaderTemplate屬性進(jìn)行綁定,結(jié)果是相同的。根據(jù)上面所述,可以得到下面的代碼:
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas./markup-compatibility/2006"
6 xmlns:sys="clr-namespace:System;assembly=mscorlib"
7 xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
8 mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
9 <Grid x:Name="LayoutRoot">
10 <Controls:TreeView>
11 <Controls:TreeViewItem Header="樹型演示1">
12 <Controls:TreeViewItem.HeaderTemplate>
13 <DataTemplate x:Name="myTemplate">
14 <TextBlock Foreground="Green" Text="{Binding}" />
15 </DataTemplate>
16 </Controls:TreeViewItem.HeaderTemplate>
17 </Controls:TreeViewItem>
18 <Controls:TreeViewItem Header="樹型演示2" HeaderTemplate="{Binding ElementName=myTemplate}" />
19 <Controls:TreeViewItem Header="樹型演示3" HeaderTemplate="{Binding ElementName=myTemplate}" />
20 </Controls:TreeView>
21 </Grid>
22 </UserControl>
23
運(yùn)行結(jié)果和上面相同:
相信通過上面的演示,大家已經(jīng)基本理解ItemsControl的Template使用,根據(jù)上述,我們可以延伸到HierarchicalDataTemplate,使用HierarchicalDataTemplate我們需要建立一個(gè)例程數(shù)據(jù)類供TreeView調(diào)用。
2 {
3 public Country()
4 {
5 Privinces = new ObservableCollection<Province>();
6 }
7
8 public string Name { get; set; }
9 public ObservableCollection<Province> Privinces { get; set; }
10 }
11
12 public class Province
13 {
14 public Province()
15 {
16 Citys = new ObservableCollection<City>();
17 }
18
19 public string Name { get; set; }
20 public ObservableCollection<City> Citys { get; set; }
21 }
22
23 public class City
24 {
25 public string Name { get; set; }
26 }
然后建立例程數(shù)據(jù),代碼如下:
2 new Country {
3 Name = "中國",
4 Privinces = { new Province
5 {
6 Name="山東省",
7 Citys = {
8 new City { Name = "濟(jì)南市" },
9 new City { Name= "淄博市" }
10 }
11 },
12 new Province
13 {
14 Name="廣東省",
15 Citys = {
16 new City { Name = "廣州市" },
17 new City { Name= "佛山市" }
18 }
19 }
20 }
21 },
22 new Country {
23 Name = "加拿大",
24 Privinces = { new Province
25 {
26 Name="哥倫比亞省",
27 Citys = {
28 new City { Name = "溫哥華市" },
29 new City { Name= "維多利亞市" }
30 }
31 },
32 new Province
33 {
34 Name="阿爾伯塔省",
35 Citys = {
36 new City { Name = "埃德蒙頓市" },
37 new City { Name= "卡爾加里市" }
38 }
39 }
40 }
41 }
42 };
首先我們使用TreeView的ItemTemplate來顯示該數(shù)據(jù)樹形結(jié)構(gòu),前臺(tái)代碼:
2 <Controls:TreeView.ItemTemplate>
3 <DataTemplate>
4 <TextBlock Text="{Binding Name}" />
5 </DataTemplate>
6 </Controls:TreeView.ItemTemplate>
7 </Controls:TreeView>
顯示結(jié)果如下:
這里Treeview控件建立了兩個(gè)TreeViewItems,并且綁定TreeViewitem的Header屬性到Country對(duì)象,而且將TreeViewItem的HeaderTemplate設(shè)置為TreeView的ItemTemplate。下面,我們需要子數(shù)據(jù)同時(shí)綁定到Treeview控件中,這里我們需要使用HierarchicalDataTemplate。在使用HierarchicalDataTemplate前,需要聲明新的命名空間:
其實(shí)HierarchicalDataTemplate是一個(gè)帶有多個(gè)擴(kuò)展屬性DataTemplate。 如果我們不使用這些擴(kuò)展屬性,HierarchicalDataTemplate和普通DataTemplate是相同的,例如,我們修改上面代碼:
2 <Controls:TreeView.ItemTemplate>
3 <common:HierarchicalDataTemplate>
4 <TextBlock Text="{Binding Name}" />
5 </common:HierarchicalDataTemplate>
6 </Controls:TreeView.ItemTemplate>
7 </Controls:TreeView>
8
顯示結(jié)果和上面相同:
所謂HierarchicalDataTemplate的擴(kuò)展屬性,主要是ItemsSource和ItemTemplate兩個(gè)屬性。其中ItemsSource屬性可以獲取TreeView.ItemsSource的數(shù)據(jù),ItemTemplate可以獲取到TreeViewItem.ItemTemplate模板。根據(jù)這兩個(gè)屬性,我們可以修改以上代碼,獲取到子數(shù)據(jù)。通常來說,我們會(huì)把HierarchicalDataTemplate定義在Resource中,這樣可以使代碼布局整潔,另外提高易讀性。
2 <common:HierarchicalDataTemplate x:Key="CityTemplate">
3 <StackPanel>
4 <TextBlock Text="{Binding Name}"/>
5 </StackPanel>
6 </common:HierarchicalDataTemplate>
7 <common:HierarchicalDataTemplate x:Key="ProvinceTemplate" ItemsSource="{Binding Citys}" ItemTemplate="{StaticResource CityTemplate}">
8 <StackPanel>
9 <TextBlock Text="{Binding Name}" Foreground="Green"/>
10 </StackPanel>
11 </common:HierarchicalDataTemplate>
12 <common:HierarchicalDataTemplate x:Key="CountryTemplate" ItemsSource="{Binding Privinces}" ItemTemplate="{StaticResource ProvinceTemplate}">
13 <TextBlock Text="{Binding Name}" Foreground="Blue"/>
14 </common:HierarchicalDataTemplate>
15 </UserControl.Resources>
在Resource中設(shè)置完HierarchicalDataTemplate,在TreeView控件中調(diào)用ItemTemplate就可以了。
顯示結(jié)果如下:
值得注意的是,在定義資源文件的時(shí)候,設(shè)置CityTemplate,ProvinceTemplate和CountryTemplate的順序不能交換,否則無法查找到相關(guān)資源模板,同時(shí),該資源文件也需要放在TreeView控件聲明前,否則也是無法找到相關(guān)資源模板。
|