使用 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>
此外,您可以将<x:Static Member="GroupStyle.Default" />
行替换为:
<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?