Dall'archivio script > WinRT

Mostrare liste raggruppate con ItemsControl nelle Windows Store app

di Alessio LeonciniAlessio Leoncini, in WinRT,

Il controllo ItemsControl è il controllo base in WinRT per visualizzare dati in lista, da esso ereditano i più ricchi ComboBox, FlipView, ListBox, ListView fino al GridView. Ognuno di essi aggiunge specifici comportamenti e caratteristiche anche in ottica di multi input, tuttavia tutti hanno in comune la funzionalità di poter visualizzare dati aggregati, mostrando un header di gruppo altamente personalizzabile.

Un dato aggregato è un semplice oggetto che contiene una lista di altri oggetti oltre ad un altro oggetto esposto come header del gruppo, ecco un semplice esempio. Per semplicità l'header è di tipo String e la classe espone anche due metodi statici per costruire le collezioni.

public class Person
{
  public string Name { get; set; }

  public static List<Person> GetPeople()
  {
    var people = new List<Person>()
    {
      new Person() {Name = "Matteo"},
      new Person() {Name = "Marco"},
      new Person() {Name = "Luca"},
      new Person() {Name = "Giovanni"}
    };

    return people;
  }

  public static List<GroupedPeople> GetPeopleGroup()
  {
    var people = new List<GroupedPeople>
    {
      new GroupedPeople()
      {
        GroupName = "Arcangeli",
        PeopleOfGroup = new List<Person>()
        {
          new Person() {Name = "Gabriele"},
          new Person() {Name = "Jehudiel"},
          new Person() {Name = "Michele"},
          new Person() {Name = "Zerachiel"}
        }
      },
      new GroupedPeople()
      {
        GroupName = "Evangelisti",
        PeopleOfGroup = new List<Person>()
        {
          new Person() {Name = "Matteo"},
          new Person() {Name = "Marco"},
          new Person() {Name = "Luca"},
          new Person() {Name = "Giovanni"}
        }
      }
    };

    return people;
  }
}

public class GroupedPeople
{
  public GroupedPeople()
  {
    PeopleOfGroup = new List<Person>();
  }

  public string GroupName { get; set; }
  public List<Person> PeopleOfGroup { get; set; }
}

Nella classe che usiamo come ViewModel esponiamo una proprietà GroupedPeople popolata con i dati del metodo GetPeopleGroup.
Il modo più semplice per sfruttare questo oggetto come source dell'ItemsControl è quello di sfruttare un CollectionViewSource valorizzando opportunamente ItemsPath con il nome della proprietà che espone la collezione interna di oggetti, oltre a IsSourceGrouped a true, come da seguente esempio:

<Page.Resources>
    <CollectionViewSource x:Key="groupedItemsViewSource"
                            Source="{Binding GroupedPeople}"
                            IsSourceGrouped="true"
                            ItemsPath="PeopleOfGroup" />
</Page.Resources>

Infine non ci rimane che usare il CollectionViewSource come source dell'ItemsControl con il consueto accesso alle StaticResource.

<ItemsControl ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}">

Per inserire header e item con i valori della sorgente dati possiamo personalizzare l'HeaderTemplate e l'ItemTemplate, nei quali possiamo inserire i controlli più adatti a mostrare i dati in binding:

<ItemsControl ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}">        
    <ItemsControl.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock AutomationProperties.Name="Group Title"
                               Text="{Binding GroupName}" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
                   
        </GroupStyle>                
    </ItemsControl.GroupStyle>

    <ItemsControl.ItemTemplate>
        <DataTemplate>                    
                <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Come si può vedere dall'immagine risultante, l'esempio è molto semplice ma può aiutarci a capire le nuove potenzialità e la semplicità di utilizzo dei nuovi controlli presenti in WinRT.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi