Simulating A Tab Control in a Windows 8 Application–Take 2

TabsIn 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.

MainPage

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.

RadioClick

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.

Transition 

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!

This entry was posted in Metro, Mobile, User Experience, UX, Windows 8, WinRT. Bookmark the permalink.

17 Responses to Simulating A Tab Control in a Windows 8 Application–Take 2

  1. Pingback: Windows 8 Developer Links – 2012-10-16 | Dan Rigby

  2. xyzzer says:

    Note that you could just as well use a ContentControl instead of the Frame and save yourself from the Frame’s complexities.

    • dmd0822 says:

      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.

  3. Pingback: Simulating A Tab Control in a Windows 8 Application – Take 2

  4. Morten says:

    I instead create 3 Grids, and bind visibility to the IsChecked property. Saves my all the code-behind (ie pure XAML)

  5. dotMorten says:

    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)

  6. 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?

    • dmd0822 says:

      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.

  7. Myles says:

    When I tap the arrow on either side the selected radio button doesn’t change. Why is this?

  8. Myles says:

    How can I do the if statement on visual basic?

  9. 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.

    • dmd0822 says:

      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.

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