一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

詳解Silverlight Treeview的HierarchicalDataTempla...

 guanhaizhe 2011-01-18

詳解Silverlight Treeview的HierarchicalDataTemplate使用

http://www./html/tips/2009/1211/391.html

時(shí)間:2009-12-11 16:14來源:SilverlightChina.Net 作者:Jv9 點(diǎn)擊: 1520次
2009-12-11 00:20 by jv9, 0 visits, 網(wǎng)摘, 收藏, 編輯 在Silverlight項(xiàng)目中,Treeview控件是比較常用的表示層次或者等級(jí)的控件,該控件可以非常清晰的顯示數(shù)據(jù)之間的隸屬關(guān)系。對(duì)于Treeview控件的基本使用已經(jīng)有很多文章介紹,這里我想講解一下Silverlight Treeivew的
  

在Silverlight項(xiàng)目中,Treeview控件是比較常用的表示層次或者等級(jí)的控件,該控件可以非常清晰的顯示數(shù)據(jù)之間的隸屬關(guān)系。對(duì)于Treeview控件的基本使用已經(jīng)有很多文章介紹,這里我想講解一下Silverlight Treeivew的HierarchicalDataTemplate的使用方法。

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中寫入代碼,

 

 1 <UserControl x:Class="TreeviewDemo.MainPage"
 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)行綁定。

 

 1 <UserControl x:Class="TreeviewDemo.MainPage"
 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è)容器中。所以,我們可以再次重寫上面代碼:

 

 1 <UserControl x:Class="TreeviewDemo.MainPage"
 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下,另外在客戶端頁面需要添加命名空間如下:

 xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 

 

 

Treeview控件也是一個(gè)ItemsControl,同樣,每次初始化,Treeview控件會(huì)為所屬選項(xiàng)創(chuàng)建TreeViewItem。 如果我們使用和ListBox同樣的代碼,可以得到下面結(jié)果,

 

 1 <UserControl x:Class="TreeviewDemo.MainPage"
 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控件,

 

 1 <UserControl x:Class="TreeviewDemo.MainPage"
 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ù)上面所述,可以得到下面的代碼:

 

 1 <UserControl x:Class="TreeviewDemo.MainPage"
 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)用。

 

 

 1 public class Country
 2     {
 3         public Country()
 4         {
 5             Privinces = new ObservableCollection<Province>();
 6         }
 7 
 8         public string Name { getset; }
 9         public ObservableCollection<Province> Privinces { getset; }
10     }
11 
12 public class Province
13     {
14         public Province()
15         {
16             Citys = new ObservableCollection<City>();
17         }
18 
19         public string Name { getset; }
20         public ObservableCollection<City> Citys { getset; }
21     }
22 
23 public class City
24     {
25         public string Name { getset; }
26     }

然后建立例程數(shù)據(jù),代碼如下:

 

代碼
 1 tvDemo.ItemsSource = new ObservableCollection<Country> { 
 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)代碼:

 

1         <Controls:TreeView x:Name="tvDemo">
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前,需要聲明新的命名空間:

 

xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"

 

 

其實(shí)HierarchicalDataTemplate是一個(gè)帶有多個(gè)擴(kuò)展屬性DataTemplate。 如果我們不使用這些擴(kuò)展屬性,HierarchicalDataTemplate和普通DataTemplate是相同的,例如,我們修改上面代碼:

 

1 <Controls:TreeView x:Name="tvDemo">
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中,這樣可以使代碼布局整潔,另外提高易讀性。

 

 

 1     <UserControl.Resources>
 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就可以了。

 

<Controls:TreeView x:Name="tvDemo"  ItemTemplate="{StaticResource CountryTemplate}"></Controls:TreeView>

 

 

顯示結(jié)果如下:

值得注意的是,在定義資源文件的時(shí)候,設(shè)置CityTemplate,ProvinceTemplate和CountryTemplate的順序不能交換,否則無法查找到相關(guān)資源模板,同時(shí),該資源文件也需要放在TreeView控件聲明前,否則也是無法找到相關(guān)資源模板。

 

源代碼下載

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多

    丰满人妻一二三区av| 又大又长又粗又猛国产精品| 国产精品久久女同磨豆腐| 少妇高潮呻吟浪语91| 国产欧美日韩一级小黄片| 99久久精品久久免费| 熟女乱一区二区三区丝袜| 国产精品日韩欧美一区二区 | 国产成人国产精品国产三级 | av在线免费观看在线免费观看| 午夜精品一区二区av| 欧美精品中文字幕亚洲| 绝望的校花花间淫事2| 男人和女人黄 色大片| 国产av一区二区三区四区五区| 国产高清视频一区不卡| 福利视频一区二区三区| 国产一区二区在线免费| 国产亚洲欧美另类久久久| 福利一区二区视频在线| 午夜视频在线观看日韩| 在线一区二区免费的视频| 中文字幕人妻一区二区免费 | 暴力性生活在线免费视频| 99亚洲综合精品成人网色播| 丰满少妇被猛烈撞击在线视频| 国产一区二区三中文字幕| 好吊日成人免费视频公开| 草草视频福利在线观看| 亚洲欧洲一区二区中文字幕| 日本高清二区视频久二区| 激情综合网俺也狠狠地| 午夜国产成人福利视频| 很黄很污在线免费观看| 在线九月婷婷丁香伊人| 黄色片一区二区三区高清| 中文字幕一区二区三区中文| 欧美日韩亚洲精品在线观看| 亚洲国产一区精品一区二区三区色| 亚洲乱妇熟女爽的高潮片| 日韩精品在线观看完整版|