WPF学习笔记（16）树控件TreeView与数据模板

---

一、TreeView

1. TreeView概述

TreeView在树结构（其中的项可以展开和折叠）中显示分层数据。。
官方文档：https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.treeview?view=netframework-4.8

2. TreeViewItem概述

TreeViewItem类代表一个在树控件中可以选择的项。
官方文档：https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.treeviewitem?view=netframework-4.8

3. ItemsControl类

ItemsControl类是列表ListBox、下拉框ComboBox、菜单、表格等一系列选项的基类，部分属性如下：
|属性|说 明|

	左对齐
ltemsSource	获取或设置用于生成 ltemsControl 的内容的集合。 设置ltemsSource属性后，集合ltems是只读且固定大小的，因此不可修改。
ltems	获取用于生成 ltemsControl 的内容的集合。
DisplayMemberPath	获取或设置源对象上的值的路径，以用作对象的可视表示形式，不能同时设置 DisplayMemberPath 和ltemTemplate.
ItemTemplate	获取或设置用来显示每个项的数据模板DataTemplate。
ltemContainerStyle	获取或设置应用于为每个项生成的容器元素的 Style。

4. HeaderedItemsControl类

HeaderedItemsControl类的部分属性如下：

属性	说 明
Header	获取或设置控件 标题。可以是一个字符串或 UIElement。 Object类型
HeaderStringFormat	获取或设置一个撰写字符串，该字符串指定如果 Header属性显示为字符串，应如何设置该属性的格式。
HeaderTemplate	获取或设置用于显示控件标题 的 数据模板 (DataTemplate 类型)
HeaderTemplateSelector	获取或设置一个对象，该对象为用来显示每个项的标题的模板提供自定义选择逻辑。

5. TreeView类

TreeView类的部分属性和事件如下：

属性	说 明
Selectedltem	获取 TreeView 中的选定项，如果选择为空返回 null。
SelectedValue	获取或设置当前选定项的某个属性值。
SelectedValuePath	通常与"SelectedValue"属性一起使用，用于指定控件中选定项目的属性。
事件	说 明
SelectedltemChanged	当选择项更改时发生。

5. TreeViewItem类

TreeViewItem类的部分属性和事件如下：

属性	说 明
IsExpanded	获取或设置是否展开节点
IsSelected	获取或设置是否选中节点
IsSelectionActive	获取是否具有键盘焦点。
事件	说 明
Collapsed	当收拢节点时触发
Expanded	当展开节点时触发
Selected	选中节点时触发(选子节点时，也会向上传递触发父节点的)
Unselected	未选中节点时触发

6. 实例

• 子项会放到Items集合里面
• Header是Object类型可以是文字或元素
  代码和运行结果如下所示：

    <Grid><TreeView x:Name="treeView" Margin="155,98,178,80"><TreeViewItem Header="张三老师" IsExpanded="True" Selected="TreeViewItem_Selected" ><TreeViewItem Header="数学" Selected="TreeViewItem_Selected"><!--子项会放到Items集合里面--><TreeViewItem Header="线性代数" Selected="TreeViewItem_Selected"/><TreeViewItem Header="数率统计"/></TreeViewItem><TreeViewItem Header="体育"/></TreeViewItem><TreeViewItem Header="李四老师"><TreeViewItem ><!--Header是Object类型可以是文字或元素--><TreeViewItem.Header><Grid><Rectangle Height="20" Width="80" Fill="Red"/><TextBlock Text="音乐" Foreground="Blue"/></Grid></TreeViewItem.Header></TreeViewItem></TreeViewItem></TreeView></Grid>

在MainWindow.xaml.cs文件中编写事件代码

private void TreeViewItem_Selected(object sender, RoutedEventArgs e)
{Console.WriteLine("触发 " + sender + " Selected");//避免向上触发多次e.Handled = true;
}private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{//treeView.SelectedValuePath = "Header" 可以观测 SelectedValue 的区别Console.WriteLine("选择的是" + treeView.SelectedItem + "->" + treeView.SelectedValue );
}

二、数据模板

1.DataTemplate示例

真实业务中，数据对象往往比较复杂，含有多个字段信息。下面以带图标的树节点为例

    public class TreeNode{//名称public string Name { get; set; }//节点图标public string Image { get; set; }//子节点集合public List<TreeNode> Children { get; set; }}

定义数据源

List<TreeNode> list = new List<TreeNode>();
TreeNode n1 = new TreeNode
{Name = "张三",Image = "/Images/plane.png",Children = new List<TreeNode>()
};
TreeNode n2 = new TreeNode
{Name = "李四",Image = "/Images/plane.png"
};TreeNode n11 = new TreeNode
{Name = "C++",Image = "/lmages/ball.jpg",Children = new List<TreeNode>()
};
TreeNode n12 = new TreeNode
{Name = "JAVA",Image = "/Images/ball.jpg"
};TreeNode n111 = new TreeNode
{Name = "基础",Image = "/Images/cat.bmp"
};
TreeNode n112 = new TreeNode
{Name = "高级",Image = "/Images/cat.bmp",
};n1.Children.Add(n11);
n1.Children.Add(n12);n11.Children.Add(n111);
n11.Children.Add(n112);list.Add(n1);
list.Add(n2);
treeView.itemsSource = list;
treeView.SelectedValuePath = "Name";

利用DataTemplate实现

<Grid><TreeView x:Name="treeView" Margin="155,98,178,80" SelectedItemChanged="treeView_SelectedItemChanged"><TreeView.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Image Source="{Binding Image}" Width="16" Height="16" Margin="0,0,5,0" /><TextBlock Text="{Binding Name}" /></StackPanel></DataTemplate></TreeView.ItemTemplate></TreeView>
</Grid>

2. HierarchicalDataTemplate示例

表示支持 HeaderedltemsControl的DataTemplate,可继承并递归展示子节点，例如 TreeViewltem 或 Menultem。

<TreeView x:Name="treeView" Margin="155,98,178,80" SelectedItemChanged="treeView_SelectedItemChanged"><TreeView.ItemTemplate><HierarchicalDataTemplate ItemsSource="{Binding Children}"><StackPanel Orientation="Horizontal"><Image Source="{Binding Image}" Width="16" Height="16" Margin="0,0,5,0" /><TextBlock Text="{Binding Name}" /></StackPanel></HierarchicalDataTemplate></TreeView.ItemTemplate>
</TreeView>

定义事件

        private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e){TreeNode n = treeView.SelectedItem as TreeNode;Console.WriteLine(n.Name + ',' + n.Image);}

运行结果

总结

• HierarchicalDataTemplate可以继承并递归展示子节点