主页 / 问题 / 1254880
Accepted
Денис
Asked:2022-03-12 18:10:31 +0000 UTC2022-03-12 18:10:31 +0000 UTC

在 TreeView WPF 中创建层次结构和显示

  • 772

有一个描述产品的类：

using System.Collections.ObjectModel;

namespace Test
{
    public class Product
    {
        public ObservableCollection<Product> productName { get; set; }

        public string nameOfProduct { get; set; }

        public Product()
        {
            productName = new ObservableCollection<Product>();
        }
    }
}

此代码有一个链接：

<Window x:Class="Test.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:Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TreeView Name="TrvView">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:Product}" ItemsSource="{Binding productName}">
                    <TextBlock Text="{Binding nameOfProduct}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

有一段代码以分层形式创建和显示集合的元素：

 private void Create()
    {
        for (int i = 0; i < 10; i++)
        {
            bread = new Product(){nameOfProduct = "Хлеб"};
            for (int j = 0; j < 10; j++)
            {
                breadVarieties = new Product(){nameOfProduct = "Сорт хлеба " + j.ToString()};
                bread.productName.Add(breadVarieties);
            }
            TrvView.Items.Add(bread);
        }
    }

结果，我得到了预期的漂亮结果：

在此处输入图像描述

我想不到的是：我如何以这样的方式实现代码，例如，在每 10 级面包之后，不创建位于上方的下一个根元素，我将数据放在下面。大概是这样的：

在此处输入图像描述

如果我自己预先确定嵌套深度（再写几个 for 循环并添加元素），它对我有用。如何以编程方式执行此操作？

c#

1 个回答

  1. Best Answer

    WPF 不直接使用控件，而是使用数据绑定。有一种 MVVM 设计模式可以帮助以正确的方式组织 WPF 应用程序，但让我们从简单的开始。

    分配DataContext和实施INotifyPropertyChanged

    public partial class MainWindow : Window, INotifyPropertyChanged
{
    private ObservableCollection<Product> _products;

    public ObservableCollection<Product> Products
    {
        get => _products;
        set
        {
            _products = value;
            OnPropertyChanged();
        } 
    }

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        // здесь будем писать код
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

    对于数据模型，我们还实现了 INPC。

    我已将属性重命名为更清晰且与常见的 C# 命名约定更一致。

    public class Product : INotifyPropertyChanged
{
    private string _name;
    private ObservableCollection<Product> _items = new ObservableCollection<Product>();

    public ObservableCollection<Product> Items
    {
        get => _items;
        set
        {
            _items = value;
            OnPropertyChanged();
        } 
    }

    public string Name;
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged();
        } 
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

    这是 XAML

    <Window x:Class="Test.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:Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded">
    <Grid>
        <TreeView ItemsSource="{Binding Products}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:Product}" ItemsSource="{Binding Items}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

    项目结构已准备就绪。现在，无论您如何更改集合的内容，无论您如何重命名元素，TreeView它都会自动监控树中的所有更改并立即将它们显示在界面中。

    请注意，该TreeView名称不再存在且不再需要。

    现在让我们填充树

    private void Window_Loaded(object sender, RoutedEventArgs e)
{
    Products = new ObservableCollection<Product>();
    FillProducts(Products, 10, 2, true);
}

private void FillProducts(ObservableCollection<Product> items, int count, int depth, bool isRoot)
{
    for (int i = 0; i < count; i++)
    {
        Product product = new Product() { Name = $"{isRoot ? "Хлеб" : "Сорт хлеба"} {i + 1}" };
        items.Add(product);
        if (i == count - 1 && depth > 1)
            FillProducts(product.Items, count, depth - 1, false);
    }
}

    准备好。

    PS您还可以出于娱乐目的直观地查看此代码的工作方式。为此，让我们添加一点异步和暂停。

    private async void Window_Loaded(object sender, RoutedEventArgs e)
{
    Products = new ObservableCollection<Product>();
    await FillProductsAsync(Products, 10, 2, true);
}

private async Task FillProductsAsync(ObservableCollection<Product> items, int count, int depth, bool isRoot)
{
    for (int i = 0; i < count; i++)
    {
        Product product = new Product() { Name = $"{isRoot ? "Хлеб" : "Сорт хлеба"} {i + 1}" };
        items.Add(product);
        await Task.Delay(500);
        if (i == count - 1 && depth > 1)
            FillProducts(product.Items, count, depth - 1, false);
    }
}

    现在您可以直观地看到元素是如何一一添加到树中的。

    • 1

相关问题