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
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare Tailwind CSS all'interno di React: installazione
Effettuare il pull di git LFS in un workflow di GitHub
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare la session affinity con Azure Container Apps
Evitare la script injection nelle GitHub Actions
Effettuare il binding di date in Blazor
Elencare le container images installate in un cluster di Kubernetes
Creare un'applicazione React e configurare Tailwind CSS
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Copiare automaticamente le secret tra più repository di GitHub