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