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.