WPF與使用MVVM的集合分組

Question

我對WPF和MVVM都是新手，所以如果這是一個愚蠢的問題，我會先乞求原諒。

問題： 我正在嘗試使用MVVM設計模式創建項目的分組列表。我可以用代碼來做到，但更喜歡更優雅的解決方案。

詳細

• 比方說，我有動物的集合：馬，狼，猴，虎，北極熊，斑馬，蝙蝠等
• 這些動物是由大陸分組：北美，非洲，南極洲等。

目標：在包裝面板中，我想創建分組切換按鈕。例如，北美髮現的每隻動物都會有一個「北美」GroupBox，並帶有ToggleButtons。接下來，將會有一個標題爲「非洲」的GroupBox，組框內將是非洲的所有動物。

使用MVVM設計模式，我可以綁定到ObservableCollection，並使用數據模板創建我需要的切換按鈕。我掙扎的地方是我不知道如何分組動物。我需要的是遵循的準則。任何幫助，將不勝感激。

Answer 1

在視圖中，設置的項目源到CollectionViewSource本身結合的視圖模型動物的集合。該CollectionViewSource可以分組，這樣的事：

<CollectionViewSource.GroupDescriptions> 
    <PropertyGroupDescription PropertyName="Continent" /> 
</CollectionViewSource.GroupDescriptions> 

您還需要設置一組風格上的任何物品控制你有 - 這樣的事情

<ItemsControl.GroupStyle> 
    <GroupStyle> 
     <GroupStyle.HeaderTemplate> 
     <DataTemplate> 
      <TextBlock FontWeight="Bold" FontSize="15" 
       Text="{Binding Path=Name}"/> 
     </DataTemplate> 
     </GroupStyle.HeaderTemplate> 
    </GroupStyle> 
</ItemsControl.GroupStyle> 

從示例獲取的在這頁 - http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.groupstyle.aspx

這是設置HeaderTemplate，但如果你玩了一下，你應該能夠爲每個組設置一個容器樣式。

希望這會有所幫助！

更新： 我對此並不太確定，所以我對代碼進行了快速打擊。假設「切換按鈕」是「單選按鈕」，這是我想出來的：

<GroupStyle> 
    <GroupStyle.ContainerStyle> 
     <Style TargetType="{x:Type GroupItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <GroupBox Margin="10" Header="{Binding Name}"> 
        <GroupBox.Content> 
         <ItemsPresenter /> 
        </GroupBox.Content> 
        </GroupBox> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 
    </GroupStyle.ContainerStyle> 
</GroupStyle> 

：

<Grid> 
    <Grid.Resources> 
     <CollectionViewSource x:Key="Animals" Source="{Binding}"> 
      <CollectionViewSource.GroupDescriptions> 
       <PropertyGroupDescription PropertyName="Continent" /> 
      </CollectionViewSource.GroupDescriptions> 
     </CollectionViewSource> 
    </Grid.Resources> 

    <ItemsControl ItemsSource="{Binding Source={StaticResource Animals}}"> 
     <ItemsControl.GroupStyle> 
      <x:Static Member="GroupStyle.Default" /> 
     </ItemsControl.GroupStyle> 

     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <RadioButton Content="{Binding Name}" GroupName="{Binding Continent}" /> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

此外，還可以通過更換線<x:Static Member="GroupStyle.Default" />顯示每一組的分組框

但是，單選按鈕不會相互排斥（我推測是因爲它們被包裝在ListItem控件中，或者是使它們成爲分組父項的單個子項的其他東西）。如果您想回到更多信息（他們的示例擴展程序顯示/隱藏組），則該代碼被從MSDN中的GroupStyle條目中竊取/修改：http://msdn.microsoft.com/en-us/library/system.windows.controls.groupstyle.aspx

讓我知道如果我完全錯過了這一點。

Answer 2

使用集合查看源代碼。

http://msdn.microsoft.com/en-us/library/system.windows.data.collectionviewsource.aspx