c# - 使用 MVVM 的嵌套动态内容控件

Question

我有兴趣创建一个嵌套内容控件系统，以直观地表示用户在自动化系统中创建的节点网络。

简单地说，我有节点“x”，它们每个都包含模块“y”，其中主机 channel “z”。

到目前为止，我已经在 ViewModel 中建立了一个用于实例化所有这些的系统。
我有一个 List<x>在哪里 x是一个包含 List<y> 的模型(和属性:名称，ID)，
在哪里 y是一个包含 List<z> 的模型(和属性:名称、索引)其中 z是 channel 的模型(属性:名称、状态、命令)。

我现在想在我的 View 中显示这些。

我想这样做的方式如下，对于每个模型x在 List<x>应该有一个标题内容控件(或其他一些控件)，其项目来源是 List<y>在这个模型中x .内容控件还应该显示 x 的“名称”属性。 .

每个 y 的数据模板在这个内容控件下应该是一个类似的内容控件，其中项目来源是 List<z>在这个模型中y .内容控件还应该显示 y 的“名称”属性。 .

最后，每个型号z在此内容控件下应显示为 CheckBox，将其“已检查”状态绑定(bind)到模型的“状态”属性，将内容绑定(bind)到“名称”属性，将命令绑定(bind)到“命令”属性。

我的问题是；有没有办法在 MVVM 中做到这一点？如果是这样，我将如何进行设置？

Answer 1

像往常一样，有几种方法可以完成此任务。这在很大程度上取决于您想要达到什么样的视觉效果。

您可以将数据显示为树:

<TreeView ItemsSource="{Binding Nodes}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:Node}"
                                  ItemsSource="{Binding Modules}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:Module}"
                                  ItemsSource="{Binding Channels}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <DataTemplate DataType="{x:Type local:Channel}">
            <CheckBox Content="{Binding Name}"
                      IsChecked="{Binding State}"
                      Command="{Binding Command}" />
        </DataTemplate>
    </TreeView.Resources>
</TreeView>

在此示例中，您的类的外观和与嵌套项的关系由 HierarchicalDataTemplate 定义。 s。 TreeView控制是“聪明的”，足以知道如何处理这些。

更一般的解决方案是沿着这些思路:

<ItemsControl ItemsSource="{Binding Nodes}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <HeaderedContentControl Header="{Binding Name}">
                <ItemsControl ItemsSource="{Binding Modules}"
                              Margin="10,0,0,0">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <HeaderedContentControl Header="{Binding Name}">
                                <ItemsControl ItemsSource="{Binding Channels}"
                                              Margin="10,0,0,0">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <CheckBox IsChecked="{Binding State}"
                                                      Content="{Binding Name}"
                                                      Command="{Binding Command}" />
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </HeaderedContentControl>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </HeaderedContentControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这里每个类的模板由 ItemTemplate 显式定义。对应 ItemsControl 上的属性.我用了Margin嵌套项目的属性以引入一些缩进。

注意

我已替换 x , y和 z带有 Node 的类名, Module和 Channel分别为了可读性。另外，我正在使用相应的集合名称 - Nodes , Modules和 Channels - 我认为这应该是不言自明的。