WPF控件之TreeView扩展应用（三）

已于 2023-02-09 11:27:53 修改
阅读量1.2k 收藏 1
点赞数 3
分类专栏： WPF控件介绍及使用 文章标签： wpf c# treeview
于 2022-08-01 20:21:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650894/article/details/126107573
版权

        这周，来实现某个网友提的一个需求，查询节点，对于这个需求，我首先想到的界面是一个textbox和treeview的组合，关于查询，我想到的就是遍历树嘛，不过遍历树的方法有很多，递归的、非递归的、前、中、后等等，后面我想了想，我在广度优先和深度优先中，选择了广度优先中的非递归，当然，你也可以用其他的，这里我只想挑选一个好理解的方法来实现。

        分析完了，那么，写代码吧，老规矩，还是先看总体项目的结构（看上去内容很多，其实大部分是后续讲的目录树拖动，今天才把demo弄好）

 这次我采用了一些设计模式来实现，所以跟之前的项目有点差别，创建类库后，定义一个接口

    public interface ITreeViewInterface
    {
        void Add(object obj);

        void Delete(object obj);

        void Update(string str);

        void Search(string str);

        void Select(object obj);
    }

下一步是界面的搭建，如图，三行的简单布局，一个按钮，一个textbox和一个TreeView的组合

 继续，开始创建对象，先来创建一个基类，如图（BindableObject，我就不介绍了，我这给出代码，不懂的去看我之前的）

    public class BindableObject : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;

        public void OnPropertyChanged([CallerMemberName]string propertyName = null)
        {
            PropertyChanged?.Invoke( this, new PropertyChangedEventArgs( propertyName ) );
        }
    }
    public abstract class BaseModel : BindableObject
    {
        public abstract Guid Id { get; set; }

        public abstract string Name { get; set; }
    }

接下来让目录树对象继承基类，如图（只截了部分，太长了）

 public class TreeViewModel : BaseModel
    {
        private Guid id;

        public override Guid Id
        {
            get => id;
            set
            {
                id = value;
                OnPropertyChanged();
            }
        }

        private string name;

        public override string Name
        {
            get => name;
            set
            {
                name = value;
                OnPropertyChanged();
            }
        }

        private Visibility isTextBoxVisibility = Visibility.Hidden;
        /// <summary>
        /// 右键显示隐藏
        /// </summary>
        public Visibility IsTextBoxVisibility
        {
            get => isTextBoxVisibility;
            set
            {
                isTextBoxVisibility = value;
                OnPropertyChanged();
            }
        }

        private Visibility isNodeVisibility = Visibility.Visible;
        /// <summary>
        /// 查询后节点显示隐藏
        /// </summary>
        public Visibility IsNodeVisibility
        {
            get => isNodeVisibility;
            set
            {
                isNodeVisibility = value;
                OnPropertyChanged();
            }
        }

        public TreeViewModel Parent { get; set; }

        public ObservableCollection<TreeViewModel> Children { get; set; } = new ObservableCollection<TreeViewModel>();

        public static TreeViewModel CreateModel()
        {
            TreeViewModel tree = new TreeViewModel()
            {
                Name="哈哈哈"
            };
            for (int i = 0; i < 3; i++)
            {
                TreeViewModel treeViewModel = new TreeViewModel()
                {
                    Id = Guid.NewGuid(),
                    Name = $"{i}",
                };
                for (int j = 0; j < 5; j++)
                {
                    treeViewModel.Children.Add(new TreeViewModel()
                    {
                        Id = Guid.NewGuid(),
                        Name = $"{i}_{j}",
                        Parent = treeViewModel,
                    });
                }
                tree.Children.Add(treeViewModel);
            }
            return tree;
        }

我把初始化树的方法放在了目录树类里，让它本身有个方法自我初始化。

        进军ViewModel，如图，拿到我们刚才定义的接口， 分别创建增、删、改、查已经选择节点的命令和方法（选择的方法主要用于右键重命名）（DelegateCommand不多说了）

          public class MainViewModel
    {
        private readonly ITreeViewInterface @interface;

        #region 命令
        public DelegateCommand<BaseModel> AddCommand { get; set; }
        public DelegateCommand<BaseModel> DeleteCommand { get; set; }
        public DelegateCommand<string> UpdateCommand { get; set; }
        public DelegateCommand<string> SearchCommand { get; set; }
        public DelegateCommand<BaseModel> SelectCommand { get; set; }
        #endregion

        public MainViewModel(ITreeViewInterface @interface)
        {
            this.@interface = @interface;
            AddCommand = new DelegateCommand<BaseModel>(Add);
            DeleteCommand = new DelegateCommand<BaseModel>(Delete);
            UpdateCommand = new DelegateCommand<string>(Update);
            SearchCommand = new DelegateCommand<string>(Search);
            SelectCommand = new DelegateCommand<BaseModel>(Select);
        }

        private void Add(BaseModel obj)
        {
            @interface.Add(obj);
        }

        private void Delete(BaseModel obj)
        {
            @interface.Delete(obj);
        }

        private void Update(string str)
        {
            @interface.Update(str);
        }

        private void Search(string str)
        {
            @interface.Search(str);
        }

        private void Select(BaseModel obj)
        {
            @interface.Select(obj);
        }
    }

 然后，创建一个管理者——TreeViewManager，让它继承接口，如图

    public class TreeViewManager : ITreeViewInterface
    {

        private static TreeViewModel _currentTree;
        /// <summary>
        /// 目录树
        /// </summary>
        public static TreeViewModel CurrentTree
        {
            get => _currentTree;
            set
            {
                _currentTree = value;
                OnCurrentProjectChanged();
            }
        }

        public static event EventHandler CurrentProjectChanged;
        /// <summary>
        /// 通知更新
        /// </summary>
        public static void OnCurrentProjectChanged()
        {
            CurrentProjectChanged?.Invoke(CurrentTree, new EventArgs());
        }

        private TreeViewModel searchModel;

        /// <summary>
        /// 初始化
        /// </summary>
        public static void CreateTree()
        {
            CurrentTree = TreeViewModel.CreateModel();
        }

        /// <summary>
        /// 添加
        /// </summary>
        /// <param name="obj"></param>
        public void Add(object obj)
        {
            if (obj == null)
            {
                AddRoot();
                return;
            }

            GetTreeModel(obj);

            AddChild();
        }

        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="obj"></param>
        public void Delete(object obj)
        {
            GetTreeModel(obj);
            if (searchModel.Parent == null)
            {
                CurrentTree.Children.Remove(searchModel);
            }
            else
            {
                searchModel.Parent.Children.Remove(searchModel);
            }

        }

        /// <summary>
        /// 更新
        /// </summary>
        /// <param name="str"></param>
        public void Update(string str)
        {
            searchModel.Name = str;
            searchModel.IsTextBoxVisibility = System.Windows.Visibility.Hidden;
        }

        /// <summary>
        /// 查询
        /// </summary>
        /// <param name="str"></param>
        public void Search(string str)
        {
            if (str == "" || str == null)
            {
                CurrentTree.Children.ToList().ForEach(x =>
                {
                    x.BFSTraverseTree((item) =>
                    {
                        item.IsNodeVisibility = System.Windows.Visibility.Visible;
                    });
                });
                return;
            }

            CurrentTree.Children.ToList().ForEach(x =>
            {
                x.BFSTraverseTree((item) =>
                {
                    // 中文包含
                    if (item.Name.Contains(str))
                    {
                        ShowSearchResult(item);
                    }
                    else
                    {
                        item.IsNodeVisibility = System.Windows.Visibility.Collapsed;
                    }
                });
            });
        }

        /// <summary>
        /// 右键重命名显示选择的的节点
        /// </summary>
        /// <param name="obj"></param>
        public void Select(object obj)
        {
            GetTreeModel(obj);
            searchModel.IsTextBoxVisibility = System.Windows.Visibility.Visible;
        }

        /// <summary>
        /// 添加根节点
        /// </summary>
        private void AddRoot()
        {
            CurrentTree.Children.Add(new TreeViewModel()
            {
                Id = Guid.NewGuid(),
                Name = $"{CurrentTree.Children.Count}"
            });
        }

        /// <summary>
        /// 添加子节点
        /// </summary>
        private void AddChild()
        {
            searchModel.Children.Add(new TreeViewModel()
            {
                Id = Guid.NewGuid(),
                Name = $"{searchModel.Name}_{searchModel.Children.Count}",
                Parent = searchModel
            });
        }

        /// <summary>
        /// 递归变量目录树
        /// </summary>
        /// <param name="model"></param>
        /// <param name="guid"></param>
        /// <returns></returns>
        private TreeViewModel TraversalTree(TreeViewModel model, Guid guid)
        {
            foreach (var item in model.Children)
            {
                if (item.Id == guid)
                {
                    searchModel = item;
                    return searchModel;
                }
                TraversalTree(item, guid);
            }
            return null;
        }

        /// <summary>
        /// 获取选择的节点
        /// </summary>
        /// <param name="obj"></param>
        private void GetTreeModel(object obj)
        {
            var baseResult = obj as BaseModel;

            TraversalTree(CurrentTree, baseResult.Id);
        }

        /// <summary>
        /// 显示查询的结果
        /// </summary>
        /// <param name="model"></param>
        private void ShowSearchResult(TreeViewModel model)
        {
            if (model.Parent != null)
            {
                model.Parent.IsNodeVisibility = System.Windows.Visibility.Visible;
                model.IsNodeVisibility = System.Windows.Visibility.Visible;
                ShowSearchResult(model.Parent);
            }
            else
            {
                model.IsNodeVisibility = System.Windows.Visibility.Visible;
            }
        }

    }

 接着为treeviewmodel类创建一个扩展方法——BFSTraverseTree，如图

    public static class TreeViewCommon
    {
        /// <summary>
        /// 非递归广度优先遍历树
        /// </summary>
        /// <param name="item"></param>
        /// <param name="action"></param>
        public static void BFSTraverseTree(this TreeViewModel item, Action<TreeViewModel> action)
        {
            Queue<TreeViewModel> queue = new Queue<TreeViewModel>();
            queue.Enqueue(item);
            while (queue.Count > 0)
            {
                var curItem = queue.Dequeue();
                action(curItem);
                foreach (var subItem in curItem.Children)
                {
                    queue.Enqueue(subItem);
                }
            }
        }
    }

关于Queue，官方给了很好的介绍，这里我就大致说下它的作用就是把目录树放到等待队列里面，当我们查询的时候，会直接在这个队列里查询(Queue),

 接着，去完善viewmodel，添加如下代码

        public TreeViewModel TreeModel => TreeViewManager.CurrentTree;

            TreeViewManager.CreateTree();

那么，开始绑定界面把，如图，在界面的cs文件中，绑定数据源，用依赖注入的方法

    <Window.Resources>

        <ContextMenu x:Key="menu">
            <MenuItem
                Command="{Binding DataContext.AddCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}"
                CommandParameter="{Binding}"
                Header="添加子节点" />
            <MenuItem
                Command="{Binding DataContext.DeleteCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}"
                CommandParameter="{Binding}"
                Header="删除节点" />
            <MenuItem
                Command="{Binding DataContext.SelectCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}"
                CommandParameter="{Binding}"
                Header="修改节点" />
        </ContextMenu>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="40" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Margin="5" Orientation="Horizontal">
            <Button
                Width="100"
                Height="30"
                Command="{Binding AddCommand}"
                Content="添加" />

        </StackPanel>

        <TextBox
            x:Name="search"
            Grid.Row="1"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="TextChanged">
                    <i:InvokeCommandAction Command="{Binding DataContext.SearchCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" CommandParameter="{Binding ElementName=search, Path=Text}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </TextBox>

        <TreeView
            x:Name="treeView"
            Grid.Row="2"
            AllowDrop="True"
            ItemsSource="{Binding TreeModel.Children}">
            <TreeView.Resources>
                <Style TargetType="TreeViewItem">
                    <Setter Property="ContextMenu" Value="{StaticResource menu}" />
                    <Setter Property="Visibility" Value="{Binding IsNodeVisibility}" />
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="SkyBlue" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TreeView.Resources>
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <Grid>
                        <TextBox
                            x:Name="textBox"
                            Text="{Binding Name}"
                            Visibility="{Binding IsTextBoxVisibility}">
                            <TextBox.InputBindings>
                                <KeyBinding
                                    Key="Enter"
                                    Command="{Binding DataContext.UpdateCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}"
                                    CommandParameter="{Binding ElementName=textBox, Path=Text}" />
                            </TextBox.InputBindings>
                        </TextBox>
                        <TextBlock Text="{Binding Name}" />
                    </Grid>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>

            this.DataContext = new MainViewModel(new TreeViewManager());

运行测试，如图

右侧修改发现显示不清楚，是因为同时显示了textbox和textblock，所以它俩只能显示一个，添加一个转换器，如图， 

 

    public class VisibilityToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if ((Visibility)value == Visibility.Visible)
            {
                return Visibility.Collapsed;
            }
            return Visibility.Visible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

在界面添加引用后，在textblock添加如图代码

 再次运行测试，

没有问题了。

讨论

        这次的案例，因为只是查询，没有要求怎么查询，所有并没有添加规则，有就有，没有就没有，这是本次案例的规则。

        在编写的过程中，我过用不同的方式查询，采取什么方式，看自己对那种方式更好理解吧，

        这次是把之前的增删改做了一次优化，这次的代码更加通俗易懂

代码地址:https://github.com/TQtong/TreeView.git

结束

        好了，这次就到这了，欢迎各位批评指正，谢谢啦

Тан Их
关注
专栏目录
wpf基于TreeView控件的Demo
09-17
WPF中基于TreeView控件的简单图片查看Demo，包含TreeView简单运用及遍历根目录下的文件。
WPF应用基础篇---TreeView
weixin_30933531的博客
07-31 462
　　1.前言 　　最近有部分朋友经常问我，WPF的TreeView控件，如何用MVVM来实现绑定和显示？所以写下了这篇WPF应用基础篇---TreeView. 　2.介绍 案例浏览： 　　　　 　　　　　　　　　　　　　　　　　　图 1-1（案例结构图） 目的：本文中做了三个简单的Demo给刚刚入门或者入门不久而且不熟悉TreeView控件在MVVM中具体实现的朋友们...
Element-Tree-Line 使用指南
最新发布
gitblog_00715的博客
09-12 468
Element-Tree-Line 使用指南 element-tree-line 给element-ui和element-plus的el-tree组件添加结构线的子组件 项目地址: https://gitcode.com/gh_m...
WPF —— TreeView树形控件
一个新人博客，愿多多支持。
04-01 2337
TreeView 表示一个控件，该控件在树结构（其中的项可以展开和折叠）中显示分层数据。TreeView 是一个 ItemsControl，这意味着它可以包含任何类型的对象的集合 (，例如字符串、图像或面板)。
wpf treeview
alohaCPP的专栏
11-02 2794
首先一个简单的Demo 如果这实现这个Demo呢？我们从MVC三个方面入手： TreeView的View 在WPF的TreeView，你可以定制每个节点的显示方式，包括为一个节点添加多个图标，这些都只需要在XAML中配置，而不必留下复杂的C#代码。例如： 1: TreeView Name="tvProperties" Width="250" Paddi
WPF遍历TreeView
breakbridge的博客
09-08 994
TreeView TreeView中的Item有两种选择，要么是TreeViewItem，要么不是TreeViewItem。只有在TreeViewItem中才能继续添加元素，以此往复。 TreeViewItem中IsExpanded表示是否展开，IsSelected表示是否选中。 通过下述方法可以将TreeView所有项展开或者收起： private static void ExpandAllItems(ItemsControl control, bool isExpande...
WPF Combox+treeview以及 datagried+treeview控件
01-07
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中使用自定义的`Combobox+TreeView`和`DataGrid+TreeView`控件来处理大规模数据。这些控件是WPF开发中的重要组成部分，特别是在构建用户界面...
wpf 漂亮的treeview
10-27
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中创建一个美观且功能丰富的TreeView控件。TreeView是WPF中的一个重要组件，用于展示层次化的数据结构，它允许用户以树形视图来浏览和操作...
WPF TreeView控件样式
03-28
在Windows Presentation Foundation (WPF) 中，TreeView是一个强大的控件，用于展示层次结构的数据。它允许用户通过可扩展的节点来浏览数据，这些节点可以展开或折叠，为用户提供了一种直观的方式来探索复杂的信息...
C# wpf combobox带treeview的自定义控件示例源码
07-14
在C# WPF开发中，有时我们可能需要创建更加复杂且功能丰富的用户界面...通过这个示例源码，开发者可以学习到如何扩展WPF的基础控件，以满足更复杂的应用需求。这不仅提升了用户体验，也增强了应用的功能性和可维护性。
WPF具有多选功能的TreeListView控件
10-24
在Windows Presentation Foundation（WPF）框架中，TreeListView是一个非常有用的控件，它结合了TreeView的层级结构和ListView的数据展示能力，允许用户以列表形式查看层次数据。在这个特定的主题中，我们将探讨如何...
wpf TreeView控件基本操作
11-19
wpf TreeView控件基本操作，如何在Xaml代码中添加，及在Cs文件中用代码添加
WPF TreeView简单使用源码实例
11-10
简单易懂的WPF代码实例，绑定树控件。如果要实现复杂功能，只需在此基础上修改。
WPF 虚线 TreeView
09-17
WPF自定义样式Treeview，带有虚线。
【WPF应用35】深度解析WPF中的TreeView控件：功能、用法、特性与最佳实践
qq_35320456的博客
04-05 4686
深度解析WPF中的TreeView控件：功能、用法、特性与最佳实践
WPF 控件专题 TreeView控件详解
^@^lemon tea^@^
11-21 6534
WPF 控件专题 TreeView控件详解
WPF中的TreeView
weixin_57726973的博客
11-29 686
如果你曾经使用过WinForms中的TreeView，你可能认为TreeView是一种容易使用但很难自定义的控件。在WPF中，情况有点不同，至少对新手来说，它上手有一些复杂，但是自定义却简单得多。就像其他WPF控件一样，TreeView一开始看起来完全没有样式，但是你可以轻易地为它创造样式。 在XAML结构化文件中，可以看到TreeView的ItemTemplate具有一个HierarchicalDataTemplate。通过设置这个模板的ItemsSource属性，我指示它使用Items属性来查找子元素
WPF树形控件TreeView使用介绍
琅嬛福地
11-22 1172
WPF 中的TreeView控件用于显示层次结构数据。它是由可展开和可折叠的节点组成的，这些节点可以无限嵌套以表示数据的层次。以下是一些与TreeView和。
WPF中TreeView的使用
热门推荐
码农
10-10 1万+
不管是在窗体程序开发还是在web应用程序开发中，大家都知道树这个控件，并且都称为TreeView，这个控件将内容分层展示，使其更加形象和直观！同时呢，TreeView在很多项目中都有运用，甚至某些公司做自定义的属性控件，当然了，我在此就和大家一起分享一下WPF中系统预设的Tree
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值