Avalonia 动态树视图 MVVM答案

【问题标题】：Avalonia Dynamic Tree View MVVMAvalonia 动态树视图 MVVM
【发布时间】：2021-03-07 01:37:54
【问题描述】：

在阿瓦隆尼亚，我想创建一个文件树视图。当我写作时

      <TreeView Height="500" Background="Red" >
        <TreeViewItem Header="h0">
          <TreeViewItem Header="h11"></TreeViewItem>

        </TreeViewItem>
        <TreeViewItem Header="h1"></TreeViewItem>

      </TreeView>

它可以工作，但很明显，它是静态的。

我试过了

    <TreeView Height="500" Background="Red" Items="{Binding Files}">
      <TreeView.ItemTemplate>
        <TreeDataTemplate ItemsSource="{Binding Items}">
          <TextBlock Text="{Binding Header}"/>
        </TreeDataTemplate>
      </TreeView.ItemTemplate>
    </TreeView>

使用 ViewModel：

public class RepoFileViewModel : ReactiveObject, IRoutableViewModel
{
    public string? UrlPathSegment { get; } = Guid.NewGuid().ToString();

    public IScreen HostScreen { get; }

    public RepoFileViewModel(IScreen screen,)
    {
        HostScreen = screen;
        
        TreeViewItem Root = new TreeViewItem();

        TreeViewItem l1a = new TreeViewItem { Header = "level 1 a" };
        TreeViewItem l1b = new TreeViewItem { Header = "level 1 b" };
        TreeViewItem l1c = new TreeViewItem { Header = "level 1 c" };
        Root.Items = new List<TreeViewItem>
        {
            {l1a },{l1b},{l1c }
        };
        TreeViewItem l2ba = new TreeViewItem { Name = "level 2 b a" };
        l1b.Items = new List<TreeViewItem>
        {
            { l2ba }
        };

        Files = Root;

        this.RaisePropertyChanged("Files");


    }

    private TreeViewItem files;
    public TreeViewItem Files
    {
        get => files;
        set
        {
            this.RaiseAndSetIfChanged(ref files, value);
        }
    }


}

它不起作用。

如何在 Avalonia 中使用 MVVM 和 XAML 正确创建动态 TreeView？

【问题讨论】：

标签： treeview avaloniaui

【解决方案1】：

    <TreeView Items="{Binding Items}" >
      <TreeView.ItemTemplate>
        <TreeDataTemplate ItemsSource="{Binding Items}">
          <TextBlock Text="{Binding Name}"/>
        </TreeDataTemplate>
      </TreeView.ItemTemplate>
    </TreeView>

public RepoFileViewModel(IScreen screen)
{
    HostScreen = screen;


    FileTreeElement root = new FileTreeElement("root");
    FileTreeElement e0 = new FileTreeElement("level 0 a");
    FileTreeElement e1 = new FileTreeElement("level 0 b");
    FileTreeElement e2 = new FileTreeElement("level 0 c");
    FileTreeElement e3 = new FileTreeElement("level 1 a");
    e1.Items.Add(e3);
    root.Items.Add(e0);
    root.Items.Add(e1);
    root.Items.Add(e2);

    this.Items = root.Items;
    this.RaisePropertyChanged("Files");

    
}

private ObservableCollection<FileTreeElement> items;
public ObservableCollection<FileTreeElement> Items
{
    get => items;
    set
    {
        this.RaiseAndSetIfChanged(ref items, value);
    }
}

有效！

【讨论】：