WPF Agrupación con una colección usando MVVM

Question

Soy nuevo en WPF y MVVM, así que pediré perdón por adelantado si esta es una pregunta tonta.

Problema: Estoy tratando de crear una lista agrupada de elementos utilizando el patrón de diseño de MVVM. Puedo hacerlo con código detrás, pero preferiría una solución más elegante.

detalles

• Digamos que tengo una colección de animales: caballos, lobos, monos, tigres, oso polar, cebra, bate, etc.
• Estos animales se agrupan por continentes: América del Norte, África, Antártida, etc.

Objetivo: Dentro de un panel de ajuste, me gustaría crear botones de alternar agrupados. Por ejemplo, habría un GroupBox "América del Norte" con ToggleButtons para cada animal encontrado en América del Norte. A continuación, habría un GroupBox con el encabezado "África" ​​y dentro del cuadro de grupo estarían todos los animales en África.

Utilizando el patrón de diseño de MVVM, puedo enlazar a un ObservableCollection y, usando una plantilla de datos, crear los botones de alternar que necesito. Donde estoy luchando es que no sé cómo agrupar a los animales. Todo lo que necesito son pautas a seguir. Cualquier ayuda sería apreciada.

Answer 1

En la vista, ajuste la fuente de datos para un CollectionViewSource que sí se une a la colección de animales en el modelo de vista. El CollectionViewSource puede agruparse, algo como esto:

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

También tendrá que establecer un estilo de grupo en cualquier artículo en el control que tienes - algo como esto

<ItemsControl.GroupStyle> 
    <GroupStyle> 
     <GroupStyle.HeaderTemplate> 
     <DataTemplate> 
      <TextBlock FontWeight="Bold" FontSize="15" 
       Text="{Binding Path=Name}"/> 
     </DataTemplate> 
     </GroupStyle.HeaderTemplate> 
    </GroupStyle> 
</ItemsControl.GroupStyle> 

Tomado del ejemplo en esta página - http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.groupstyle.aspx

Eso es establecer HeaderTemplate, pero si juegas un poco, deberías poder establecer un estilo de contenedor para cada grupo.

Espero que esto ayude!

Actualización: No estaba muy seguro de esto, así que tuve un golpe rápido en el código. Suponiendo 'botón de activación' es 'botón de radio', esto es lo que he llegado con:

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

Además, puede mostrar cada grupo como GroupBox mediante la sustitución de la línea <x:Static Member="GroupStyle.Default" /> con:

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

Sin embargo, los botones de opción no serán mutuamente exclusivos por sí solos (supongo que porque están envueltos en controles ListItem, o algo más que los hace hijos únicos de un elemento primario de agrupación).Ese código fue robado/modificado de la entrada GroupStyle en MSDN si desea volver para obtener más información (su ejemplo tenía expansores para mostrar/ocultar grupos): http://msdn.microsoft.com/en-us/library/system.windows.controls.groupstyle.aspx

Avíseme si me he olvidado del punto en absoluto .

Answer 2

Usar Colección Ver código fuente.

http://msdn.microsoft.com/en-us/library/system.windows.data.collectionviewsource.aspx