Procedendo sulla scia degli script visti nelle settimane precedenti, oggi affrontiamo un altro dei temi caldi per quanto riguarda lo sviluppo sul mondo desktop: da sempre infatti, spesso le applicazioni (soprattutto quelle in ambito enterprise), hanno fatto uso di componenti come i tab e la ribbon in generale per mostrare menù e pulsanti diversi in base al contesto.
Replicare questo comportamento, con la Universal Windows Platform, non era altrettanto semplice come lo è stato in passato per WPF, ad esempio, in quanto non è mai esistito un controllo che permettesse di avere meccanismi simili ed il tutto andava gestito manualmente. Con l'avvento del Windows Community Toolkit è stato introdotto il nuovo controllo XAML TabView, che permette appunto la realizzazione di un menù a tab come, ad esempio, quello di Microsoft Edge.
<controls:TabView TabWidthBehavior="Equal" CanCloseTabs="True" IsCloseButtonOverlay="True" CanDragItems="True" CanReorderItems="True" AllowDrop="True"> <controls:TabView.ItemHeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Title}" /> </DataTemplate> </controls:TabView.ItemHeaderTemplate> <controls:TabViewItem Header="ASPItalia.com"> <TextBlock Padding="16">Questo è il tab principale.</TextBlock> </controls:TabViewItem> <controls:TabViewItem Header="WinRTItalia.com"> <TextBlock Padding="16">Questo è un secondo tab</TextBlock> </controls:TabViewItem> </controls:TabView>
Come si può vedere dall'esempio riportato qui sopra, siamo andati ad aggiungere il controllo dicendogli di creare già due tab, attraverso il controllo TabViewItem, che sfruttano lo stesso template dell'header, impostato tramite la proprietà ItemHeaderTemplate, e che possono essere ordinati, spostati e chiusi tramite le proprietà CanReorderItems, CanDragItems e CanCloseTabs. Il risultato finale sarà qualcosa di simile al seguente:

Eventualmente, poiché spesso si lavora facendo uso di pattern MVVM, è anche possibile sfruttare la proprietà ItemsSource per creare una lista di TabViewItem attraverso il binding con una proprietà del ViewModel:
<controls:TabView ItemsSource="{Binding TabItemCollection}" ...>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni sui blob con Azure Storage Actions
Miglioramenti nell'accessibilità con Angular CDK
Creare una libreria CSS universale: Cards
Eliminare una project wiki di Azure DevOps
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Filtering sulle colonne in una QuickGrid di Blazor
Path addizionali per gli asset in ASP.NET Core MVC
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Generare velocemente pagine CRUD in Blazor con QuickGrid
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Creare una libreria CSS universale: Nav menu
Gestione dei nomi con le regole @layer in CSS