Home > WPF, WPF Controls > WPF TabControl transition effects with Transitionals

WPF TabControl transition effects with Transitionals

Transitionals is a WPF framework that allows you to integrate nice transition effects into your WPF application with very little effort. It’s gone live a few days ago on CodePlex and definitely worth checking out:



I’ve downloaded the library today in order to incorporate a little eye candy into a prototype I’m doing. However, what I wanted to do was adding transition effects on a tab control, which is currently not supported out of the box by the framework:

Currently Transitionals ships with only two controls out of the box […]. Other controls, like a Tab control for example, could also be created. We encourage the community to come up with other common navigation and presentation scenarios that can leverage transitions.

This sounded like a lot of work, but luckily, it wasn’t: TabControl provides a ContentTemplate property which can be bound to a data template. This is were I put a TransitionElement control and bound it to the current content of the tab control:

<DataTemplate x:Key="TabTemplate">
  <t:TransitionElement Content="{Binding}">
    <!-- some more stuff -->

<!-- tab control with content template -->
<TabControl ContentTemplate="{StaticResource TabTemplate}" />


These bindings take care of everything – a tab switch changes the content of the TransitionElement, which triggers a transition animation. All that was left to do was configuring a transition effect and adding some content to the tab control. Here’s the complete listing that uses a 3D rotation effect:



    <!-- the data template binds the content to a transition element -->
    <DataTemplate x:Key="TabTemplate">
      <t:TransitionElement Content="{Binding}">
        <!-- rotate tab contents -->
          <trans:RotateTransition Duration="0:0:1.500"
                                  Angle="90" />


  <TabControl ContentTemplate="{StaticResource TabTemplate}">

    <TabItem Header="First">
      <!-- some content -->

    <TabItem Header="Second">
     <!-- some content -->




My sample contains two tabs which both display the same image. Accordingly, the code snippet above produces the following 3D effect when switching tabs:


Author: Categories: WPF, WPF Controls Tags: ,
  1. wpffan
    October 8th, 2008 at 16:24 | #1

    why you choose to use the tibet flag?
    i do not think it is necessary for your sample.
    it is not wise to mix your political opinions into your technical ideas.

  2. nt
    February 5th, 2009 at 13:09 | #2

    because tibetans are oppressed and driven to extinction by chinese is my guess

  3. Harry
    February 8th, 2009 at 02:27 | #3

    why you choose to use the tibet flag?
    i do not think it is necessary for your sample.
    it is not wise to mix your political opinions into your technical ideas.

    Uhh. I dont think its necessary for you to whine about it either but u chose to do it anyway. Its called freedom of expression. Bullies like China are hell bent on taking it away from the Tibetans. So if you have a problem with that, then you are as bad or worse than the Chinese government.

  4. Aj
    July 14th, 2009 at 17:04 | #4

    Hey, was wondering if anyone had noticed that this causes both of the TabItems to be reinitialized, and in my case, that’s painful. I initialize everything when my app loads, doing it over at run time just for a page transition isn’t ideal. Has anyone else noticed this behavior and come up with a workaround?

  5. Graham
    July 30th, 2009 at 19:14 | #5

    I am sure his use of the Tibetan flag will not prevent you from copying his ideas. So, maybe you should just take your anti-Tibetan thoughts and crumple them up in a little ball and shove them back down in the pit of your stomach where they belong.

    By the way, nice article about transitions. Too bad about the political rant.

  6. Ken Blackstein
    June 3rd, 2010 at 15:29 | #6

    Nice post. Believe it or not I was searching for this insight for the same reason. Thank you!

  7. Fitsch
    August 25th, 2010 at 16:35 | #7

    Hi Phil, great post! I also use Transitionals for animating a tabcontrol. However, some of the tabs contain textboxed that get their content from an XML file through an XPath binding. If I do so, the text is first displayed, then the animation is played, but after the animation has finished the text is gone. I assume that a rerendering of the component takes place and that somehow the binding gets “lost”. Do you have any idea on that issue? Thanks, Markus

  8. October 30th, 2010 at 09:26 | #8

    Hi Markus

    I’m afraid I’m a bit lost on that one. If you have a repro project, I can have a look at it.


  9. Rico Alexander
    June 1st, 2011 at 09:34 | #9

    Looks like this method causes the databinding to be lost.

  10. February 7th, 2012 at 10:03 | #10

    is this library available for silverlight?

  1. No trackbacks yet.