UWP Tip #25 - Windows Community Toolkit - Using the TabView Control

Here at UWP Tips, I have walked through how to use many of the controls, services and helpers available in the Windows Community Toolkit. The toolkit reached the v5 milestone at the end of October and added a number of new features and enhancements. One of the new controls is the TabView XAML control. Today, we'll examine the control and create a quick sample UWP Page.

Let's start by viewing the control in the handy toolkit sample app that you can install from the Microsoft Store. I added a yellow border to identify the bounds of the control itself.

You can see that the control has header and footer regions, a row of tabs with the ability to add tabs using the + icon, and a settings button to enable user configuration of the tab behavior. Based on the settings exposed on the right through the sample app, you can also see that it is easy to change the tab width settings, add close tab buttons and provide drag-and-drop behavior to rearrange tabs.

Let's crate a new UWP project and get our hands on some XAML. Once your project is created, add the Microsoft.Toolkit.Uwp.UI.Controls v5.0 (or later) NuGet package. I have also added MVVMLight for some quick MVVM support.

Let's keep the XAML really simple for our first test run with the TabView. Here is the markup for a TabView with a header, footer and four tabs.

<Grid>
         <controls:TabView>
             <controls:TabView.Header>
                 <TextBlock Text="Top of the World!"/>
             </controls:TabView.Header>
             <controls:TabViewItem Header="First Tab">
                 <TextBlock Text="First tab Contents!"/>
             </controls:TabViewItem>
             <controls:TabViewItem Header="Tab 2">
                 <TextBlock Text="Tab 2 contents!"/>
             </controls:TabViewItem>
             <controls:TabViewItem Header="3rd Tab">
                 <TextBlock Text="3rd tab contents!"/>
             </controls:TabViewItem>
             <controls:TabViewItem Header="Last Tab">
                 <TextBlock Text="Last tab contents!"/>
             </controls:TabViewItem>
             <controls:TabView.Footer>
                 <TextBlock Text="The End"/>
             </controls:TabView.Footer>
         </controls:TabView>
</Grid>

If you want to see an example with a little more complexity, check out the XAML tab for the TabView in the toolkit sample app. Here is what our XAML renders at runtime.

It doesn't look to bad for a view lines of XAML, if you ask me. We are all ready to plug in four tabs full of great content, and we support Windows theming out of the box. Hover over the tabs and see how they have a nice, fluent look and feel also. Very cool!

Before we wrap up this simple example, let's clean things up with some margins on our TextBlock elements and copy some XAML from the sample app to get that cool Settings icon at the end of our tab row. Here is that markup:

<controls:TabView.TabEndHeader>
   <Button Width="48"
     Height="40"
      Margin="-1,0,0,0"
      BorderThickness="1"
       Background="Transparent"
       Style="{StaticResource ButtonRevealStyle}">
     <Viewbox MaxWidth="16" MaxHeight="16">
       <SymbolIcon Symbol="Setting"/>
     </Viewbox>
   </Button>
</controls:TabView.TabEndHeader>

Place this between your last TabViewItem and the TabView.Footer element. This is the what our Page looks like now.

Now our text has a little breathing room, and our tabs have a settings button. (It's up to you to add the settings, of course.)

That's it for our quick tour of the TabView. There's loads more to explore in this control. I recommend starting with the MS Docs page for the control, and then head over to the GitHub repo to check out the source.

Happy coding!

del.icio.us Tags: windows community toolkit,uwp,mvvmlight