如何使用 TreeView 的转换器从列表创建树结构

本文关键字：列表 创建 结构 转换器 何使用 TreeView | 更新日期: 2023-09-27 18:32:29

某些函数提供了一个字符串的平面列表，如下所示： 

var list = new List<int>{1,2,3,4};

TreeView 现在希望将此列表转换为具有两个根节点(一个用于奇数，一个用于偶数(的树。这只是一个例子，因为实际方案必须创建一个更具层次结构的结构。关键是后端提供了一个平面列表，视图希望将其转换为树。

我们尝试了一个转换器作为 ItemsSource，但由于它创建了一个新结构，它基本上破坏了与原始列表的绑定(使异步填充变得不可能(。解释原因

这是一个小的复制代码：

代码隐藏：

public partial class MainWindow : Window
    {
        public ObservableCollection<int> TreeViewSource { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            TreeViewSource = new ObservableCollection<int>();
            Action filler =() => { Enumerable.Range(0, 100).ToList().ForEach((i) => { Thread.Sleep(20); TreeViewSource.Add(i); }); };
            Task.Run(() => filler()); // ASYNC CALL DOES NOT WORK
            //filler(); // SYNC CALL DOES WORK
        }
    }
    public class TreeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var sourceCollection = value as ObservableCollection<int>;          
            var outputCollection = new List<Item>();
            var odd = new Item { Text = "not divisible by 2" };
            var even = new Item { Text = "divisible by 2" };
            even.Children.AddRange(sourceCollection.Where(x => x % 2 == 0).Select(x => new Item { Text = x.ToString() }));
            odd.Children.AddRange(sourceCollection.Where(x => x % 2 != 0).Select(x => new Item { Text = x.ToString() }));
            outputCollection.Add(odd);
            outputCollection.Add(even);
            return outputCollection;
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    public class Item
    {
        public string Text { get; set; }
        public List<Item> Children { get; set; }
        public Item()
        {
            Children = new List<Item>();
        }
    }

Xaml：

<Window x:Class="TreeViewAsync.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeViewAsync"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:TreeConverter x:Key="treeConverter"/>
    </Window.Resources>
    <Grid>
        <TreeView Name="treeView" 
                  ItemsSource="{Binding TreeViewSource, Converter={StaticResource treeConverter}}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:Item}" ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Text}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

此链接表示应使用数据模板而不是 ItemsSource 上的转换器。但是，由于模板单独应用于每个项目，因此如何创建完整的树？

再次：ViewModel 不需要数据是树，因此不提供树结构，而仅提供平面列表。为方便起见，视图希望将其显示为树。由于 MVVM，我们希望避免在视图中使用代码隐藏。

如何使用 TreeView 的转换器从列表创建树结构

树视图现在希望将此列表转换为具有两个根节点的树 ViewModel 不需要数据是树，因此不提供树结构，而仅提供平面列表

您误解了视图模型概念。如果视图需要分层数据，则视图模型的职责是使数据分层并准备好与视图绑定。

但是由于模板单独应用于每个项目

通常，模板应用于任何类型的项目。

public sealed class NestedItemsViewModel
{
    public string Name { get; set; }
    public int[] Items { get; set; }
}
public sealed class ViewModel
{
    private readonly List<int> list = new List<int> { 1, 2, 3, 4 };
    private NestedItemsViewModel[] items;
    public NestedItemsViewModel[] Items
    {
        get
        {
            if (items == null)
            {
                items = new[]
                {
                    new NestedItemsViewModel
                    { 
                        Name = "Even",
                        Items = list.Where(x => x % 2 == 0).ToArray() 
                    },
                    new NestedItemsViewModel
                    { 
                        Name = "Odd",
                        Items = list.Where(x => x % 2 != 0).ToArray() 
                    },                        
                };
            }
            return items;
        }
    }
}

XAML：

<!-- Assuming, that TreeView.DataContext = new ViewModel()  -->
<TreeView ItemsSource="{Binding Items, IsAsync=True}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:NestedItemsViewModel}" ItemsSource="{Binding Items}">
            <TextBlock Text="{Binding Name}"/>
        </HierarchicalDataTemplate>
        <!-- If nested items will be more complex, then here will be their data template(s) -->
    </TreeView.Resources>
</TreeView>
相关文章：