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
Disabilitare automaticamente un workflow di GitHub
Generare file per il download da Blazor WebAssembly
Installare le Web App site extension tramite una pipeline di Azure DevOps
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Utilizzare la libreria Benchmark.NET per misurare le performance
Code scanning e advanced security con Azure DevOps
Short-circuiting della Pipeline in ASP.NET Core
Miglioramenti nelle performance di Angular 16
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Sfruttare al massimo i topic space di Event Grid MQTT
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Creare form tipizzati con Angular