如何使用TreeView实现展示文件目录树（基于C#的MVVM模式）

原创 已于 2023-12-07 11:30:57 修改 · 2k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#c# #开发语言 #visual studio #git #windows #visualstudio

于 2023-12-06 22:10:04 首次发布

Hello,大家好

这里是失踪回归人口小杨同学

由于最近到了一个新的公司，学习了新的技术，在学习的过程中遇到了一个我认为值得记录的问题，就放在这里供大家参考参考吧。我希望能帮助到刚开始学习C#的小白朋友们，当然如果有问题也请大佬帮我指出来，我会认真倾听并改正的，嘻嘻嘻。

接下来进入正题

是这样子的，老师给我的需求是需要我用WPF做一个应用程序可以实现从电脑文件选择一个文件夹显示在程序上然后客户选择所需要的文件进行上传。

这里的话我先分享其中的一步，即如何使用TreeView实现展示文件目录树

第一步，打开VS2022，创建一个项目

我们需要一个WPF应用（.NET Framework）可以在上方搜索框搜索找到

第二步，按照这个目录创建文件夹以及创建类

每个类的代码如下

DelegateCommand.cs

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

namespace TestTreeview.Command
{
    public class DelegateCommand<T> : ICommand
    {
        private readonly Action<T> _execute;
        private readonly Func<T, bool> _canExecute;
        private TreeViewModel treeViewModel;

        

        public DelegateCommand(Action<T> execute, Func<T, bool> canExecute = null)
        {
            if (execute == null)
                throw new ArgumentNullException(nameof(execute));

            _execute = execute;
            _canExecute = canExecute;
        }

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return _canExecute == null || _canExecute((T)parameter);
        }

        public void Execute(object parameter)
        {
            _execute((T)parameter);
        }

    }

    public class DelegateCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Func<bool> _canExecute;
        private DelegateCommand ensure;
        private Action<Window> cancel;

        public DelegateCommand(DelegateCommand ensure)
        {
            this.ensure = ensure;
        }

        public DelegateCommand(Action<Window> cancel)
        {
            this.cancel = cancel;
        }

        public DelegateCommand(Action execute, Func<bool> canExecute = null)
        {
            if (execute == null)
                throw new ArgumentNullException(nameof(execute));

            _execute = execute;
            _canExecute = canExecute;
        }

        public virtual event EventHandler CanExecuteChanged;

        public virtual bool CanExecute(object parameter = null)
        {
            return _canExecute == null || _canExecute();
        }

        public virtual void Execute(object parameter = null)
        {
            _execute();
        }

    }
}

Images用来存放图片

我一般喜欢去阿里的图标库找需要的icon

阿里巴巴矢量图标库icon-default.png?t=N7T8https://www.iconfont.cn/

BaseViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace TestTreeview
{
    internal class BaseViewModel :  ObservableObject, INotifyPropertyChanged
    {

		public void RaisePropertyChanged([CallerMemberName] string property ="")
		{
			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
		}

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

TreeViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Forms;

namespace TestTreeview
{

    
    internal class TreeViewModel:BaseViewModel
    {
		private string _name;

		public string Name
		{
			get { return _name; }
			set { _name = value; RaisePropertyChanged(); }
		}


        bool _isSelected;
        public virtual bool IsSelected
        {
            get { return _isSelected; }
            set
            {
                SetProperty<bool>(ref _isSelected, value);
            }
        }

        TreeNode _node;
        
        

        private string _path;

		public string Path
		{
			get { return _path; }
			set { _path = value; RaisePropertyChanged(); }
		}

		private string _imgPath;

		public string ImgPath
		{
			get { return _imgPath; }
			set { _imgPath = value; }
		}

        public TreeViewModel Parent;

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

        public IDisposable Subscribe(IObserver<TreeNode> observer)
        {
            throw new NotImplementedException();
        }
    }
}

MainWindow.xaml

<Window x:Class="TestTreeview.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:TestTreeview"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto" ></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="270"></ColumnDefinition>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <GroupBox Grid.Column="0" Grid.RowSpan="3" Margin="0 0 0 40 ">
            
        <TreeView   ItemsSource="{Binding RootModel.Children}">

            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:TreeViewModel}" ItemsSource="{Binding Children}">
                        <!--<CheckBox IsChecked="{Binding IsSelected}" Name="Nodes">-->
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding ImgPath}" Width="16" Height="16"/>
                        <CheckBox Content="{Binding Name}">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Click">
                                    <i:InvokeCommandAction Command="{Binding DataContext.ClickCommand,RelativeSource={RelativeSource AncestorType=Window,Mode=FindAncestor}}" CommandParameter="{Binding}"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </CheckBox>
                                
                     </StackPanel>
                            
                        <!--</CheckBox>-->
                    </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
        </GroupBox>
        <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="2" Margin="180 10 10 10">
        <Button Content="选择文件夹" Width="70" Height="20"  Click="Button_Click" Command="{Binding GetFileCommand}" Margin="10 0 20 0"></Button>
        <Button Content="确认选择" Width="70" Height="20" ></Button>
        </StackPanel>
        <GroupBox Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="2" Margin="0 0 0 40">
            <ListBox>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock></TextBlock>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </GroupBox>
    </Grid>
</Window>

MainViewModel.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Forms;
using System.Xml.Linq;
using TestTreeview.Command;


namespace TestTreeview
{
    internal class MainViewModel:BaseViewModel
    {
        
		private TreeViewModel _rootModel;

		public TreeViewModel RootModel
		{
			get { return _rootModel; }
			set { _rootModel = value; RaisePropertyChanged(); }
		}
       
        public DelegateCommand<TreeViewModel> GetFileCommand { get; set; }
        public DelegateCommand<TreeViewModel> ClickCommand { get; set; }
        public List<TreeViewModel> SelectItem { get; set; } = new List<TreeViewModel>();

        public MainViewModel()
		{

			GetFileCommand = new DelegateCommand<TreeViewModel>(GetFile);
            

        }

        

        

        public void GetFile(TreeViewModel parent = null)
		{
            System.Windows.Forms.FolderBrowserDialog ofd = new System.Windows.Forms.FolderBrowserDialog();
            if (ofd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                //System.Windows.MessageBox.Show(ofd.SelectedPath);
                RootModel = new TreeViewModel();
                RootModel.Path = ofd.SelectedPath;
                RootModel.Name = ofd.SelectedPath;
                RootModel = LoadData(RootModel);

                
                
            }
            
        }

       
        //递归获取文件夹及其子目录下的文件
		public TreeViewModel LoadData(TreeViewModel parent = null)
		{
			
			DirectoryInfo directoryInfo = new DirectoryInfo(parent.Path);
			var ds = directoryInfo.GetDirectories();
            
            foreach (var  d in ds)
            {
				TreeViewModel sub = new TreeViewModel() {Path = d.FullName,Name = d.Name };
                
				if (d.Exists)

				{
					sub.ImgPath = "/Images/folder.png";
                    
				}
                
                
				var result = LoadData(sub);
                parent.Children.Add(result);
                
                
            }
            
            var fs = directoryInfo.GetFiles();
            foreach (var fileInfo in fs)
            {
				TreeViewModel file = new TreeViewModel() { Path = fileInfo.FullName, Name = fileInfo.Name };
                
                if (fileInfo.Name.Contains(".docx"))
				{
					file.ImgPath = "/Images/file_word.png";
				}else if (fileInfo.Name.Contains(".xlsx"))
				{
					file.ImgPath = "/Images/file_excel.png";
				}
                else if (fileInfo.Name.Contains(".ppt"))
                {
                    file.ImgPath = "/Images/file_ppt.png";
                }
                else if (fileInfo.Name.Contains(".pdf"))
                {
                    file.ImgPath = "/Images/file_pdf.png";
                }
                else if (fileInfo.Name.Contains(".txt"))
                {
                    file.ImgPath = "/Images/file_txt.png";
                }
                else if (fileInfo.Name.Contains(".rar")|| fileInfo.Name.Contains(".zip"))
                {
                    file.ImgPath = "/Images/file_zip.png";
                }
                else if (fileInfo.Name.Contains(".jpg"))
                {
                    file.ImgPath = "/Images/file_img.png";
                }
                else if (fileInfo.Name.Contains(".html"))
                {
                    file.ImgPath = "/Images/file_html.png";
                }
                else if (fileInfo.Name.Contains(".png"))
                {
                    file.ImgPath = "/Images/png.png";
                }
                else if (fileInfo.Name.Contains(".gif"))
                {
                    file.ImgPath = "/Images/gif.png";
                }
                
                parent.Children.Add(file);
                
            }
			return parent;
        }


        

    }
}

然后运行就好啦

运行结果如下

首先选择选择文件夹，选择你想要打开的目录

这里我放创建了一个测试的文件夹放在F盘的

打开后是这个样子

里面还有一些文件

还有一些功能没有做完，等我做完再给你们更新吧~

希望能帮到你们^ - ^

LINchuana
关注
WPF TreeView 数据绑定完全指南：MVVM 模式实现
若汝棋茗 的博客
06-23 1500
分层结构设计：将业务逻辑、数据模型和视图清晰分离双向绑定：及时同步 UI 状态与数据模型异步加载：大型树结构使用延迟加载提升性能虚拟化支持：处理大量节点时开启 UI 虚拟化命令模式：使用 ICommand 实现 UI 操作解耦模板选择器：复杂场景下可使用 TemplateSelector 实现动态模板切换通过以上实现方法和最佳实践，您可以创建出响应式、可维护的树形界面，充分发挥 WPF 数据绑定的强大功能。
WPF 项目开发入门（四） MVVM 模式 与 TreeView树组件
zhtbs的博客
08-02 5212
MVVM 模式 与 TreeView树组件
WPF入门实例——WPF目录树实例
09-10
学习WPF目录树很好的例子，对初学都很有帮助
C#Winform读取文件夹下面的所有文件夹和文件显示到TreeView中
redredredlu的专栏
03-26 4093
rt private void Form1_Load(object sender, EventArgs e)         {             PaintTreeView(this.treeView1, "C:\\Users\\Hello\\Documents\\Visual Studio 2010\\WebSites\\WebSite1\\Templates");  
新手入门WPF之TreeView控件（一）
热门推荐
weixin_45650894的博客
01-15 1万+
WPF中TreeView实现
WPF 控件 (二十、TreeView)
LyRics1996的博客
04-27 1195
【代码】WPF 控件 (二十、TreeView)
Wpf TreeView控件路径下显示文件和文件夹
04-12
控件显示某个文件夹下的文件夹和DWG文件，文件和文件夹前加图标，文件夹图标有打开和关闭状态显示，是自己开发过程中的测试代码。
C#中使用treeview显示目录和文件的demo
11-30
C#中使用treeview显示目录和文件的demo 运行前请先在D盘下新建目录 treetest ，然后在 treetest 下新建一些目录和文件，可以创建多级目录。
WPF与C# MVVM模式下的TreeView联动实现教程
## 知识点详细说明 ### WPF 概述 WPF（Windows Presentation Foundation）是微软公司推出的一种用于...希望这些知识点能够帮助理解如何在WPF中使用C#来实现TreeView的联动功能，并深入了解MVVM设计模式在其中的应用。
树目录文件浏览器_C#_文件浏览器_
09-29
可以使用ListView控件的不同视图模式（如详细信息、小图标等）来展示文件信息。 5. **文件操作**：文件浏览器还可能包括读取、复制、移动和删除文件的选项。这涉及到File和FileInfo类，以及相关的文件操作方法，如...
C# 系统应用之TreeView控件显示树状磁盘路径并在ListView显示文件
03-14
资源主要是结合博客文章:http://blog.youkuaiyun.com/eastmount/article/details/21241313主要讲述使用C# winForm实现类似于资源管理器的界面,通过TreeView控件显示"我的电脑"所有磁盘文件树状目录,并点击结点文件夹能在右边的ListView中显示文件夹中所有文件信息（名称、大小、类型）.希望对大家有所帮组.采用VS2012开发,VS2012一下可能会运行出错.代码含详细注释.
WPF C# treeview应用（很多功能，可作为目录结构）
10-29
自己做的wpf treeview，可以用作目录结构，包含增删功能，主要技术是父节点和子节点的关联和互相调用，绝对不坑
获取Ftp目录树并绑定到treeview
06-07
在WPF中，可能需要使用MVVM模式，通过绑定`ObservableCollection<FtpNode>`到TreeView的`ItemsSource`属性。记得为每个节点设置`Header`属性（显示的目录名）和`Tag`属性（存储FTP路径）。 提供的`FtpTree`可能是一...
用TreeView显示某一文件夹下的所有目录和文件
weixin_34146805的博客
09-03 727
网络上居然找不到现成的代码,特此补充一篇. 关键字:TreeView,asp.net2.0,c#,文件,目录 public partial class Admin_FileList_Test : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {         if...
使用TreeView实现文件目录树的展示（基于C#MVVM）第二版！
LINchuana的博客
12-19 1567
这部分是使用TreeView展示文件目录树的模块，后续还会有文件的选择、选择文件展示文件详细信息、上传报告等模块，感兴趣的话可以搬个凳子占个位方便查看~
C# treeView展示目录树
u012408847的博客
09-19 6422
使用treeView控件展示目录树列表，并进行一系列的操作。 代码： using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using ...
TreeView控件下显示路径下所有文件和文件夹
韬光养晦
09-25 1819
本文主要介绍两个自定义函数，实现的功能是遍历路径下文件和文件夹并显示在TreeView控件中。 首先添加命名空间： using System.Windows.Forms; using System.IO; 函数代码如下： private void PaintTreeView(TreeView treeView, string fullPath) { try ...
C#树目录（treeView）的编写
a2564753772的博客
08-29 385
1，数据库（DAL层）编写 （1）模板的编写 public class CategoryModel{ public int _CategoryID { get; set; } public string _CategoryName { get; set; } public string _CategoryPy {...
C#种更高级的文件处理
最新发布
wuguaniiiiii的博客
12-25 393
缓存区存储对象，特点读取速度比较快，也需要包装其他文件流（FileStream）读取只有这一个类。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值