详解Silverlight Treeview的HierarchicalDataTemplate使用

详解Silverlight Treeview的HierarchicalDataTemplate使用,第1张

概述在Silverlight项目中,Treeview控件是比较常用的表示层次或者等级的控件,该控件可以非常清晰的显示数据之间的隶属关系。对于Treeview控件的基本使用已经有很多文章介绍,这里我想讲解一下Silverlight Treeivew的HierarchicalDataTemplate的使用方法。   HierarchicalDataTemplate可以叫做"层级式数据模板",主要是应用层级

在Silverlight项目中,TreevIEw控件是比较常用的表示层次或者等级的控件,该控件可以非常清晰的显示数据之间的隶属关系。对于TreevIEw控件的基本使用已经有很多文章介绍,这里我想讲解一下Silverlight Treeivew的HIErarchicalDataTemplate的使用方法。

 

HIErarchicalDataTemplate可以叫做"层级式数据模板",主要是应用层级比较明显数据集合。下面我来一步步演示HIErarchicalDataTemplate在Silverlight treevIEw中的使用方法。在演示中,我将引用另外一个Silverlight控件ListBox进行对比,因为,TreevIEw和ListBox都属于Itemscontrol,

所以有很多类似相同之处,通过对比能够帮助大家记忆以及使用该控件。

 

首先建立一个空的项目, 

 

 

 

在MainPage页面中建立一个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.openxmlformats.org/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>

 

运行后会显示:

 

 

 在上面代码基础上,我们可以添加一个ItemTemplate,对数据进行绑定。

 

 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.openxmlformats.org/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 

 

 

运行结果如下:

 

这里ListBox的选项都变成了蓝色。

就像我们前面所说的,ListBox是一个ItemsControl,任何ItemsControl都是相同的,可以将它们的内容包括到一个容器中。所以,我们可以再次重写上面代码:

 

 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.openxmlformats.org/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中创建五个ListBoxItem,ListBoxItem的Content属性绑定着不同的选项,而ListBoxItem的ContentTemplate绑定着ListBox的ItemTemplate。

运行结果和上面的相同:

 

根据上面的基础,我们可以使用同样的概念来理解Silverlight Treeivew控件。

在使用TreevIEw控件前,需要添加引用,TreevIEw控件被装配在System.windows.Controls下,另外在客户端页面需要添加命名空间如下:

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

 

 

TreevIEw控件也是一个ItemsControl,同样,每次初始化,TreevIEw控件会为所属选项创建TreeVIEwItem。 如果我们使用和ListBox同样的代码,可以得到下面结果,

 

 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.openxmlformats.org/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 

 

 

运行结果:

 

同样,也可以添加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.openxmlformats.org/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 

 

 

运行结果:

从上面,我们可以看出,ListBox和TreevIEw有很多相似之处,在一些情况下基本可以替换使用,但是,这两个控件也有明显的区别。TreeVIEw控件在建立选项的时候,使用的是TreeViewItem类,而TreeVIEwItem是headeredItemsControl(详细定义可以查看MSDN http://msdn.microsoft.com/en-us/library/system.windows.controls.treeviewitem(VS.95).aspx),作为headeredItemsControl,可以将控件选项内容赋值到header或者headerTemplate属性中。这里,我们可以简单的理解,headeredItemsControl的header/headerTemplate和ContentControl的Content/ContentTemplate功能是相同的,都是呈现内容的载体。 所以,在ListBox中,选项是被绑定到ListBoxItem的content属性中,而在TreevIEw控件中,选项是被绑定到TreeVIEwItem的header属性中。同样,TreeVIEw的ItemTemplate绑定也可以使用TreevIEwItem的headerTemplate属性进行绑定,结果是相同的。根据上面所述,可以得到下面的代码:

 

 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.openxmlformats.org/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 

 

 

运行结果和上面相同:

相信通过上面的演示,大家已经基本理解ItemsControl的Template使用,根据上述,我们可以延伸到HIErarchicalDataTemplate,使用HIErarchicalDataTemplate我们需要建立一个例程数据类供TreeVIEw调用。

 

 

 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     }

然后建立例程数据,代码如下:

 

代码
 1 tvDemo.ItemsSource = new ObservableCollection<Country>  { 
 2             new
 Country { 
 3                 name = "中国"

 4                 Privinces = { new
 Province 
 5 
                  { 
 6                     name="山东省"
,
 7                     Citys =
 { 
 8                         new City { name = "济南市"
 },
 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来显示该数据树形结构,前台代码:

 

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>

 

 

显示结果如下:

这里TreevIEw控件建立了两个TreeVIEwItems,并且绑定TreeVIEwitem的header属性到Country对象,而且将TreeVIEwItem的headerTemplate设置为TreeVIEw的ItemTemplate。下面,我们需要子数据同时绑定到TreevIEw控件中,这里我们需要使用HIErarchicalDataTemplate。在使用HIErarchicalDataTemplate前,需要声明新的命名空间:

 

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

 

 

其实HIErarchicalDataTemplate是一个带有多个扩展属性DataTemplate。 如果我们不使用这些扩展属性,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 

 

 

显示结果和上面相同:

所谓HIErarchicalDataTemplate的扩展属性,主要是ItemsSource和ItemTemplate两个属性。其中ItemsSource属性可以获取TreeVIEw.ItemsSource的数据,ItemTemplate可以获取到TreeVIEwItem.ItemTemplate模板。根据这两个属性,我们可以修改以上代码,获取到子数据。通常来说,我们会把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中设置完HIErarchicalDataTemplate,在TreeVIEw控件中调用ItemTemplate就可以了。

 

<Controls:TreeVIEw x:name="tvDemo"  ItemTemplate="{StaticResource CountryTemplate}"></Controls:TreeVIEw>

 

 

显示结果如下:

值得注意的是,在定义资源文件的时候,设置CityTemplateProvinceTemplate和CountryTemplate的顺序不能交换,否则无法查找到相关资源模板,同时,该资源文件也需要放在TreeVIEw控件声明前,否则也是无法找到相关资源模板。

 

感谢 银光中国网SilverlightChina.Net) 提供空间发布代码和演示。

在线演示: http://silverlightchina.net/html/tips/2009/1211/391.html

源码下载: http://silverlightchina.net/uploads/soft/091211/1-091211164055.zip

(转载请注明出处)

总结

以上是内存溢出为你收集整理的详解Silverlight Treeview的HierarchicalDataTemplate使用全部内容,希望文章能够帮你解决详解Silverlight Treeview的HierarchicalDataTemplate使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1040937.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存