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

树控件TreeView与数据模板

一、TreeView
- [1. TreeView概述](#1. TreeView概述)
- [2. TreeViewItem概述](#2. TreeViewItem概述)
- [3. ItemsControl类](#3. ItemsControl类)
- [4. HeaderedItemsControl类](#4. HeaderedItemsControl类)
- [5. TreeView类](#5. TreeView类)
- [5. TreeViewItem类](#5. TreeViewItem类)
- [6. 实例](#6. 实例)
二、数据模板
- 1.DataTemplate示例
- [2. HierarchicalDataTemplate示例](#2. HierarchicalDataTemplate示例)
总结

一、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类型可以是文字或元素
代码和运行结果如下所示：

xml 复制代码

    <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文件中编写事件代码

csharp 复制代码

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示例

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

csharp 复制代码

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

定义数据源

csharp 复制代码

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实现

xml 复制代码

<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 。

xml 复制代码

<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>

定义事件

csharp 复制代码

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

        }

运行结果

总结

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