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

发布于：2025-07-04 ⋅ 阅读:(15) ⋅ 点赞:(0)

树控件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

总结

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

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布