Windows 8 Theme Transitions

Much of the animation that you want in your application is already built in.  Pages and objects make their transitions smoothly. At times, however, adding a bit more animation can make the difference between a “fast and fluid”  application and one that looks less professional.

Adding animation can be tricky however; and often takes the subtle skills of a UI designer.  Windows 8,  provides a set of “Theme Transitions and Animations” that greatly simplify adding animation to your application while ensuring a very high level of professional design – that is, they’ve worked out all the details for you and all you have to do is add a couple lines of XAML to make it “go.”

These are so easy to use that it can be confusing at first. You are left with that silly “is that all it takes?”  expression on your face.  For example, suppose you have a horizontal stack of a checkbox, a TextBlock and a Button, and you want the button to animate its appearance.  You can give your application that little extra flair by adding an EntranceThemeTransition to the button.  To do so, the transition must be within a TransitionCollection, as follows,

<StackPanel Margin="150" Orientation="Horizontal">
<CheckBox Content="Is Cool"
IsChecked="True"
Margin="10"/>
<TextBlock Text="I'm Cool"
FontSize="42"
VerticalAlignment="Center"
Margin="10"/>
<Button Name="xCool"
Content="Be Cool"
Margin="10">
<Button.Transitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Button.Transitions>
</Button>
</StackPanel>

This works beautifully and you didn’t have to work out any of the animation specifics yourself.  It turns out that the transition has a number of default properties that you can override if you wish to but which you are generally better off leaving alone. These are

  • FromHorizonalOffset (the default is 40)
  • FromVerticalOffset (the default is 0)
  • IsStaggeringEnabled (default is true)

The last of these, IsStaggeringEnabled doesn’t apply to a single control as we have above, but does apply when you use the transition with a collection.  Let’s add the EntranceThemeTransition to a stack panel that contains a number of rectangles,

<StackPanel Margin="150" Name="Rectangles">
<Rectangle Width="150"
Height="100"
Fill="Red"
Name="Red" />
<Rectangle Width="150"
Height="100"
Fill="Orange"
Name="Orange" />
<Rectangle Width="150"
Height="100"
Fill="Yellow"
Name="Yellow" />
<Rectangle Width="150"
Height="100"
Fill="Green"
Name="Green" />
<Rectangle Width="150"
Height="100"
Fill="Blue"
Name="Blue" />
<Rectangle Width="150"
Height="100"
Fill="Indigo"
Name="Indigo" />
<Rectangle Width="150"
Height="100"
Fill="Violet"
Name="Violet" />
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>

By adding the transition to the panel, it will apply to each child of the panel (each Rectangle) in turn.  The transition will, however, only apply when the stack panel is first displayed, and then never again.  If you remove or add a rectangle it will pop into place. We might like to add some animation for the transition, which we can do by using the AddDeleteThemeTransition.   To see this at work, we’ll add a button that will remove the Red rectangle and we’ll add the second transition to our Transitions collection:

<StackPanel Margin="150" Name="Rectangles">
<Rectangle Width="150"
Height="100"
Fill="Red"
Name="Red" />
<Rectangle Width="150"
Height="100"
Fill="Orange"
Name="Orange" />
<Rectangle Width="150"
Height="100"
Fill="Yellow"
Name="Yellow" />
<Rectangle Width="150"
Height="100"
Fill="Green"
Name="Green" />
<Rectangle Width="150"
Height="100"
Fill="Blue"
Name="Blue" />
<Rectangle Width="150"
Height="100"
Fill="Indigo"
Name="Indigo" />
<Rectangle Width="150"
Height="100"
Fill="Violet"
Name="Violet" />
<Button Content="Delete Red"
Name="DeleteRed"
Click="DeleteRed_Click" />
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>

The button’s event handler just removes the Red rectangle by name,

private void DeleteRed_Click( object sender, RoutedEventArgs e )
{
Rectangles.Children.Remove( Red );
}
 
 

When you run this program, the rectangles transition into place (as does the button!) and when you click the button the rectangles slide up to replace the red Rectangle as shown in this tiny video.

 
 
 
 
Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Animation, Essentials, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

3 Responses to Windows 8 Theme Transitions

  1. Priya says:

    Hi,
    I tried applying the transitions, but nothing happens. No effect.
    What could have possibly gone wrong?

  2. Pingback: Windows Store Developer Links – 2013-01-21 | Dan Rigby

  3. Martin says:

    I love this post! I’m working on my first Windows 8 app (port from Windows Phone) and knowing these simple tricks to make it look and feel more professional will certainly help. Thanks Jesse!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>