主页 / 问题 / 1364645
Accepted
A B
Asked:2022-05-22 07:53:56 +0000 UTC2022-05-22 07:53:56 +0000 UTC

来自各种对象的 TreeView WPF

  • 772

如何为 WPF 中的各种对象正确组织 TreeView？我想看看这样的模型。

在此处输入图像描述

课程：

在此处输入图像描述

主要问题是如何在 WPF 中进行这种绑定。使用 MuiltiBinding 找到解决方案，但它们不起作用。现在，当在 TreeView HierarchicalDataTemplate 和 DataTemplate 资源中指定时，它可以工作，但如果 TreeObject 类具有返回一个新的 IEnumerable 的属性，所有现有列表都将添加到该属性，则它可以工作。在我看来，这在记忆中是不合适的，tk。该类已经有几个对象的列表。是的，我想尝试以不同的方式自定义每种类型的对象。这个问题没有任何具体的任务，只是有趣了很长时间，在漫长的搜索中，人们是如何做到的。感谢您的反馈！

c#

1 个回答

  1. Best Answer

    我将展示使用TreeView.

    类结构

    我们首先需要考虑的是项目中的类将如何相互交互，也就是说，我们需要正确设计项目，定义所有依赖项、重复行为等。例如，您可以在object或上帝禁止dynamic。好吧，但是你可以方便地与这一切进一步互动吗？我想不是。因此，让我们基于接口做一些方便的事情。

    • 因此，首先我们将创建界面。对他有什么要求？结合类之间的共同点，并允许我们在同一个集合中存储几种不同的类型。

      public interface INode
{
    public string Name { get; }
}

      在这个例子中，我只将节点的名称放入接口中，没有更多，因为它应该在所有类中。

    • 接下来，让我们创建我们需要的所有类型：

      • 目录

        public class FolderNode : INode
{
    public FolderNode(string name) => Name = name;
    public string Name { get; set; }
    public List<INode> Items { get; set; }
}

      • 图片

        public class ImageNode : INode
{
    public ImageNode(string name) => Name = name;
    public string Name { get; set; }
    public string Size { get; set; }
    public string Format { get; set; }
}

      • 音乐

        public class MusicNode: INode
{
    public MusicNode(string name) => Name = name;
    public string Name { get; set; }
    public string Author { get; set; }
    public int Size { get; set; }
    public TimeSpan Duration { get; set; }
}

      如您所见，这些都是简单的类，具有简单的属性，甚至可能有它们自己的逻辑。这一切都取决于你想要什么以及如何。

    数据

    有了类，我们现在可以用我们需要的任何东西来填充我们的集合。

    • 为了便于填写，我们做一个最简单的“builder”，让代码阅读起来更容易一些。

      public class FolderBuilder
{
    private FolderNode folder;
    public FolderBuilder(string name) => folder = new FolderNode(name);

    public FolderBuilder AddItem(INode node)
    {
        if (folder.Items is null)
            folder.Items = new List<INode>();

        folder.Items.Add(node);

        return this;
    }

    public FolderNode Build() => folder;
}

    • 现在，填充。请记住，在 WPF 中，绑定仅在公共属性上可用。还要记住，如果集合已经被绑定并且我们需要更改其中的数据（添加/删除），那么集合必须实现INotifyCollectionChanged，在 C# 中开箱即用已经准备好了 - ObservableCollection<T>。

      • 制作属性：

        public ObservableCollection<INode> Folders { get; set; } = new();

      • 我们填写：

        var concertFolder = new FolderBuilder("Записи с концерта")
    .AddItem(new MusicNode("Концерт №1") { Author = "Группа 1", Duration = TimeSpan.FromHours(5), Size = 84496 })
    .AddItem(new MusicNode("Концерт №2") { Author = "Группа 1", Duration = TimeSpan.FromHours(2), Size = 15347 })
    .Build();

var musicFolder = new FolderBuilder("Музыка")
    .AddItem(new MusicNode("Трек #1") { Author = "Вася", Duration = new(0, 2, 37), Size = 5748 })
    .AddItem(new MusicNode("Трек #2") { Author = "Катя", Duration = new(0, 1, 52), Size = 1357 })
    .AddItem(new MusicNode("Трек #3") { Author = "Петр", Duration = new(0, 4, 43), Size = 4626 })
    .AddItem(new ImageNode("Обложка") { Format = "JPEG", Size = "1920x1080" })
    .AddItem(concertFolder)
    .Build();

Folders.Add(musicFolder);

    在这里，如您所见，这是一个简单的集合，您不必阻止任何人在循环中或以其他方式添加元素。

    XAML（用户界面）

    现在留给我们设计界面，在那里写下所有这些类型，指示它们应该如何显示。WPF 为此目的有 2 个元素：

    1. DataTemplate- 允许您指定DataType对象的类型 ( ) 以及要为其设置的类型。
    2. HierarchicalDataTemplate- 类似于简单的DataTemplate，除了它还允许您设置ItemsSource它将显示的内容。

    知道了这一点，让我们为所有类型编写相应的形式：

    • 目录（它包含一个集合，因此HierarchicalDataTemplate）

      <HierarchicalDataTemplate DataType="{x:Type local:FolderNode}" ItemsSource="{Binding Items}">
    <StackPanel Orientation="Horizontal" Margin="0 0 0 3">
        <Viewbox Width="18" Height="18">
            <Canvas Width="24" Height="24">
                <Path Fill="Black" Data="M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z" />
            </Canvas>
        </Viewbox>
        <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="3 0 0 0" />
    </StackPanel>
</HierarchicalDataTemplate>

    • 图片（足够简单DataTemplate）

      <DataTemplate DataType="{x:Type local:ImageNode}">
    <Grid Margin="0 0 0 3">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Viewbox Width="18" Height="18">
                <Canvas Width="24" Height="24">
                    <Path Fill="#FF17BF9C" Data="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M17,13V19H7L12,14L14,16M10,10.5A1.5,1.5 0 0,1 8.5,12A1.5,1.5 0 0,1 7,10.5A1.5,1.5 0 0,1 8.5,9A1.5,1.5 0 0,1 10,10.5Z" />
                </Canvas>
            </Viewbox>
            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="3 0 0 0" />
        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <TextBlock FontSize="10" Text="{Binding Format}" Margin="0 0 3 0"/>
            <TextBlock FontSize="10" Text="{Binding Size}"/>
        </StackPanel>
    </Grid>
</DataTemplate>

    • 音乐

      <DataTemplate DataType="{x:Type local:MusicNode}">
    <Grid Margin="0 0 0 3">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Viewbox Width="18" Height="18">
                <Canvas Width="24" Height="24">
                    <Path Fill="#FFA4D81F" Data="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M13,10V12H11V17A2,2 0 0,1 9,19A2,2 0 0,1 7,17A2,2 0 0,1 9,15C9.4,15 9.7,15.1 10,15.3V10H13Z" />
                </Canvas>
            </Viewbox>
            <TextBlock VerticalAlignment="Center" Margin="3 0 0 0" >
                <Run Text="{Binding Author}"/>
                <Run Text="-"/>
                <Run Text="{Binding Name}"/>
            </TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <TextBlock FontSize="10" Text="{Binding Duration}" Margin="0 0 3 0"/>
            <TextBlock FontSize="10" Text="{Binding Size, StringFormat={}{0} кб}"/>
        </StackPanel>
    </Grid>
</DataTemplate>

    • 现在只剩下自己TreeView在那儿展示了ItemsSource

      <TreeView ItemsSource="{Binding Folders}"/>

    就是这样，所以我们用它们自己的数据创建了单独的类，它们在 UI 中以不同的方式显示。如您所见，这里没有什么复杂的，主要是不要混淆）自然，类结构，外观和其他一切都可以完全不同，即使object您构建一切，这也不会改变本质。最主要的是要有一个对象（类），好吧，解释XAML如何处理它，仅此而已。顺便说一句，这个“技巧”DataTemplate在任何地方都有效，即使您只是在屏幕上显示对象，甚至在ListBox或其他地方。

    结果

    • 2

相关问题