如何实现具有层次结构的 TreeView <三> (WPF/TreeView/Style/Template)
来源:互联网 发布:中国网络集成公司排名 编辑:程序博客网 时间:2024/06/06 13:20
数据模板 (DataTemplate) 和数据绑定 (Data Binding)
为了把数据和界面进行关联,我们要做 3 件事:
1、在 MainWindow.xaml 中添加一个 TreeView 控件
<TreeView x:Name="tv"></TreeView>
/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{ public MainWindow() { InitializeComponent(); // 添加 MainWindow.Loaded 事件 this.Loaded += new RoutedEventHandler(MainWindow_Loaded); } private void MainWindow_Loaded(object sender, RoutedEventArgs e) { // 在代码中为 TreeView 控件设置 ItemsSource 属性 var dc = new CSDNBlogDataContext(); var items = dc.Departments.Where(item => item.ParentID == null); tv.ItemsSource = items.ToArray(); }}
关于 LINQ 请参考 MSDN:
3、为 TreeView 控件添加数据模板 (DataTemplate)
数据模板 (DataTemplate 类) 用于描述数据对象的可视化结构。
打个比方,当前工程中用到的数据对象是 Department,而每个 Department 都拥有4个属性: DepartmentID、ParentID、Name 和 Type。当我们将每个 Department 与 TreeViewItem 进行关联(即数据绑定)之后,我们应该告诉 TreeViewItem 如何呈现与其关联的 Department 对象,简单理解就是如何显示 Department 的那4个属性。而 DataTemplate 就是用来定义这个结构的东东。
通常,描述数据对象的可视化结构,直接使用 DataTemplate 就可以了。但是当前工程中的 Department 是可以包含“子部门”的数据项,而且其深度未知。所以,此处使用的是 HierarchicalDataTemplate 类,即允许包含“子数据项”的 DataTemplate.
例如:
a、使用一个 TextBlock 对象,仅用于呈现与该 ListViewItem 关联的 Department 对象的 Name 属性
<TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}"> <TextBlock Text="{Binding Path=Name}"/> </HierarchicalDataTemplate></TreeView.ItemTemplate>
b、稍微复杂一点的结构,呈现 Name(Type) 形式的2个属性。
<TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}"> <!--<TextBlock Text="{Binding Path=Name}"/>--> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=Name}"/> <TextBlock Text="("/> <TextBlock Text="{Binding Path=Type}"/> <TextBlock Text=")"/> </StackPanel> </HierarchicalDataTemplate></TreeView.ItemTemplate>
通过上面2个简单的示例,我们应该对 DataTemplate 是如何描述数据对象的可视化结构有了一个直观的了解。
接下来,将介绍如何实现文本的纵向显示,这里有个概念需要先说明下:
一个字符串 (String) 可以被看作是一个字符数组 (Char[])
根据这一特性,我们可以将一个字符串作为数据源绑定到某个支持 ItemsSource 或 IsItemsHost 属性的控件上。例如: 将 Name 属性指定给 StackPanel、Grid、ListBox 或者 ItemsControl 等对象。
同时,基于 WPF 的数据转换规则,该字符串中的每个 Char 对象都将被自动转换为 String 对象输出到用户界面。
根据上述特征,修改一下 DataTemplate 就能实现文本的纵向显示了:
<TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}"> <!--<TextBlock Text="{Binding Path=Name}"/>--> <!--<StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=Name}"/> <TextBlock Text="("/> <TextBlock Text="{Binding Path=Type}"/> <TextBlock Text=")"/> </StackPanel>--> <ItemsControl ItemsSource="{Binding Path=Name}"> <ItemsControl.Style> <Style TargetType="{x:Type ItemsControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ItemsControl}"> <Grid> <ItemsPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ItemsControl.Style> <ItemsControl.ItemTemplate> <DataTemplate> <TextBlock x:Name="block" RenderTransformOrigin="0.5,0.5" Text="{Binding}" TextAlignment="Center"/> <DataTemplate.Triggers> <DataTrigger Binding="{Binding}" Value="("> <Setter TargetName="block" Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="90"/> </Setter.Value> </Setter> </DataTrigger> <DataTrigger Binding="{Binding}" Value=")"> <Setter TargetName="block" Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="90"/> </Setter.Value> </Setter> </DataTrigger> <DataTrigger Binding="{Binding}" Value="-"> <Setter TargetName="block" Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="90"/> </Setter.Value> </Setter> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </HierarchicalDataTemplate></TreeView.ItemTemplate>
此时,数据绑定和数据模板定义已经完成。下一节将介绍:
1、如何布局 TreeView 控件,实现节点的横向排列 (从左到右,自上而下) 的视图。
2、为 TreeViewItem 设置控件模板 (ControlTemplate) 和触发器 (Trigger),令其在不同状态下呈现出不同的颜色、边框及背景等。
- 如何实现具有层次结构的 TreeView <三> (WPF/TreeView/Style/Template)
- 如何实现具有层次结构的 TreeView <二> (WPF/TreeView/Style/Template)
- 如何实现具有层次结构的 TreeView <一> (WPF/TreeView/Style/Template)
- 如何实现具有层次结构的 TreeView <四> (WPF/TreeView/Style/Template)
- 如何实现具有层次结构的 TreeView <四> (WPF/TreeView/Style/Template)
- 如何实现具有层次结构的 TreeView 模版使用
- WPF TreeView 绑定到层次结构数据库
- 【WPF】如何让TreeView实现右键选中的功能
- 如何判断TreeView中结点的层次
- WPF的TreeView中实现右键选定
- 采用MVVM方式实现WPF的TreeView
- wpf实现metrol风格的Treeview样式
- WPF的Treeview控件实现CheckBox
- WPF Treeview的问题
- WPF ,WinForm的TreeView
- Wpf TreeView 延时加载实现
- wpf treeview
- Jquery的treeview插件实现树形结构
- websphere内存溢出
- Linux文件按时间排序
- errno 多线程安全
- UML类图
- IAP(In Application Programming)在线应用编程
- 如何实现具有层次结构的 TreeView <三> (WPF/TreeView/Style/Template)
- 单点登录(转)
- atoi函数源代码
- RT-Thread ucos
- 双向一对一主键关联映射
- NTSTATUS 返回结果对应的意思
- Android签名教程
- Jboss 内存溢出的问题!
- DataList 分页