使用MVVM与集合进行WPF分组 [英] WPF Grouping with a Collection using MVVM

问题描述

我对WPF和MVVM都是陌生的，因此，如果这是一个愚蠢的问题，我会事先乞求宽恕.

I am new to both WPF and MVVM so I will beg forgiveness upfront if this is a silly question.

问题: 我正在尝试使用MVVM设计模式创建项目的分组列表.我可以在代码后面添加代码，但是希望有一个更优雅的解决方案.

Problem: I am trying to create a grouped list of items using the MVVM design pattern. I can do it with code behind, but would prefer a more elegant solution.

详细信息

• 假设我收藏了一些动物:马，狼，猴子，老虎，北极熊，斑马，蝙蝠等.
• 这些动物按大陆分类:北美，非洲，南极洲等.

目标:在包装面板中，我想创建分组的切换按钮.例如，对于在北美发现的每只动物，将有一个带有ToggleButtons的北美" GroupBox.接下来，将有一个标题为"Africa"的GroupBox，并且该组框中将是非洲的所有动物.

Goal: Within a wrap panel, I would like to create grouped toggle buttons. For example, there would be a "North America" GroupBox with ToggleButtons for each animal found in North America. Next, there would be a GroupBox with the header "Africa" and inside the group box would be all the animals in Africa.

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

Using the MVVM design pattern, I can bind to an ObservableCollection and, using a data template, create the toggle buttons I need. Where I'm struggling is I don't know how to group the animals. All I need are guidelines to follow. Any help would be appreciated.

推荐答案

在视图中，将项目源设置为CollectionViewSource，该自身本身绑定到ViewModel上的Animals集合.可以对CollectionViewSource进行分组，如下所示:

In the View, set the items source to a CollectionViewSource that itself binds to the Animals collection on the ViewModel. The CollectionViewSource can be grouped, something like this:

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

您还需要在您拥有的所有控件上设置组样式-诸如此类

You'll also need to set a group style on whatever items control you've got - something like this

<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/zh-cn/library/system.windows.controls.itemscontrol.groupstyle.aspx

Taken from the example on this page - http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.groupstyle.aspx

这是设置HeaderTemplate的方法，但是如果您稍作改动，则应该能够为每个组设置容器样式.

That's setting the HeaderTemplate, but if you play around a bit you should be able to set a container style for each group.

希望这会有所帮助！

更新: 我对此不太确定，因此我对代码不满.假设切换按钮"是单选按钮"，这就是我想出的:

Update: I wasn't too sure about this so I had a quick bash at the code. Assuming 'toggle button' is 'radio button', this is what I've come up with:

<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" />替换为:

In addition, you can display each group as a GroupBox by replacing the line <x:Static Member="GroupStyle.Default" /> with:

<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条目中窃取/修改了该代码:

However, the radio buttons will not be mutually exclusive on their own (I presume because they are wrapped in ListItem controls, or something else that makes them a single child of a grouping parent). That code was stolen/modified from the GroupStyle entry in MSDN if you want to go back for more information (their example had expanders to show/hide groups): http://msdn.microsoft.com/en-us/library/system.windows.controls.groupstyle.aspx

让我知道我是否完全错过了重点.

Let me know if I've missed the point at all.

这篇关于使用MVVM与集合进行WPF分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！