使用 MVVM 对集合进行 WPF 分组

Posted

技术标签:

【中文标题】使用 MVVM 对集合进行 WPF 分组【英文标题】:WPF Grouping with a Collection using MVVM 【发布时间】:2012-06-04 06:35:26 【问题描述】:

我是 WPF 和 MVVM 的新手,所以如果这是一个愚蠢的问题,我会提前请求原谅。

问题: 我正在尝试使用 MVVM 设计模式创建一个分组的项目列表。我可以用后面的代码来做,但更喜欢更优雅的解决方案。

详情

假设我有一组动物:马、狼、猴子、老虎、北极熊、斑马、蝙蝠等。 这些动物按大洲分组:北美、非洲、南极洲等。

目标:在换行面板中,我想创建分组切换按钮。例如,对于在北美发现的每一种动物,都会有一个带有 ToggleButtons 的“North America”GroupBox。接下来,会有一个标题为“Africa”的 GroupBox,组框内是非洲的所有动物。

使用 MVVM 设计模式,我可以绑定到 ObservableCollection,并使用数据模板创建我需要的切换按钮。我苦苦挣扎的地方是我不知道如何对动物进行分组。我所需要的只是要遵循的指导方针。任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

在视图中,将项目源设置为 CollectionViewSource,该集合本身绑定到 ViewModel 上的 Animals 集合。 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,但如果你稍微玩一下,你应该能够为每个组设置容器样式。

希望这会有所帮助!

更新: 我对此不太确定,所以我对代码进行了快速的抨击。假设“切换按钮”是“单选按钮”,这就是我想出的:

<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>

此外,您可以将&lt;x:Static Member="GroupStyle.Default" /&gt; 行替换为:

<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>

但是,单选按钮本身不会相互排斥(我猜是因为它们被包装在 ListItem 控件中,或者其他使它们成为分组父级的单个子级的东西)。如果您想返回以获取更多信息,该代码已从 MSDN 中的 GroupStyle 条目中被盗/修改(他们的示例具有显示/隐藏组的扩展器):http://msdn.microsoft.com/en-us/library/system.windows.controls.groupstyle.aspx

如果我完全错过了重点,请告诉我。

【讨论】:

以上是关于使用 MVVM 对集合进行 WPF 分组的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法在不通知 ItemsSource 集合的情况下使用 ObservableCollection 和 MVVM 刷新 WPF DataGrid?

简单的 WPF + MVVM 绑定

使用 Android MVVM 查看数据绑定集合

如何对一个集合进行分组并将相同的分组应用于其他相同长度的集合?

WPF MVVM 创建动态控件

如何使用带有 CollectionViewSource 的增量加载集合对 UWP 中的列表视图项进行分组?