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. 实例)
  • 二、数据模板
  • 总结

一、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,可继承并递归展示子节点,例如 TreeViewltemMenultem

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可以继承并递归展示子节点
相关推荐
qq_392397121 天前
Redis常用操作
数据库·redis·wpf
三千道应用题1 天前
WPF学习笔记(25)MVVM框架与项目实例
wpf
厦门德仔2 天前
【WPF】WPF(样式)
android·java·wpf
✎ ﹏梦醒͜ღ҉繁华落℘3 天前
WPF学习(四)
学习·wpf
zzyzxb3 天前
WPF中依赖属性和附加属性
wpf
✎ ﹏梦醒͜ღ҉繁华落℘3 天前
WPF学习(动画)
学习·wpf
weixin_447103583 天前
Wpf布局之Canvas面板!
wpf
葬歌倾城3 天前
waferMap图像渲染
c#·wpf
甄天3 天前
WPF路由事件:冒泡、隧道与直接全解析
c#·wpf·visual studio