WPF中TreeView的使用

最新推荐文章于 2024-05-08 11:02:36 发布
最新推荐文章于 2024-05-08 11:02:36 发布
阅读量1w 收藏 30
点赞数 5
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43024228/article/details/107547352
版权

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.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TreeView FontSize="16">
            <TreeViewItem Header="动物">
                <TreeViewItem Header="猴子"></TreeViewItem>
                <TreeViewItem Header="老虎"></TreeViewItem>
                <TreeViewItem Header="大象"></TreeViewItem>
            </TreeViewItem>
            <TreeViewItem Header="水果">
                <TreeViewItem Header="苹果"></TreeViewItem>
                <TreeViewItem Header="橘子"></TreeViewItem>
                <TreeViewItem Header="葡萄"></TreeViewItem>
            </TreeViewItem>
            <TreeViewItem Header="蔬菜">
                <TreeViewItem Header="青菜"></TreeViewItem>
                <TreeViewItem Header="白菜"></TreeViewItem>
                <TreeViewItem Header="茄子"></TreeViewItem>
            </TreeViewItem>
        </TreeView>
    </Grid>
</Window>

效果：
在这里插入图片描述
二、获取xml文件中的数据进行展示，如下：
xml文件XMLFile1.xml代码：

<?xml version="1.0" encoding="utf-8" ?>
<Data xmlns="">
  <Grade Name="一年级">
    <Class Name="1班">
      <Group Name="A组"/>
      <Group Name="B组"/>
      <Group Name="C组"/>
      <Group Name="D组"/>
    </Class>
  </Grade>
  <Grade Name="二年级">
    <Class Name="1班">
      <Group Name="A组"/>
      <Group Name="B组"/>
      <Group Name="C组"/>
      <Group Name="D组"/>
    </Class>
  </Grade>
  <Grade Name="三年级">
    <Class Name="1班">
      <Group Name="A组"/>
      <Group Name="B组"/>
      <Group Name="C组"/>
      <Group Name="D组"/>
    </Class>
  </Grade>
</Data>

窗体xaml代码：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!--数据源-->
        <XmlDataProvider x:Key="ds" Source="XMLFile1.xml" XPath="Data/Grade"/>
        <!--年级模板-->
        <HierarchicalDataTemplate DataType="Grade" ItemsSource="{Binding XPath=Class}">
            <TextBlock Text="{Binding XPath=@Name}"></TextBlock>
        </HierarchicalDataTemplate>
        <!--班级模板-->
        <HierarchicalDataTemplate DataType="Class" ItemsSource="{Binding XPath=Group}">
            <RadioButton Content="{Binding XPath=@Name}" GroupName="gn"></RadioButton>
        </HierarchicalDataTemplate>
        <!--小组模板-->
        <HierarchicalDataTemplate DataType="Group" ItemsSource="{Binding XPath=Student}">
            <CheckBox Content="{Binding XPath=@Name}"></CheckBox>
        </HierarchicalDataTemplate>
    </Window.Resources>
    <Grid>
        <TreeView ItemsSource="{Binding Source={StaticResource ds}}"></TreeView>
    </Grid>
</Window>

运行效果：
在这里插入图片描述
三、使用数据绑定来来展示节点，这里在一个程序中，用三个函数举了三个例子，如下：
首先新建一个PropertyNodeItem类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WPFTreeview
{
    class PropertyNodeItem
    {
        public string Icon { get; set; }
        public string EditIcon { get; set; }
        public string DisplayName { get; set; }
        public string Name { get; set; }

        public List<PropertyNodeItem> Children { get; set; }
        public PropertyNodeItem()
        {
            Children = new List<PropertyNodeItem>();
        }
    }
}

主窗体xaml代码：

<Window x:Class="WPFTreeview.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFTreeview"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TreeView x:Name="treeView" FontSize="16">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:PropertyNodeItem}" ItemsSource="{Binding Path=Children}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Icon}" Width="20"/>
                        <TextBlock Text="{Binding DisplayName}"/>
                        <Image Source="{Binding EditIcon}" Width="20"/>
                        <StackPanel.ToolTip>
                            <TextBlock Text="{Binding Name}"/>
                        </StackPanel.ToolTip>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

主窗体后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml;

namespace WPFTreeview
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            //三个函数
            ShowTreeView1();
            //ShowTreeView2();
            //ShowTreeView3();
        }

        private const string FOLDER_ICON =  @"";//Icon路径
        private const string EDITABLE_ICON = @"";//Icon路径
        private const string TAG_ICON = @"";//Icon路径

        private void ShowTreeView1()
        {
            List<PropertyNodeItem> itemList = new List<PropertyNodeItem>();
            PropertyNodeItem node1 = new PropertyNodeItem()
            {
                DisplayName = "蔬菜",
                Name = "蔬菜可提供人体所必需的多种维生素和矿物质等营养物质！",
                Icon = FOLDER_ICON,
            };
            PropertyNodeItem node1tag1 = new PropertyNodeItem()
            {
                DisplayName = "青菜",
                Name = "青菜是十字花科，芸苔属一年或二年生草本植物！",
                Icon = TAG_ICON,
                EditIcon = EDITABLE_ICON
            };
            node1.Children.Add(node1tag1);
            PropertyNodeItem node1tag2 = new PropertyNodeItem()
            {
                DisplayName = "白菜",
                Name = "白菜是我国原产蔬菜，有悠久的栽培历史！",
                Icon = TAG_ICON,
                EditIcon = EDITABLE_ICON
            };
            node1.Children.Add(node1tag2);
            itemList.Add(node1);

            PropertyNodeItem node2 = new PropertyNodeItem()
            {
                DisplayName = "动物",
                Name = "动物是生物的一个种类。它们一般以有机物为食，能感觉，可运动，能够自主运动！",
                Icon = FOLDER_ICON,
            };
            PropertyNodeItem node2tag1 = new PropertyNodeItem()
            {
                DisplayName = "老虎",
                Name = "老虎是大型猫科动物；毛色浅黄或棕黄色，满身黑色横纹！",
                Icon = TAG_ICON,
                EditIcon = EDITABLE_ICON
            };
            node2.Children.Add(node2tag1);
            PropertyNodeItem node2tag2 = new PropertyNodeItem()
            {
                DisplayName = "大象",
                Name = "大象很早就成了人类的朋友，并能为人类提供帮助！",
                Icon = TAG_ICON,
                EditIcon = EDITABLE_ICON
            };
            node2.Children.Add(node2tag2);
            itemList.Add(node2);

            treeView.ItemsSource = itemList;
        }

        private void ShowTreeView2()
        {
            List<PropertyNodeItem> itemList = new List<PropertyNodeItem>();

            PropertyNodeItem leafOneNode = new PropertyNodeItem();
            leafOneNode.DisplayName = "小员工A";
            leafOneNode.Name = "这是小员工A";
            leafOneNode.Children = new List<PropertyNodeItem>();

            PropertyNodeItem leafTwoNode = new PropertyNodeItem();
            leafTwoNode.DisplayName = "小员工B";
            leafTwoNode.Name = "这是小员工B";
            leafTwoNode.Children = new List<PropertyNodeItem>();

            PropertyNodeItem leafThreeNode = new PropertyNodeItem();
            leafThreeNode.DisplayName = "小员工C";
            leafThreeNode.Name = "这是小员工C";
            leafThreeNode.Children = new List<PropertyNodeItem>();

            PropertyNodeItem secondLevelNode = new PropertyNodeItem();
            secondLevelNode.DisplayName = "总经理";
            secondLevelNode.Name = "这是二级领导";
            secondLevelNode.Children = new List<PropertyNodeItem>() { leafOneNode, leafTwoNode, leafThreeNode };

            PropertyNodeItem firstLevelNode = new PropertyNodeItem();
            firstLevelNode.DisplayName = "董事长";
            firstLevelNode.Name = "这是一级领导";
            firstLevelNode.Children = new List<PropertyNodeItem>() { secondLevelNode };

            itemList.Add(firstLevelNode);
            treeView.ItemsSource = itemList;
        }

        private void ShowTreeView3()
        {
            List<PropertyNodeItem> itemList = new List<PropertyNodeItem>();

            XmlDocument doc = new XmlDocument();
            XmlReaderSettings settings = new XmlReaderSettings();
            settings.IgnoreComments = true;
            XmlReader reader = XmlReader.Create(@"XMLProducts.xml", settings);

            doc.Load(reader);
            XmlNode xn = doc.SelectSingleNode("Products");
            XmlNodeList xnl1 = xn.ChildNodes;

            foreach (XmlNode xn1 in xnl1)
            {
                //一级节点
                PropertyNodeItem firstLevelNode = new PropertyNodeItem();
                XmlElement xe1 = (XmlElement)xn1;
                firstLevelNode.Name = "我是一级节点";
                firstLevelNode.DisplayName = xe1.GetAttribute("Name").ToString();

                XmlNodeList xnl2 = xe1.ChildNodes;
                foreach (XmlNode xn2 in xnl2)
                {
                    XmlElement xe2 = (XmlElement)xn2;
                    XmlNodeList xnl3 = xe2.ChildNodes;

                    PropertyNodeItem secondLevelNode = new PropertyNodeItem();
                    secondLevelNode.Name = "我是二级节点";
                    secondLevelNode.DisplayName = xe2.GetAttribute("Name").ToString();

                    foreach (XmlNode xn3 in xnl3)
                    {
                        XmlElement xe3 = (XmlElement)xn3;
                        PropertyNodeItem leafOneNode = new PropertyNodeItem();
                        leafOneNode.DisplayName = xe3.GetAttribute("Name").ToString();
                        leafOneNode.Children = new List<PropertyNodeItem>();

                        secondLevelNode.Children.Add(leafOneNode);
                    }
                    firstLevelNode.Children.Add(secondLevelNode);
                }
                itemList.Add(firstLevelNode);
            }
            reader.Close();
            treeView.ItemsSource = itemList;
        }
    }

}

三个例子运行效果分别是：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

其中第三个例子是从XML文件中读取的数据，XMLProducts.xml文件代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<Products>
  <Node1 Name="董事长">
    <Node2 Name="经理A">
      <Node3 Name="主任1"></Node3>
      <Node3 Name="主任2"></Node3>
      <Node3 Name="主任3"></Node3>
    </Node2>
    <Node2 Name="经理B">
      <Node3 Name="主任1"></Node3>
      <Node3 Name="主任2"></Node3>
      <Node3 Name="主任3"></Node3>
    </Node2>
    <Node2 Name="经理C">
      <Node3 Name="主任1"></Node3>
      <Node3 Name="主任2"></Node3>
      <Node3 Name="主任3"></Node3>
    </Node2>
  </Node1>
  <Node1 Name="处长">
    <Node2 Name="科长A">
      <Node3 Name="科员1"></Node3>
      <Node3 Name="科员2"></Node3>
      <Node3 Name="科员3"></Node3>
    </Node2>
    <Node2 Name="科长B">
      <Node3 Name="科员1"></Node3>
      <Node3 Name="科员2"></Node3>
      <Node3 Name="科员3"></Node3>
    </Node2>
    <Node2 Name="科长C">
      <Node3 Name="科员1"></Node3>
      <Node3 Name="科员2"></Node3>
      <Node3 Name="科员3"></Node3>
    </Node2>
  </Node1>
  <Node1 Name="班长">
    <Node2 Name="组长A">
      <Node3 Name="学生1"></Node3>
      <Node3 Name="学生2"></Node3>
      <Node3 Name="学生3"></Node3>
    </Node2>
    <Node2 Name="组长B">
      <Node3 Name="学生1"></Node3>
      <Node3 Name="学生2"></Node3>
      <Node3 Name="学生3"></Node3>
    </Node2>
    <Node2 Name="组长C">
      <Node3 Name="学生1"></Node3>
      <Node3 Name="学生2"></Node3>
      <Node3 Name="学生3"></Node3>
    </Node2>
  </Node1>
</Products>

XML文件属性如下：
在这里插入图片描述

Danny_hi
关注
  • 5
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wpf mvvm treeview
03-11
样例通过NuGet获取MvvmLight框架，实现了TreeView的加载，节点添加和节点删除功能，仅供参考学习
WPF：树状图分组三种状态，TreeView与CheckBox
YiDabing9的博客
08-03 2875
TreeView与CheckBox父节点和子节点效果图需求说明代码.xaml前台.xaml.cs后台CheckTreeView.cs类 效果图 需求说明 这是一个树状图，要求三种状态：全部选中，对号勾选；全部未选中，勾选框空白；部分选中，部分未选中，勾选框涂黑。 这是加载状态就该显示的，同时，你点击父节点选中，子节点该分组便所有都被选中；父节点为被选中，子节点就为空白。 同理，子节点也是，全部选中子节点，父节点就被勾选；都不选中子节点，父节点就空白；部分选中子节点，父节点就为填黑状态。 数据是从Mysql
WPF之多种视图切换
最新发布
lingxiao16888的博客
05-08 583
// 自定义的显示视图/// ListViewItem数据模板，对应的是ListView的每一项get;set;/// 选中时的背景颜色set;/// 选中时的前景颜色set;/// ListView默认样式资源建，根据此键从Themes文件下资源字典Generic.xaml中获取默认的ListView样式get//根据反射可知只要两个 public ComponentResourceKey(Type typeInTargetAssembly, object resourceId);
WPF 控件专题 TreeView控件详解
^@^lemon tea^@^
11-21 6361
WPF 控件专题 TreeView控件详解
WPF基础五：UI④ 条目控件TreeView
hd51cc的博客
05-01 1125
TreeView 表示一个控件，该控件在树结构（其中的项可以展开和折叠）中显示分层数据。 TreeView为ItemsControl，这意味着它可以包含任何类型的对象的集合 (例如字符串、图像或面板) 。有关更多信息，请参见ItemsControl类。 下图显示了一个简单的TreeView。 TreeView的内容是TreeViewItem，可以包含丰富内容（如Button和Image控件）的控件。TreeViewItem可以包含一个或多个TreeViewIte...
WPF控件之TreeView扩展应用（一）
weixin_45650894的博客
07-17 1037
WPFtreeview扩展应用
WPF 控件 (二十、TreeView)
LyRics1996的博客
04-27 857
【代码】WPF 控件 (二十、TreeView)
TreeView选中节点时，节点高亮显示设置
kenzoh的博客
01-06 484
TreeView选中节点时，节点高亮显示设置
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
关关长语
03-07 2504
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
C#中TreeView树配图片
热门推荐
zy332719794的专栏
06-03 1万+
先上效果： 这是一个TreeView控件的效果。 控件的用法就不多说了，具体参考： http://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.forms.treeview(v=vs.100).aspx 其中，默认是没有图片的，当需要在每一个节点加图片时，首先需要设置图片列表，然后再引用。 具体操作如下：
wpf 带复选框的treeview_bootstrap-treeview 树形菜单带复选框以及级联选择
weixin_39641463的博客
01-30 368
var treeData =[{text:"Parent 1",nodes: [{text:"Child 1",nodes: [{text:"Grandchild 1"}, {text:"Grandchild 2",nodes: [{text:"Grandchild 2-1",nodes: [{text:"Grandchild 2-1-1"}, {text:"Grandchild 2-2-1",}...
wpf 漂亮Treeview 例子（附源码）
03-07
一个wpf 漂亮Treeview 例子,需用VS2008打开
WPF 子选项为CheckBox的TreeView实例
02-09
在WPF实际项目开发的时候，经常会用到带CheckBox的TreeView，虽然微软在WPF的TreeView中没有提供该功能，但是微软在WPF中提供强大的ItemTemplate模板功能和自定义样式，那我们可以自己写一个这样的控件供自己使用。
WPF中TreeView中使用CheckBoxes实例
08-10
在Windows Presentation Foundation (WPF) 中，`TreeView`控件是一个强大的组件，常用于展示层次结构数据。在某些场景下，我们可能希望在`TreeView`中集成`CheckBoxes`，以便用户可以多选节点，例如在模拟文件系统...
WPF-TreeView.zip
05-27
在Windows Presentation Foundation (WPF)中，`TreeView`控件是一个非常重要的组件，用于展示层次化的数据结构。它允许用户以树形视图的形式查看和操作数据，广泛应用于文件系统浏览、组织结构展示、菜单系统等场景...
wpf 漂亮的treeview
10-27
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中创建一个美观且功能丰富的TreeView控件。TreeView是WPF中的一个重要组件，用于展示层次化的数据结构，它允许用户以树形视图来浏览和操作...
在WPF TreeView中显示XML
04-11
在XAML中，我们可以通过HierarchicalDataTemplate来定义数据如何在TreeView中呈现。HierarchicalDataTemplate允许我们指定当数据项被绑定到TreeViewItem时，应该如何显示其内容。 以下是创建一个显示XML数据的WPF ...
WPF 虚线 TreeView
09-17
在Windows Presentation Foundation (WPF) 中，`TreeView`控件是一种常见的用于展示层次结构数据的UI元素。在标准的`TreeView`中，节点之间的连接线通常表现为实线。然而，有时候为了达到特定的设计效果或者增强视觉...
WPF中，Combobox下拉框为Treeview（两层，可多选）
qq_40572871的博客
12-21 966
【代码】WPF中，Combobox下拉框为Treeview（两层，可多选）
wpf treeview中使用checkbox
07-28
在WPF的TreeView中使用Checkbox可以通过几个简单的步骤实现。 首先，在TreeView的节点类中添加一个属性用于绑定Checkbox的状态。例如，可以为节点类添加一个IsSelected属性，用来表示节点是否被选中。 其次，在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值