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.
2 Responses to Windows 8 Theme Transitions