分组WPF使用MVVM集合(WPF Grouping with a Collection using

2019-07-29 14:54发布

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

问题:我想创建一个使用MVVM设计模式项目的分组列表。 我可以用代码来执行它的背后,却宁愿一个更优雅的解决方案。

细节

  • 比方说,我有动物的集合:马,狼,猴,虎,北极熊,斑马,蝙蝠等。
  • 北美,非洲,南极洲等:这些动物是由大陆分组

目标:在一个画布面板,我想创建分组切换按钮。 例如,将是一个“北美”组框用的ToggleButtons在北美洲发现的每个动物。 接下来,将与头“非洲”和组箱内分组框将在非洲所有的动物。

使用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中,但如果你身边有点玩,你应该能够设置一个容器风格为每个组。

希望这可以帮助!

更新:我是不太清楚这个,所以我不得不在代码快速庆典。 假设“切换按钮”是“单选按钮”,这是我想出:

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

然而,单选按钮会不会对自己的(我假设,因为它们被包裹在列表项的控制,或者其他什么东西,让他们分组父母的一个孩子)互相排斥。 该代码被窃取/从MSDN中的GroupStyle条目进行了修改,如果你想回去的更多信息(例如他们不得不扩展显示/隐藏组): http://msdn.microsoft.com/en-us/library/system .windows.controls.groupstyle.aspx

让我知道如果我错过了点可言。



文章来源: WPF Grouping with a Collection using MVVM