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
Gestire domini wildcard in Azure Container Apps
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Utilizzare Tailwind CSS all'interno di React: installazione
Load test di ASP.NET Core con k6
Hosting di componenti WebAssembly in un'applicazione Blazor static
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Paginare i risultati con QuickGrid in Blazor
Eseguire query verso tipi non mappati in Entity Framework Core
Criptare la comunicazione con mTLS in Azure Container Apps