I 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.
The RadioButtons act as the tabs and the FlipViewItems as the content. The following code shows the click event handler for the radio buttons:
It simply sets the selected index of the FlipView control to the tag of the button that was clicked.
The 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.
Dave's Two Cents 
With FlipView, you only get transitions when using touch. They don’t work with the mouse.
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.
How can this be done in Visual Basic?
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.
Typing IsChecked=”True” in XAML for radio button causes a nullreference exception…
I didn’t have that issue. If it persists then set the first tab in code (either in the code behind or in the ViewModel)
Typing IsChecked=”True” in XAML for radio button causes a nullreference exception in the event handler, because flipView is null at the first time…
This helped me a lot, just what i needed!
Cool, thanks for reading my blog.
please note that there is missing information in the article text which is only to be found in the download:
… article code …
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>Because I attached the code I only posted the relevant code. Thanks for the comment.
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.
You could use a Frame control in the content area. Then use the Frame.Navigate method in the event handler for your button click or inside of a Command if you are doing MVVM.
Hi,
Do you have a simple example or a link to an example that I can refer to? I’m new to XAML codings so I’m unsure how exactly to begin with.
Thanks.
I don’t have an example and I don’t know of any. That type of navigation paradigm goes against the Win 8 Guidelines (http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.aspx). If I had the time I would whip up an example but I am a little busy right at the moment.
It’s alright then. Thanks anyway.