Simulating A Tab Control in a Windows 8 Application

TabSampleI was looking through the forums on MSDN today and found someone asking how to implement a Tab Strip Control in Windows 8 Store applications.  They used the Store as an example, wanting functionality that behaves like the OverView, Details, Reviews section.

Currently there are no tab controls in Windows 8 and I haven’t seen any third party libraries implement one. I though I would put together  a quick post to show how you can get similar functionality using RadioButtons and the new FlipView control.

I started with a blank application and added the following code to the MainPage.xaml.

TabControlXAML 

The RadioButtons act as the tabs and the FlipViewItems as the content.  The following code shows the click event handler for the radio buttons:

TabControlCode

It simply sets the selected index of the FlipView control to the tag of the button that was clicked. 

TabExampleThe results looks some thing like this.  This example is truly a simple solution and there is still more work to be done to make this sample more robust/behave more like tabs.  First style the buttons to look like tabs.  Then sync the selection behavior of the FlipView control to the buttons. Remember the FlipView enables item selection by default. If you don’t want to use the FlipView control, you can swap xaml in or out based on the button that is selected.  This would work fine too.  Keep in mind you that tab navigation is frowned upon in the Windows UI guidelines and should be used sparingly.

As always you can get the code here.

This entry was posted in C#, Metro, Mobile, Windows 8, WinRT. Bookmark the permalink.

20 Responses to Simulating A Tab Control in a Windows 8 Application

  1. Pingback: SilverlightCream Top 5 News for October 1-7, 2012

  2. Chris Bordeman says:

    With FlipView, you only get transitions when using touch. They don’t work with the mouse.

    • dmd0822 says:

      This was just a simple example on how to simulate tab control functionality. You have added a page frame and then create a page for each tab. Then use frame.navigate to switch the views. You should get the transition animation during the navigation.

      A lot is possible with XAML. Thanks for the comment.

  3. Pingback: Simulating A Tab Control in a Windows 8 Application–Take 2 | Dave's Two Cents

  4. Pingback: Simulating A Tab Control in a Windows 8 Application–Take 2 | Blog | BlueMetal Architects

  5. Myles says:

    How can this be done in Visual Basic?

    • dmd0822 says:

      The XAML remains the same. The Click Event would look like this

      Private Sub RadioButton_Click_1(sender As Object, e As RoutedEventArgs)
      Dim radBtn = TryCast(sender, RadioButton)

      If radBtn IsNot Nothing Then
      Dim index As Integer = Convert.ToInt32(radBtn.Tag)

      _flipVw.SelectedIndex = index
      End If
      End Sub

      That’s it..

      Thanks for the comment.

  6. Typing IsChecked=”True” in XAML for radio button causes a nullreference exception…

  7. harrygabriel91 says:

    Typing IsChecked=”True” in XAML for radio button causes a nullreference exception in the event handler, because flipView is null at the first time…

  8. Fingar says:

    This helped me a lot, just what i needed!

  9. quake3guy says:

    please note that there is missing information in the article text which is only to be found in the download:

    … article code …

    • quake3guy says:

      Trying again because the code in question was filtered by blogspot… Please note that there is missing information in the article text which is only to be found in the download:

         <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="*" />
              </Grid.RowDefinitions>
      
      ... article code ...
      
          </Grid>
      
  10. Eka says:

    Hi,
    I have a question. Besides the flipview, how can I create a side bar, just like the one in the picture example, that allows user to navigate between pages? So, when I click on “Team Meeting”, it will navigate to that page and the side bar remains at the side of the page the whole time during navigation. Is that possible?

    Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s