MSDN UK Team blog

Get all the latest Microsoft developer news, tools, downloads, tutorials and tips right here, every day.
Search Form
Unfiltered HTML
Developers code with microsoft

Adding Animations as the final gloss for your Windows Phone app

Unfiltered HTML
Unfiltered HTML

Adding Animations as the final gloss for your Windows Phone app

  • Comments 1

by Andy Wigley, Microsoft Technical Evangelist

Summary: Appropriate use of animations are a key part of any successful Windows app, whether on Windows 8.x or on Windows Phone. For Windows Phone apps, there are six essential animations that every developer and designer needs to know how to implement: two kinds of page transition animations, the ‘tilt effect’ to apply to pressed items such as a button, and animations to represent the loading or unloading of an item and the deletion of an item. This article shows you how.

There has been plenty of praise from reviewers for the “buttery smooth” animations that characterise the user experience on Windows 8 and Windows Phone. They are built right into the platform, from the way the tiles animate onto the Start screen when you start the app, and of course are a fundamental feature of the ‘modern UI’ apps that you launch from there.

In fact, if you build a Windows 8.x Store app in Visual Studio and create a couple of XAML pages in it, the basic animations a user would expect to see in an app are built right into the framework, so you have to do very little as a developer to create a well behaved app – nice! It’s a similar story with the built-in controls such as the GridView and ListView, all the standard animations are built-in so the designer can concentrate their efforts not on re-implementing these standard animations in every app, but instead on creating beautiful experiences elsewhere in the app.

Animations in Windows Phone Apps

For Windows Phone app developers, unfortunately the process is a little more manual. Certainly, built-in controls such as the LongListSelector, Pivot and Panorama have beautiful animations built-in and while the user is interacting directly with those controls, it’s all beautiful and fluid, as the user would expect. But as soon as you navigate away from those controls, perhaps to another page, or if you build an app out of simpler controls such as the standard <Page>, then things go a bit awry. There’s quite a lot of the animations you would expect to see – well – missing.

A great example of this is exhibited by the standard Windows Phone Databound App new project template in Visual Studio.

Create yourself one of these and run it: what’s the user experience like? It’s really not good enough. The main page navigates nicely into view using the pleasing turnstile page transition navigation and then shows a list of items, but when you tap on an entry in the list, it navigates to another page that shows the detail of the selected item without applying any navigations at all. It’s just ‘tap’ and – bang! – the target page simply replaces the source page. No turnstyle animations as exhibited by the built-in first party apps such as the Contacts app, just a straight ‘hide one page, show the next’ experience – really not good enough.

Implementing Page transition animations

Happily, this shortcoming is easily rectified. For this, you need to add a reference to the Windows Phone Toolkit which is a collection of ‘extra’ bits and pieces provided by the Windows Phone developer platform engineering team. It is distributed on NuGet which is the package manager for the Microsoft development platform.

To install the Windows Phone Toolkit, first make sure you have got the most up to date NuGet Client installed. To check this, open Visual Studio and click on the Tools menu, then click Extensions and Updates. In the Extensions and Updates window, click on the Updates section shown in the menu on the left hand side – if an update is listed for the NuGet Package Manager for Visual Studio, click to install it.

Back in Solution Explorer, right-click on your project file and on the context menu, click Manage NuGet Packages…which launches the NuGet client wizard. In the Search box, type Windows Phone Toolkit to locate the correct package in the NuGet online library. When it finds it, click the Install button to download the assembly and add it to your project references.

OK, so what happens next? Well, at this point you need a bit of insider knowledge (or an article such as this one!) and with NuGet packages that can be a bit hard to find sometimes. There is no requirement for publishers of NuGet packages to provide any detailed documentation that is directly discoverable from Visual Studio or from MSDN. In fact, there is no standard way of providing documentation. NuGet package publishers are required to provide a webpage of information about their package, and a link to that called Project Information is displayed in the NuGet Package Manager information pane, which displays on the right when you select a package (as shown in the image above).

If you click on this link for the Windows Phone Toolkit, it takes you to http://phone.codeplex.com which is where you can find out more about the toolkit and indeed, download the entire source code for the package. Documentation is still a little bit hard to find on project webpage, and in fact the ‘documentation’ for the Windows Phone Toolkit is provided in the form of a sample app that is included in the source code download for this project. So download it, build it in Visual Studio 2012 and run the sample app and examine the source code to figure out how to use the different features offered within it.

Although all the answers are revealed by studying the sample app, it still takes some time to figure out which animation you want and how to apply it – which is where articles like this one comes in. We’ve figured it out, so you don’t have to!

The one you want for most page transitions is the Turnstile. Turnstile Forward In needs to be applied to the page we are navigating to, and Turnstile Forward Out needs to be applied to the page we are navigating from. When the user presses the Back button, then the animations are subtly different: Turnstile Backward Out on the page we are leaving, and Turnstile Backward In on the page we are navigating back to. Sounds complicated? Fortunately, it’s easy to implement.

1. First open your App.Xaml.cs file in the code editor and scroll down to the bottom to the collapsed region called Phone application initialization. Expand this region and locate the InitializePhoneApplication method and the sixth line where it sets RootFrame to be a new instance of PhoneApplicationFrame.

2. Change this to a TransitionFrame, which is a specialised version of PhoneApplicationFrame that comes in the Windows Phone Toolkit and which adds in support for page transition animations:

private void InitializePhoneApplication()

{

if (phoneApplicationInitialized)

return;

// Create the frame but don't set it as RootVisual yet; this allows the…

// screen to remain active until the application is ready to render.

RootFrame = new TransitionFrame();

RootFrame.Navigated += CompleteInitializePhoneApplication;

3. Now, in every page where you want to support Page transitions (so, actually that’s *every* page), add the following namespace declaration to the top <Page…> element:

<phone:PhoneApplicationPage

x:Class="DataBoundAppWithPageTransitions.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:toolkit=

"clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

mc:Ignorable="d"

4. Now go to the code for the Windows Phone Toolkit sample app that you downloaded before, and open Samples\NavigationTransitionSample1.xaml in the PhoneToolkitSample.WP8 project. Copy the block of XAML that defines the <toolkit:TransitionService.NavigationInTransition> and the <toolkit:TransitionService.NavigationOutTransition> that is in there, after the opening <Page> element:

<toolkit:TransitionService.NavigationInTransition>

<toolkit:NavigationInTransition>

<toolkit:NavigationInTransition.Backward>

<toolkit:TurnstileTransition Mode="BackwardIn"/>

</toolkit:NavigationInTransition.Backward>

<toolkit:NavigationInTransition.Forward>

<toolkit:TurnstileTransition Mode="ForwardIn"/>

</toolkit:NavigationInTransition.Forward>

</toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>

<toolkit:NavigationOutTransition>

<toolkit:NavigationOutTransition.Backward>

<toolkit:TurnstileTransition Mode="BackwardOut"/>

</toolkit:NavigationOutTransition.Backward>

<toolkit:NavigationOutTransition.Forward>

<toolkit:TurnstileTransition Mode="ForwardOut"/>

</toolkit:NavigationOutTransition.Forward>

</toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

5. Paste that XAML into each of your pages.

6. Run, and enjoy your beautiful page navigation transition animations!

The image above shows the turnstile effect as applied to the Databound App project. In fact, this is *not* the ideal animation to use in this case. You should use a ‘regular’ turnstile animation such as this when navigating from a page that displays a ‘menu’ of options so that the destination page signifies a ‘new task’. When the source page is a list and you are navigating to another page that is a drill-down detail, then the appropriate animation is the feathered turnstile (see later in this article).

Further essential animations

Page transition animations can be considered the bare minimum acceptable, but those alone are nowhere near enough. There is another animation included in the Toolkit which is extremely easy to apply. This is called Tilt Effect and is a subtle 3D animation that provides the effect of movement into the screen when the user taps on a button or a list item or other controls that inherit from button.

Tilteffect is one of those subtle effects that the user may not even notice, but somehow increases their pleasure while interacting with your app. In this frame capture, the runtime three list item is pressed, causing it to appear to depress into the screen.

To turn this on across the page, simply declare the toolkit namespace as we did with page animations. Then turn on tilteffect by setting the following attribute in the <Page> element XAML tag:

<phone:PhoneApplicationPage

xmlns:toolkit=

"clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

shell:SystemTray.IsVisible="True"

toolkit:TiltEffect.IsTiltEnabled="True">

There’s much more you can do with Tilt Effect such as apply it on a per control basis rather than across the page, but for basic usage that’s all you need to know.

But I Want a 5 star App…

Many developers will leave it at that. Page turnstile transition animations and tilt effect are good additions, but they really have to be considered the bare minimum acceptable. And if you want a 5 star app in reviews, then you need to go further – to ‘sweat the details’ as we say.

Feathered Turnstile Animation

This is a variant of the basic Turnstile page animation. Instead of simply ‘folding’ the page in or out rotating around the vertical edge of the screen, this one gives more of a ‘page turn’ visual effect. As mentioned before, you should use this when navigating from a list of items and the destination page is a drill-down detail page for an item selected on the source page.

This is also included in the Toolkit – see the featheredtransitionssample in the sample app. To implement this, implement the Turnstiles animation in the same way as described before, but there are some subtle changes in the XAML you use to declare the animations on the page with the List control, and the addition of a FeatheringIndex attribute on the principal controls displayed on the page:

<phone:PhoneApplicationPage

x:Class="DataBoundAppWithPageTransitions.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:toolkit=

"clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

mc:Ignorable="d"

d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True"

toolkit:TiltEffect.IsTiltEnabled="True">

<!--Transitions-->

<toolkit:TransitionService.NavigationInTransition>

<toolkit:NavigationInTransition>

<toolkit:NavigationInTransition.Backward>

<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>

</toolkit:NavigationInTransition.Backward>

<toolkit:NavigationInTransition.Forward>

<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>

</toolkit:NavigationInTransition.Forward>

</toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>

<toolkit:NavigationOutTransition>

<toolkit:NavigationOutTransition.Backward>

<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>

</toolkit:NavigationOutTransition.Backward>

<toolkit:NavigationOutTransition.Forward>

<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>

</toolkit:NavigationOutTransition.Forward>

</toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->

<StackPanel Grid.Row="0" Margin="12,17,0,28">

<TextBlock Text="MY APPLICATION"

Style="{StaticResource PhoneTextNormalStyle}"

toolkit:TurnstileFeatherEffect.FeatheringIndex="0"/>

<TextBlock Text="page name" Margin="9,-7,0,0"

Style="{StaticResource PhoneTextTitle1Style}"

toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>

</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0"

ItemsSource="{Binding Items}"

SelectionChanged="MainLongListSelector_SelectionChanged"

toolkit:TiltEffect.IsTiltEnabled="True"

toolkit:TurnstileFeatherEffect.FeatheringIndex="2">

<phone:LongListSelector.ItemTemplate>

<DataTemplate>

<StackPanel Margin="0,0,0,17">

<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap"

Style="{StaticResource PhoneTextExtraLargeStyle}"/>

<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap"

Margin="12,-6,12,0"

Style="{StaticResource PhoneTextSubtleStyle}"/>

</StackPanel>

</DataTemplate>

</phone:LongListSelector.ItemTemplate>

</phone:LongListSelector>

</Grid>

</Grid>

</phone:PhoneApplicationPage>

As you can see above in the highlighted XAML, the page transitions are defined using the TurnstileFeatherTransition, and you must also set the TurnstileFeatherEffect.FeatheringIndex attached property on the controls to define the order in which the page should animate the controls as the page transition takes place. So in the XAML shown above, the two TextBlock controls in the header StackPanel animate first (FeatheringIndex ‘0’ and ‘1’), while the LongListSelector control containing the list animates last:

<phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0"

...

toolkit:TurnstileFeatherEffect.FeatheringIndex="2">

The result is very pleasing:

Notice that the target page, the drill-down detail page, just uses a regular turnstile animation, as before.

Item Loading, Unloading and Deletion Animations

There are many other animations a skilled designer can employ to convey meaning and emphasis to the user experience, but the three others that I consider to be essential are when your app loads an item and when it deletes an item. These animations are taken from quite an old blog post by my Microsoft colleague, Jerry Nixon, who is a Technical Evangelist based in Colorado. A few years ago, back when we could still call our design language ‘metro’, he wrote an excellent series of blog posts on must-have animations for Windows Phone apps: http://blog.jerrynixon.com/2012/01/mango-sample-5-must-have-animations_4508.html. In it he describes five animations, the implementation of two of which, the turnstile and ‘Select Item’ (a.k.a. tilt effect) have been superseded by the capabilities in the Windows Phone Toolkit as already described in this article. The other three, ‘Load item’, ‘Unload item’ and ‘Delete Item’ that he describes are still part of my essential tools though.

As Jerry describes it so well, the Load Item animation is “so simple and so pleasant. Instead of popping a new page’s content, content is gently raised and revealed. … The whole storyboard duration is .75 seconds. It gives the user that the content is “being brought in”.”

The Unload Item animation is simply the reverse of this.

The Delete Item animation, Jerry describes as “dramatic, but communicative and fast. It is also consistent. We see this animation used in Email when a message is deleted. Without a doubt, this is my favorite of them all – because it is so visually communicative.”

As to how to implement these, there is no point in me simply repeating what Jerry has described so well, so go over and read how to implement them at his blog: http://blog.jerrynixon.com/2012/01/mango-sample-5-must-have-animations.html. The animations are implemented in code instead of XAML but that doesn’t make them any less appropriate. The only slight disadvantage of the Load/Unload animations is that they require you to set the initial state of your LayoutRoot element in XAML to Visibility.Collapsed which can be a slight annoyance when you want to work on the page design in the Visual Studio designer – you just have to remember to toggle the visibility before and after each design session. The results for the user experience make it worth it though!

<<Resources>>

Visual Studio

Windows Phone Toolkit

  • Hi Andy.  Thanks for this useful information and also the Channel 9 WP8 Jump Start video series, which has been one of my primary sources as I start out with WP8 development.  I wanted to share with you an issue I encountered using the TurnstileFeatherTransition with a Pivot control and the solution I came up with.  I'd be keen to hear whether I'm missing something obvious because I couldn't find mention anywhere of anyone else having the same issue.

    jmcilhinney.blogspot.com.au/.../turnstile-feather-transition-with-pivot.html

Page 1 of 1 (1 items)
Leave a Comment
  • Please add 8 and 6 and type the answer here:
  • Post