Grouping WPF Using Collection Using MVVM

Question

I am new to both WPF and MVVM, so I apologize in advance if this is a stupid question.

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

More details

• Say I have a collection of animals: horse, wolf, monkey, tiger, polar bear, zebra, bat, etc.
• These animals are grouped by continent: North America, Africa, Antarctica, etc.

Purpose. Inside the wrap panel, I would like to create grouped toggle buttons. For example, there would be a North America GroupBox with ToggleButtons for every animal found in North America. Then there will be a GroupBox with the heading "Africa", and inside the group box will be all the animals in Africa.

Using the MVVM design pattern, I can bind to an ObservableCollection and, using the data pattern, create the switch buttons I need. Where I fear, I do not know how to group animals. All I need is guidelines. Any help would be appreciated.

Answer 1

CollectionViewSource, Animals ViewModel. 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, , .

, !

Update: , bash . , " " - "", , :

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

, GroupBox, <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 - , ). / GroupStyle MSDN, ( / ): 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