WPF/Silverlight HierarchicalDataTemplate 模版的使用(转)

上一篇 对Wpf/Silverlight Template 进行了总结,本篇继续上一篇,主要是介绍 HierarchicalDataTemplate 的使用方法。HierarchicalDataTemplate 继承于DataTemplate,被称之为"层级式数据模板",主要是应用层级比较明显数据集合,其典型的应用就是对TreeView控件进行数据绑定,接下来就在Silverlight 5 下进行一下演示。最近有个卖凉茶的节目比较火,叫中国好声音,里面的导师和其歌手的分组就是个层级结构,我们暂且先用它来做个例子吧。

首先我们需要准备一下层级的数据集合,定义一个歌手类:

歌手类

然后定义一个 导师类,导师类中有个属性就是歌手的集合,代码如下:

导师类

接下来用代码组织一个导师与歌手的层级数据集合:

好声音层级数据集合

有了数据集合,我们就可以在Xaml中编写我们的 HierarchicalDataTemplate 模版了,我们定义两个模版,一个TeacherTemplate 代表导师节点,一个SingerTemplate 代表歌手节点,并把TeacherTemplate中的ItemTemplate指定为SingerTemplate,具体代码如下:

<common:HierarchicalDataTemplate x:Key="SingerTemplate">
        <StackPanel Orientation="Horizontal" Height="24">
            <Image Source="{Binding SingerHeader}" Height="24" Width="24"/>
            <TextBlock Text="{Binding SingerName}" Margin="2,0,0,0" VerticalAlignment="Center" FontSize="12" Foreground="Green" />
        </StackPanel>
</common:HierarchicalDataTemplate>

<common:HierarchicalDataTemplate x:Key="TeacherTemplate" ItemsSource="{Binding SingerList}" ItemTemplate="{StaticResource SingerTemplate}">
        <StackPanel Orientation="Horizontal" Height="24">
            <Image Source="{Binding TeacherHeader}" Height="24" Width="24" />
            <TextBlock Text="{Binding TeacherName}" Margin="2,0,0,0" HorizontalAlignment="Center"  FontSize="14" Foreground="Blue"/>
        </StackPanel>
</common:HierarchicalDataTemplate>

在Silverlight下,需要在Xaml代码中添加如下命名空间:xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"

在此之后,在主界面MainPage.xaml 中添加一个TreeView控件,并给该控件增加一个根节点,命名为 RootItem,并把该根节点的ItemTemplate指定为我们刚刚编写的层级模版中的 TeacherTemplate:

<sdk:TreeView x:Name="GoodVoiceTree" Width="200" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch">
    <sdk:TreeViewItem x:Name="RootItem" ItemTemplate="{StaticResource TeacherTemplate}" IsExpanded="True">
         <sdk:TreeViewItem.HeaderTemplate>
              <DataTemplate>
                 <StackPanel Orientation="Horizontal">
                    <Image Source="images/中国好声音.png" Height="24" Width="24"/>
                    <TextBlock Text="中国好声音" Margin="2,0,0,0" VerticalAlignment="Center" FontSize="16" Foreground="Red" />
                 </StackPanel>
              </DataTemplate>
         </sdk:TreeViewItem.HeaderTemplate>
   </sdk:TreeViewItem>
</sdk:TreeView>

接下来,我们为该树控件的根节点RootItem绑定我们的数据集合就可以展现我们的树形控件了:

this.RootItem.ItemsSource = GoodVoice.GoodVoiceData;

运行结果如下图:

其实在我们的实际开发项目中有些数据的层级结构是固定的,比如上面的例子,就固定了导师和歌手两个层级,固定的层级的话我们可以对每一层的样式方便的进行控制(直接在每层的模版中制作就可以)。但还有很多的时候,数据的层级是不固定的,我们也来进行一下简单的演示:

首先定义个TreeNode类,代表每层的数据模型:

TreeNode 代码

同样用代码组织一个层级数据集合:

TreeNodeData

在Xaml中编写的层级模版:

<common:HierarchicalDataTemplate x:Key="TreeNodeTemplate" ItemsSource="{Binding ChildNode}" >
    <StackPanel Orientation="Horizontal" Height="24">
        <Image Source="{Binding NodeImage}" Height="24" Width="24" />
        <TextBlock Text="{Binding NodeName}" Margin="2,0,0,0" HorizontalAlignment="Center"  FontSize="12" Foreground="Blue"/>
    </StackPanel>
</common:HierarchicalDataTemplate>

在这里我们需要注意一个问题:我们在TreeNode类的时候定义个一个布尔值属性 IsOpen,就是利用这个属性来控制我们这棵树的节点的展开闭合状态的:True 代表该节点展开,False 代表该节点闭合。如果不这么做我们对 TreeView控件进行绑定后,树的初始状态都是闭合的,但是这种方法仅限于WPF 和 Silverlight 5 ,Silverlight4 及以下版本是不灵滴,不知道是不是Silverlight的一个Bug。

<sdk:TreeView x:Name="MyTree" Width="200" Grid.Row="1" Grid.Column="1"  ItemTemplate="{StaticResource TreeNodeTemplate}"
                      HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch">
        <sdk:TreeView.ItemContainerStyle>
            <Style TargetType="sdk:TreeViewItem">
                 <Setter Property="IsExpanded" Value="{Binding IsOpen}"/>
            </Style>
        </sdk:TreeView.ItemContainerStyle>
</sdk:TreeView>

这里我们就利用了上一篇提到的TreeView的ItemContainerStyle属性,对TreeView中的所有TreeviewItem的IsExpander属性进行了绑定。

同样将我们的数据集合绑定到我们的这个TreeView控件上:

this.MyTree.ItemsSource = TreeNodeData.TreeNodeList;

由于我们在数据集合中对 根节点 和 子节点B 的IsOpen属性设置为了True,因此这两个节点是展开的,运行结果如下图:

至此,在Silverlight下利用HierarchicalDataTemplate 层级模版绑定TreeView控件的使用方式,演示完毕,至于如何获取TreeView 节点的数据,我们可以在TreeView控件中的SelectedItemChanged事件中进行获取,这里就不贴代码了,大家可以下载源码参看。

源码下载

时间: 2024-10-13 12:25:26

WPF/Silverlight HierarchicalDataTemplate 模版的使用(转)的相关文章

WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图: XAML代码:// Transform.XAML <Canvas Width="700" Height="700" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://sc

WPF/Silverlight 页面绑定Model验证机制升级版

关于WPF/Silverlight的数据验证,想必大家都不陌生了. 各大牛的博客里都不泛对这方面讨论的文章. 个人比较赞赏 JV9的“Silverlight实例教程”里的Validation数据验证. 本文是在大牛基础上做了个升级,其验证更加简单和方便. 1.创建验证的基类 public class ValidationBase:IDataErrorInfo,INotifyPropertyChanged { protected string errMsg; private bool hasVal

MvvmLight学习篇—— Mvvm Light Toolkit for wpf/silverlight系列(导航)

一.Mvvm Light Toolkit for wpf/silverlight系列之准备工作 二.Mvvm Light Toolkit for wpf/silverlight系列之搭建mvvmlight开发框架 三.Mvvm Light Toolkit for wpf/silverlight系列之数据绑定 四.Mvvm Light Toolkit for wpf/silverlight系列之Command和Events 五.Mvvm Light Toolkit for wpf/silverli

WPF TreeView HierarchicalDataTemplate

原文 WPF TreeView HierarchicalDataTemplate   <StackPanel Margin="0,0,0,0"> <StackPanel.Resources> <HierarchicalDataTemplate x:Key="MonTemp" DataType = "{x:Type local:MonthViewModel}" ItemsSource = "{Binding

WPF基础到企业应用系列7——深入剖析依赖属性(WPF/Silverlight核心)

一. 摘要 首先圣殿骑士非常高兴这个系列能得到大家的关注和支持.这个系列从七月份開始到如今才第七篇,上一篇公布是在8月2日,掐指一算有二十多天没有继续更新了,最主要原因一来是想把它写好,二来是由于近期几个月在筹备"云计算之旅"系列,所以一再推迟了公布进度. 之前一直都没有想过要录制视频.基本的原因还是怕自己知识有限,从而误导他人,所曾经几次浪曦和51CTO邀请录制视频,我都以工作忙.公司内部培训须要时间和自己有待提高等理由委婉的拒绝了,说实在的.自己也知道自己还有非常多地方有待提高.还

WPF使用HierarchicalDataTemplate绑定Dictionary生成TreeView

Dictionary中的<string, CustomeType>CustomeType是一个集合,将其绑定生成一棵树,树的第一层节点是Dictionary的Key,第二层是CustomeType集合,所有代码用XAML实现. 代码如下: <TreeView Name="dictree" ItemsSource="{Binding}"> <TreeView.Resources> <HierarchicalDataTempla

WPF/Silverlight深度解决方案:Silverlight源码之自我保护

Silverlight应用程序发布时会将所有本地资源及类库dll打包进xap文件中,好处是可以非常方便的在网页中部署及桌面化使用:但是同时带来了高度的源码泄露风险.众所周知,xap文件可以被zip等解压软件顺利打开,里面的dll及各种素材资源一目了然: 然后通过****Reflector等工具即可完美的反编译这些dll,就连xaml中的内容也能反射得一清二楚,这不禁让我想起了Flash.网页中的swf可以被众多的下载工具下载,并利用类似**闪客精灵等工具反编译得到甚至具体到每一帧,同样的一切资源

C#中Brush、Color、String相互转换WPF/Silverlight

//部分方法只适用于WPF,在SL中不能用 using System.Windows.Media; 1.String转换成Color Color color = (Color)ColorConverter.ConvertFromString(string); 2.String转换成Brush BrushConverter brushConverter = new BrushConverter();            Brush brush = (Brush)brushConverter.Co

TreeView —WPF—MVVM—HierarchicalDataTemplate

摘要:采用HierarchicalDataTemplate数据模板和treeview在MVVM模式下实现行政区划树, 支持勾选. 一.代码 1.Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace WpfHierarchicalTemplate { public class Distric