Questo articolo è la seconda parte dell'estratto del capitolo pubblicato nel seguente articolo.
Questo articolo è tratto dal libro Sviluppare applicazioni per Windows 8 con XAML, C# e VB di Daniele Bochicchio, Cristian Civera, Marco De Sanctis, Alessio Leoncini, Marco Leoncini, Stefano Mostarda.
Raggruppare elementi con una GridView
Il primo passo per poter gestire una vista con elementi raggruppati è quello di utilizzare una fonte dati consona a rappresentare questa particolare forma di dato. Se, per esempio, vogliamo mostrare una galleria fotografica di autovetture suddivise per marca, possiamo utilizzare una lista di oggetti CarBrand come quelli dell'esempio 5.10.
Public Class CarBrand Public Property Name As String Public Property Models As List(Of ContentItem) End Class
public class CarBrand { public string Name { get; set; } public List<ContentItem> Models { get; set; } }
Affinché possiamo sfruttare le funzionalità di grouping di una GridView, dobbiamo utilizzare come ItemsSource un particolare tipo di oggetto, denominato CollectionViewSource, che fornisce supporto al raggruppamento. La scelta ideale è di definirne un'istanza come risorsa della pagina, e di collegarla poi in binding con la GridView come nell'esempio 5.11
<Page ...> <Page.Resources> <CollectionViewSource x:Name="dataSource" IsSourceGrouped="True" ItemsPath="Models" /> </Page.Resources> ... <GridView ItemsSource="{Binding Source={StaticResource dataSource}}" x:Name="grid" ...> </GridView> </Page>
Come possiamo notare dal codice, abbiamo impostato a true il flag IsSourceGrouped, in modo da indicare che i dati sono raggruppati, specificando poi tramite ItemsPath che, per ogni gruppo (ossia un'istanza di CarBrand), l'elenco degli elementi è contenuto nella proprietà Models.
Questo oggetto, denominato dataSource, può essere poi inizializzato da code-behind con il codice seguente dell'esempio 5.12.
Public Sub New() InitializeComponent() Dim cars = CarBrand.GetSome ' caricamento dati.. Me.dataSource.Source = cars End Sub
public BlankPage4() { this.InitializeComponent(); var cars = CarBrand.GetSome(); // caricamento dati.. this.dataSource.Source = cars; }
Se a questo punto proviamo a eseguire il codice, il risultato che otteniamo è quello di figura 5.5: la GridView è stata effettivamente in grado di esplorare correttamente la nostra collection, dato che vengono mostrati tutti i modelli di auto, ma ancora non c'è traccia di alcun tipo di raggruppamento.
Figura 5.5 - GridView con CollectionViewSource.
Affinché il raggruppamento diventi evidente, ciò che dobbiamo fare è definire uno stile secondo cui questi elementi devono essere raggruppati e, per farlo, abbiamo a disposizione la proprietà GroupStyle. Definire uno stile per i gruppi vuol dire, in pratica, scrivere il codice XAML dell'esempio 5.13, in cui abbiamo specificato il template secondo cui mostrare le varie intestazioni e il layout control da utilizzare per gli elementi di ciascun gruppo.
<GridView ...> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Name}" ... /> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Horizontal" ... /> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> <GridView.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </GridView.ItemsPanel> </GridView>
Sicuramente il codice inizia a essere piuttosto corposo, ma se sappiamo distinguerne le varie componenti, è tutt'altro che complesso. In particolare, con l'esempio 5.13 abbiamo specificato tre template differenti:
- l'intestazione (GroupStyle.HeaderTemplate) di ogni gruppo è una TextBlock in binding con la proprietà Name di CarBrand;
- il layout secondo cui vengono disposti gli elementi di ogni gruppo;
- (GroupStyle.Panel) è una VariableSizedWrapGrid con orientamento orizzontale;
- il layout secondo cui vengono disposti gli elementi della griglia, ossia i vari gruppi, è uno StackPanel con orientamento orizzontale.
Il risultato finale ottenuto, come possiamo vedere in figura 5.6, è sicuramente migliore del precedente, perché evidenzia correttamente le varie sezioni.
Figura 5.6 - Risultato dello styling dei gruppi in una GridView.
Con pochi passaggi siamo stati in grado di realizzare un'applicazione che inizia ad avere un layout davvero professionale. Manca solo la classica ciliegina sulla torta, ossia la possibilità di mostrare delle informazioni riassuntive sul numero di modelli per ogni marca. Per farlo abbiamo bisogno di un ultimo mattone, ossia il supporto allo zoom semantico: sarà l'argomento delle prossime pagine.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Migrare una service connection a workload identity federation in Azure DevOps
Gestire la cancellazione di una richiesta in streaming da Blazor
Introduzione alle Container Queries
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Recuperare App Service cancellati su Azure
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Utilizzare Copilot con Azure Cosmos DB
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Modificare i metadati nell'head dell'HTML di una Blazor Web App