In my previous post on Simulating a Tab Control, I used radio buttons and a FlipView control to simulate a tab control. A commenter pointed out that there were no animation when changing FlipViewItems if you switch items by setting the selected item index. These subtle animation are part of the new experience of Windows 8. In this post I will show you how to use the built in transition animations to enhance the experience of my tab control. I will modify the previous example by adding animations to each tab. Again I will leave styling of the RadioButtons to you.
The first thing I did was get rid of the FlipView. For this example I will use a Frame object to hold contents of my tabs.
Since I am using a frame I needed to move the contents of the tabs out to their own files. In the RadioButton click handler I use the frames navigate method to switch the content.
As each tab is clicked you will notice that the content for that tab animates in from the right. It is a subtle animation but one that enhances the experiences. With XAML technologies you have always been able to create these animations but they were a pain to work with since you had to build them from scratch. Easing functions and other canned tidbits were added in later versions of XAML but weren’t as rich as what you get in with Windows 8.
In Windows 8 there are canned animations that can be applied during transitions. The new Win 8 controls have these transitions built in. All you have to do is provide the content. These same transitions can be used on other controls. For an in depth look at using animations in your applications, take a look at the MSDN documentation. For my example I decided to use a simple EntranceThemeTransition. I added a TransitionCollection to the main grid of each tab. I then set a horizontal offset. To make this example a little more compelling I added some grid rows for more content to the grid.
These new transitions should help you enhance your user experiences with little effort. They been optimize for performance and usability. I recommend you go check out what transitions are available.
Here are the bits for you to play with.
FYI if you are interested where I got the content for my tabs take a look a Bacon Ipsum. Add a little bacon to spice up your fake content!
Dave's Two Cents 
Note that you could just as well use a ContentControl instead of the Frame and save yourself from the Frame’s complexities.
For this example there was not much complexity. You are correct you could use a content control as well. That is the beauty of XAML. There many different ways to do things.
Thanks for the comment.
I instead create 3 Grids, and bind visibility to the IsChecked property. Saves my all the code-behind (ie pure XAML)
Sure that is another way to do it. Do you get the entrance animations when you do it that way?
I use a grid for each RadioButton “Tab”, and bind the visibility of each grid to the IsChecked property on each RadioButton. The benefit is that that doesn’t require any code-behind what-so-ever (apart from the bool-to-visibility IValueConverter that usually comes with all the starter templates)
Sure that is another way to do it. Do you get the entrance animations when you do it that way?
Hi Dave, good article, thanks!
It seems that when using Frame (and Navigate) it creates a new instance of the page when navigating, and then of course the EntranceThemeTransition works. This is fine for static content. In my case however, some of the pages contain input controls so I do not want to create new ones. What would you recommend for that?
That is true you do create a new instance each time. Let me make sure I understand your question is it the state (user entered data) that you are worried about? I am going to go on that assumption. There are a few things you can do.
1) Use a tab control from a third party control library. I think that Synfusion has one. A lot of times third party libraries are ok as long as you don’t try to radically customize them.
2) If the animation is not that important to you then place all you “tabs” on the page, each in a different container. Bind that container’s Visibility property to the IsChecked property of the radio button.
3) If the animations are important you can create your own. The animation library is still there. This could be challenging though, since there are no Triggers in Win 8 XAML.
4) Finally if you are just worried about the state of the controls on you page and you are using the MVVM pattern then you can create a single instance of the view model. This is easy to do if you are using a view model locator. The MVVMLight toolkit has a good example of how to do this. You will want to monitor memory consumption to ensure that all you objects get disposed of properly.
I hope that this helps. Thanks for reading and taking the time to comment.
When I tap the arrow on either side the selected radio button doesn’t change. Why is this?
You have to write the code to sync the selected radio button with the current page.
How can I do the if statement on visual basic?
If radBtn IsNot Nothing Then
Dim index As Integer = Convert.ToInt32(radBtn.Tag)
_flipVw.SelectedIndex = index
End If
Thanks. Does this code apply for all tab view items or do I need to do them individually?
In Windows 8 there are canned animations that can be applied during transitions. The new Win 8 controls have these transitions built in. All you have to do is provide the content. These same transitions can be used on other controls. For an in depth look at using animations in your applications, take a look at the MSDN documentation . For my example I decided to use a simple EntranceThemeTransition. I added a TransitionCollection to the main grid of each tab. I then set a horizontal offset. To make this example a little more compelling I added some grid rows for more content to the grid.
Cool. This was meant to be a simple solution. The possibilities are endless. You could also use a tab control from a control library as well.
Thanks for reading.