WPF中TreeView的使用

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>

效果:
WPF中TreeView的使用_第1张图片
二、获取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>

运行效果:
WPF中TreeView的使用_第2张图片
三、使用数据绑定来来展示节点,这里在一个程序中,用三个函数举了三个例子,如下:
首先新建一个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
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    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;
        }
    }

}

三个例子运行效果分别是:
WPF中TreeView的使用_第3张图片
WPF中TreeView的使用_第4张图片
WPF中TreeView的使用_第5张图片

其中第三个例子是从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文件属性如下:
WPF中TreeView的使用_第6张图片

你可能感兴趣的:(WPF)