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
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Copiare automaticamente le secret tra più repository di GitHub
Eseguire una GroupBy per entity in Entity Framework
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Specificare il versioning nel path degli URL in ASP.NET Web API
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Usare lo spread operator con i collection initializer in C#
Creazione di componenti personalizzati in React.js con Tailwind CSS
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Gestire i null nelle reactive form tipizzate di Angular
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)