使用MVVM嵌套動態內容控件

Question

我有興趣創建一個嵌套內容控件系統，以可視地表示用戶在自動化系統中創建的節點網絡。

簡單地說，我有節點'x'，它們每個都包含模塊'y'，它們承載着通道'z'。

到目前爲止，我已經在ViewModel中建立了一個用於實例化所有這些的系統。 我有一個List<x>其中x是包含List<y>的模型（和屬性：名稱，ID）， 其中y是包含List<z>一個模型（和屬性：名稱，索引），其中z爲信道的模型（屬性：名稱，狀態，命令）。

我想現在在我的視圖中顯示這些。

我想要這樣做是如下，爲每個模型x在List<x>應該有其項 - 源是在該模型中的x一個List<y>帶標題內容控制（或一些其它控制）方式。內容控制還應顯示x的「名稱」屬性。

本內容控制下的每個y的數據模板應該是一個類似的內容控件，其中該模型y中的項目源是List<z>。內容控制還應顯示y的「名稱」屬性。

最後，此內容控件下的每個模型z應該顯示爲一個CheckBox，它將它的「缺血」狀態綁定到模型的'state'屬性，它的內容屬於'name'屬性，它是'命令'屬性。

我的問題是;有沒有辦法在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已定義。 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 - 我相信這應該是不言自明的。