Avalonia Learning Practice (5)--Tree Structure Realization

As a common form of expression in application development, tree control can also be implemented in Avalonia. Below is a specific example in the MVVM mode to read all subdirectories and files in a specific directory.


1. Create a tree data structure

Define a regular tree node data structure in the Model layer.

    public class TreeNode
    {
    
    
        public string NodeName {
    
     get; set; }
        public string Tag {
    
     get; set; }
        public TreeNode Parent {
    
     get; set; }
        public ObservableCollection<TreeNode> Children {
    
     get; set; }
    }

Since the MVVM pattern is used, the collection type directly uses ObservableCollection.
In order to meet the requirements mentioned at the beginning, it is possible to display the number of all subdirectories and files in a specific directory, and further modify the data structure.

    public class DirectoryTreeNode
    {
    
    
        public string NodeName {
    
     get; set; }
        public string Tag {
    
     get; set; }
        public DirectoryTreeNode Parent {
    
     get; set; }
        public int FolderNum {
    
     get; set; } //文件夹数量
        public int FileNum {
    
     get; set; } //文件数量
        public ObservableCollection<DirectoryTreeNode> Children {
    
     get; set; }
    }

2. Define the tree control

Define the tree control in the View layer and bind the corresponding ViewModel

   <TreeView Items="{Binding FolderItems}">
     <TreeView.ItemTemplate>
       <TreeDataTemplate ItemsSource="{Binding Children}">
         <WrapPanel HorizontalAlignment="Left" VerticalAlignment="Center">
           <TextBlock Text="{Binding NodeName}"/>
           <TextBlock>[子目录:</TextBlock>
           <TextBlock Text="{Binding FolderNum}"></TextBlock>
           <TextBlock>,文件:</TextBlock>
           <TextBlock Text="{Binding FileNum}"></TextBlock>
           <TextBlock>]</TextBlock>
         </WrapPanel>
       </TreeDataTemplate>
     </TreeView.ItemTemplate>
   </TreeView>

The data source bound to the ViewModel layer is:

   private ObservableCollection<DirectoryTreeNode> _folderItems;
   public ObservableCollection<DirectoryTreeNode> FolderItems 
   {
    
     
       get {
    
     return _folderItems; }
       set => this.RaiseAndSetIfChanged(ref _folderItems, value);
   }

3. Load update data

Construct and update the data source at the ViewModel layer, and use the relevant API in System.IO to recursively read all subdirectories and files under the specified root directory.

   private void SearchFolder()
   {
    
    
       FolderItems.Clear();
       FolderItems = GetFolderNodes("根目录完整路径");
   }

   private ObservableCollection<DirectoryTreeNode> GetFolderNodes(string path)
   {
    
    
       ObservableCollection<DirectoryTreeNode> folderNodes = new ObservableCollection<DirectoryTreeNode>();
       if (!Directory.Exists(path))
       {
    
    
           return folderNodes;
       }
       DirectoryInfo dirInfo = new DirectoryInfo(path);
       DirectoryInfo[] dirs = dirInfo.GetDirectories();
       foreach (DirectoryInfo dir in dirs)
       {
    
    
           DirectoryTreeNode node = new DirectoryTreeNode();
           node.NodeName=dir.Name;
           node.Tag = dir.FullName;
           node.Children=GetFolderNodes(dir.FullName);
           node.FolderNum = node.Children.Count;
           FileInfo[] files = dirInfo.GetFiles();
           node.FileNum = files.Length;
           folderNodes.Add(node);
       }
       return folderNodes;
   }

4. Effect display

insert image description here


The code cannot stop, and the learning cannot be interrupted.

Guess you like

Origin blog.csdn.net/lordwish/article/details/127498341