WPF TreeView控件的详细使用教程

于 2024-09-06 21:44:17 发布
阅读量1k 收藏 15
点赞数 21
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39604653/article/details/141969600
版权

WPF 中的 TreeView 控件用于显示分层结构的数据，如文件夹结构、组织结构图等。它允许用户通过展开和折叠节点来查看和隐藏其子节点。本文将详细介绍如何在 WPF 中使用 TreeView，从基础使用到高级功能。

目录

  1. 基本使用
  2. 通过数据绑定实现 TreeView
  3. HierarchicalDataTemplate 模板
  4. 使用 MVVM 实现 TreeView
  5. 自定义 TreeViewItem 样式
  6. 事件处理
  7. 完整示例
  8. 总结

1. 基本使用

在 XAML 中定义 TreeView

TreeView 的基本用法是将 TreeViewItem 直接嵌套到 TreeView 中。这是最简单的静态树结构定义方法。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeView Example" Height="300" Width="300">
    <Grid>
        <TreeView>
            <TreeViewItem Header="Fruits">
                <TreeViewItem Header="Apple"/>
                <TreeViewItem Header="Banana"/>
            </TreeViewItem>
            <TreeViewItem Header="Vegetables">
                <TreeViewItem Header="Carrot"/>
                <TreeViewItem Header="Broccoli"/>
            </TreeViewItem>
        </TreeView>
    </Grid>
</Window>

运行效果

用户可以展开和折叠 “Fruits” 和 “Vegetables” 节点，查看子项。

动态添加 TreeViewItem

可以通过代码动态添加项到 TreeView 中：

TreeViewItem fruits = new TreeViewItem() { Header = "Fruits" };
fruits.Items.Add(new TreeViewItem() { Header = "Apple" });
fruits.Items.Add(new TreeViewItem() { Header = "Banana" });

TreeViewItem vegetables = new TreeViewItem() { Header = "Vegetables" };
vegetables.Items.Add(new TreeViewItem() { Header = "Carrot" });
vegetables.Items.Add(new TreeViewItem() { Header = "Broccoli" });

treeView.Items.Add(fruits);
treeView.Items.Add(vegetables);

2. 通过数据绑定实现 TreeView

在实际应用中，数据可能来源于数据库、文件系统等，不可能手动定义所有项。因此，TreeView 支持通过数据绑定来动态加载节点。

示例：绑定到一个简单的对象集合

数据模型
public class Category
{
    public string Name { get; set; }
    public List<Category> SubCategories { get; set; }
}
定义数据
public MainWindow()
{
    InitializeComponent();

    var categories = new List<Category>
    {
        new Category
        {
            Name = "Fruits",
            SubCategories = new List<Category>
            {
                new Category { Name = "Apple" },
                new Category { Name = "Banana" }
            }
        },
        new Category
        {
            Name = "Vegetables",
            SubCategories = new List<Category>
            {
                new Category { Name = "Carrot" },
                new Category { Name = "Broccoli" }
            }
        }
    };

    treeView.ItemsSource = categories;
}
绑定 XAML

为了让 TreeView 正确显示层次数据，我们需要使用 HierarchicalDataTemplate 来定义如何展示父子关系。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeView Binding" Height="300" Width="300">
    <Grid>
        <TreeView x:Name="treeView" ItemsSource="{Binding}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
                    <TextBlock Text="{Binding Name}"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

结果

  • TreeView 通过 ItemsSource 绑定到 categories 列表。

3. HierarchicalDataTemplate 模板

HierarchicalDataTemplate 是 TreeView 最重要的模板，它定义了如何展示数据的层次结构。每个节点都可以有自己的子节点，它们也可以被绑定到数据源。

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}"/>
        </StackPanel>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>

结果

  • HierarchicalDataTemplate 使用 ItemsSource="{Binding SubCategories}" 来定义子项的绑定。

自定义模板

可以在 HierarchicalDataTemplate 中自定义每个节点的外观。例如，为每个项添加一个图标：

<HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
    <StackPanel Orientation="Horizontal">
        <Image Source="icon.png" Width="16" Height="16"/>
        <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
    </StackPanel>
</HierarchicalDataTemplate>

4. 使用 MVVM 实现 TreeView

在 MVVM（Model-View-ViewModel）模式下，通过 ViewModel 来管理 TreeView 的数据和行为。

定义 ViewModel

public class CategoryViewModel
{
    public ObservableCollection<Category> Categories { get; set; }

    public CategoryViewModel()
    {
        Categories = new ObservableCollection<Category>
        {
            new Category
            {
                Name = "Fruits",
                SubCategories = new List<Category>
                {
                    new Category { Name = "Apple" },
                    new Category { Name = "Banana" }
                }
            },
            new Category
            {
                Name = "Vegetables",
                SubCategories = new List<Category>
                {
                    new Category { Name = "Carrot" },
                    new Category { Name = "Broccoli" }
                }
            }
        };
    }
}

绑定到 View

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeView MVVM" Height="300" Width="300">
    <Grid>
        <TreeView ItemsSource="{Binding Categories}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
                    <TextBlock Text="{Binding Name}"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

设置 DataContext

在 MainWindow.xaml.cs 中设置 DataContext 为 CategoryViewModel：

public MainWindow()
{
    InitializeComponent();
    DataContext = new CategoryViewModel();
}

5. 自定义 TreeViewItem 样式

你可以通过自定义 TreeViewItem 的样式来改变 TreeView 的外观。例如，改变节点的背景颜色或文本样式：

<Style TargetType="TreeViewItem">
    <Setter Property="Foreground" Value="Blue"/>
    <Setter Property="FontWeight" Value="Bold"/>
</Style>

自定义选择项的样式

可以自定义选中项的背景颜色：

<Style TargetType="TreeViewItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="LightBlue"/>
        </Trigger>
    </Style.Triggers>
</Style>

6. 事件处理

你可以通过事件处理器来处理 TreeView 的交互，比如节点的选择、展开或折叠。

SelectedItemChanged 事件

<TreeView SelectedItemChanged="TreeView_SelectedItemChanged">
    <!-- TreeView 定义 -->
</TreeView>

在后台代码中处理事件

private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    var selectedItem = e.NewValue as Category;
    MessageBox.Show($"You selected: {selectedItem?.Name}");
}

7. 完整示例

结合上面的知识，我们可以构建一个完整的 TreeView 应用：

XAML 代码

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="

http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeView Example" Height="300" Width="300">
    <Grid>
        <TreeView ItemsSource="{Binding Categories}"
                  SelectedItemChanged="TreeView_SelectedItemChanged">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding SubCategories}">
                    <TextBlock Text="{Binding Name}"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

后台代码

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new CategoryViewModel();
    }

    private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        var selectedItem = e.NewValue as Category;
        MessageBox.Show($"You selected: {selectedItem?.Name}");
    }
}

8. 总结

WPF 中的 TreeView 是一个功能强大的控件，适合用于显示层次化数据。通过数据绑定、HierarchicalDataTemplate 和 MVVM 模式，可以实现动态、灵活且易于维护的树结构显示。同时，通过自定义样式和事件处理，可以打造出个性化的用户界面。

生命不息-学无止境
关注
专栏目录
wpf基于TreeView控件的Demo
09-17
WPF中基于TreeView控件的简单图片查看Demo，包含TreeView简单运用及遍历根目录下的文件。
WPF TreeView控件样式
03-28
自定义 TreeView控件样式（自定义节点样式大小、形状）。
WPF篇（19）-TabControl控件+TreeView树控件
最新发布
一个人的江湖
08-16 1068
TreeViewItem作为TreeView唯一的元素类型，它继承于HeaderedItemsControl（带标题），而HeaderedItemsControl又继承于ItemsControl，由此可见，TreeViewItem元素本身也是一个集合控件。TreeViewItem有两个常用的属性，分别是IsSelected属性和IsExpanded属性，IsSelected表示当前元素是否选中，IsExpanded表示当前元素是否展开。
treeview控件（动态数据绑定+整行选择)(WPF)（一）
夕颜的专栏
05-14 7727
在使用treeview控件时，数据大多都是从数据库中读取后动态绑定的，而且为了美观，在选择项的时候多会高亮显示整行
WPF应用基础篇---TreeView
weixin_30933531的博客
07-31 442
　　1.前言 　　最近有部分朋友经常问我，WPF的TreeView控件，如何用MVVM来实现绑定和显示？所以写下了这篇WPF应用基础篇---TreeView. 　2.介绍 案例浏览： 　　　　 　　　　　　　　　　　　　　　　　　图 1-1（案例结构图） 目的：本文中做了三个简单的Demo给刚刚入门或者入门不久而且不熟悉TreeView控件在MVVM中具体实现的朋友们...
WPF —— TreeView树形控件
一个新人博客，愿多多支持。
04-01 2130
TreeView 表示一个控件，该控件在树结构（其中的项可以展开和折叠）中显示分层数据。TreeView 是一个 ItemsControl，这意味着它可以包含任何类型的对象的集合 (，例如字符串、图像或面板)。
WPF之Treeview控件简单用法
aiyinkun3582的博客
08-02 232
TreeView：表示显示在树结构中分层数据具有项目可展开和折叠的控件 TreeView 的内容是可以包含丰富内容的 TreeViewItem 控件，如 Button 和 Image 控件。TreeViewItem 可以包含一个或多 TreeViewItem 对象作为后代。TreeView 定义为 TreeViewItem 对象层次结构。 TreeView 可以通过绑定到数据源并使用...
【WPF应用35】深度解析WPF中的TreeView控件：功能、用法、特性与最佳实践
qq_35320456的博客
04-05 4214
深度解析WPF中的TreeView控件：功能、用法、特性与最佳实践
WPF中TreeView的使用
韬光养晦
07-23 1万+
WPF中TreeView的使用 一、最简单的用法，使用TreeViewItem展开，如下： <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.m
wpf TreeView控件基本操作
11-19
wpf TreeView控件基本操作，如何在Xaml代码中添加，及在Cs文件中用代码添加
WpfTreeView
03-10
Wpf下TreeView控件的简单应用。 我也是从别处下的，分享一下供大家交流学习。
WPF TreeView控件 操作类（仅供参考）
10-10
可实现插入、删除、节点上下移等功能。注：只能新建一个根节点。
最漂亮的treeview（wpf）
01-22
截面很漂亮的treeview（wpf） 直接运行 代码简单易懂 我是个初学者 对我的帮助很大
WPF下使用TreeView实现流程图效果
07-09
利用TreeView自定义模板，实现了流程图效果，可实现多级绑定。 采用MVVM模式，通过绑定数据源来控制界面显示，使得流程控制更加方便。 原文链接：https://blog.csdn.net/wsadcg/article/details/107230210
WPF treeview树型结构demo
10-26
基于treeview的树型结构，C# wpf. 内有项目源码，通过控件的形式定义组件，并且实践树型结构的赋值方式
WPF自定义TreeViewItem 样式
10-30
WPF 自定义TreeViewItem的样式 CSDN 博客中有界面展示 http://blog.csdn.net/lvguoshan/article/details/40624961
WPF Combox+treeview以及 datagried+treeview控件
01-07
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中使用自定义的`Combobox+TreeView`和`DataGrid+TreeView`控件来处理大规模数据。这些控件是WPF开发中的重要组成部分，特别是在构建用户界面...
Wpf TreeView控件路径下显示文件和文件夹
04-12
总结起来，实现“Wpf TreeView控件路径下显示文件和文件夹”涉及了WPF的数据绑定、模板设计、文件系统操作以及用户体验优化等多个方面。通过合理的设计和编码，我们可以创建一个功能强大、用户友好的文件浏览界面。
【愚公系列】2023年10月 WPF控件专题 TreeView控件详解
热门推荐
时光隧道
08-14 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF Treeview控件取消选中项
05-10
要取消WPF TreeView控件中的选定项，您可以使用SelectedItem属性并将其设置为null。例如，如果您的TreeView控件名为treeView，您可以使用以下代码取消选定项： ```csharp treeView.SelectedItem = null; ``` 您还可以使用ClearSelection（）方法来清除Treeview控件中的所有选定项，例如： ```csharp treeView.ClearSelection(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生命不息-学无止境

你的每一份支持都是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值