WPF之TreeView的使用（MVVM）

WPF之TreeView的使用（MVVM）

1.自定义分层和子项

使用HierarchicalDataTemplate定义数据层级,使用dataTemplate定义子项数据

        <TreeView ItemsSource="{Binding TreeNodes}">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type local:FolderNode}" ItemsSource="{Binding ChildrenItems}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>
                <DataTemplate DataType="{x:Type local:NodeBase}">
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </TreeView.Resources>
        </TreeView>

2.定义数据结构让子项和分层可以在同一级

数据机构方面，为了使子项和数据项可以放在一起，需要定一个基类来让集合可以接收两种数据

public partial class NodeBase : ObservableObject
{
    [ObservableProperty]
    private string _name;

    [ObservableProperty]
    private string _path;
}

public partial class FolderNode : NodeBase
{
    [ObservableProperty]
    private string _folderDes;

    [ObservableProperty]
    private List<NodeBase> _childrenItems = [];
}

public partial class FileItem : NodeBase
{
    [ObservableProperty]
    public string fileSize;
}

在viewModel中定义一个数据集合，绑定到view中

    public partial class MainWindowViewModel : ObservableObject
    {
        [ObservableProperty]
        private List<NodeBase> _treeNodes = [];

        public MainWindowViewModel()
        {
            TreeNodes.Add(new FolderNode
            {
                Name = "Root",
                ChildrenItems = new List<NodeBase>
                ([
                   new FileItem { Name="张三" },
                   new FileItem { Name="王五" },
                   new FolderNode{ Name = "floder 1",ChildrenItems = new List<NodeBase>{ new FileItem{ Name = "万方"} } }
                ])
            });
            TreeNodes.Add(new FileItem
            {
                Name = "file 1"
            });
        }
    }

结合上面的xaml，效果如图

‍