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}" ...>