Vistas de colecciones: agrupando elementos de un ListBox

mayo 8, 2009 11:59 by marcossanchez

Con este ejemplo se pretende ilustrar las funcionalidades de las vistas de una colección de datos. Todas las colecciones en WPF tienen un objeto CollectionView predeterminado. WPF siempre enlaza a una vista en lugar de a una colección. Si enlaza directamente a una colección, WPF realmente establece el enlace con la vista predeterminada de esa colección. En este ejemplo, se crea una colección de objetos de tipo Elemento, cuya definición es:

public class Elemento
{
    public string Grupo { get; set; }
    public string Nombre { get; set; }
    public string PathFoto { get; set; }
}

Las vistas permiten ver la misma colección de datos de maneras diferentes, según los criterios de ordenación, filtrado o agrupación. Cada colección tiene una vista predeterminada compartida, que se utiliza como origen cuando se enlaza directamente una colección. Se puede obtener la vista predeterminada de una colección utilizando el método GetDefaultView de la clase CollectionViewSource. A continuación se muestra el código en el que se enlaza una colección de objetos Elemento a un ListBox y se configura su vista para la agrupación por el campo Grupo:

public UCListBoxAgrupado()
{
    InitializeComponent(); 
    ObservableCollection<Elemento> Items = new ObservableCollection<Elemento>()

                     {
                        //Rellenamos la colección con objetos de tipo Elemento 
                     };
    listBoxAgrupado.ItemsSource = Items;

    ICollectionView view = CollectionViewSource.GetDefaultView(listBoxAgrupado.ItemsSource);
    view.GroupDescriptions.Add(new PropertyGroupDescription("Grupo"));
    }

En XAML, definimos el estilo que tendrán las cabeceras de los grupos, añadiendo el nombre del grupo con un Binding al campo Grupo del primer elemento del grupo:

<ListBox x:Name="listBoxAgrupado">
    <ListBox.GroupStyle>
        <GroupStyle HeaderTemplate="{StaticResource GroupTemplate}"/>
    </ListBox.GroupStyle>
</ListBox>

<!-- DataTemplate para las cabeceras de grupo del ListBox -->

<DataTemplate x:Key="GroupTemplate">
    <Border Height="30" CornerRadius="4" Margin="5">
        <TextBlock Text="{Binding Path=Items[0].Grupo}" HorizontalAlignment="Left"/>
    </Border>
</DataTemplate>

El resultado final tiene la siguiente apariencia:

 


Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Share Comentarios no permitidos