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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare Model as a Service su Microsoft Azure
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Disabilitare automaticamente un workflow di GitHub
Miglioramenti nelle performance di Angular 16
Eseguire query verso tipi non mappati in Entity Framework Core
Gestire domini wildcard in Azure Container Apps
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Hosting di componenti WebAssembly in un'applicazione Blazor static