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!