Over a million developers have joined DZone.

Windows Phone Mango Sample: 5 Must-Have Animations Pt. 3

DZone's Guide to

Windows Phone Mango Sample: 5 Must-Have Animations Pt. 3

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

This article is part 2 in a three part series.

  1. Part 1: Animation guidelines
  2. Part 2: Animation 1 – 4
  3. Part 3: Animation 5: Delete Item

Animation 5: Delete Item

This is the last of my favorite animations. Delete Item is 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.

image_thumb[20]image_thumb[29]It’s a combination of animations:

  1. Select Item
    Shrink it using the ScaleTransform’s ScaleX and Scale Y properties.
  2. Unload Item
    Drop it using the TranslateTransform’s X property.

Note: You might have already noticed that we are using two Transforms to accomplish this. As a result, we need an additional object called the TransformGroup.

This will act as the container of the two transforms. It will be this TransformGroup that we will set to the LayoutRoot’s RenderTransform property.image_thumb[18]_thumb_thumb

There are two important parts to this animation:

  1. It is fast – the user does not feel they are losing time watching their item deleted
  2. It results in a page navigation back to an updated list without the deleted item


What makes this more than just a combination of animations is that the different animations must follow in parallel. There are different techniques to accomplish this. In this case, I am using the BeginTime property of the second animation (the drop animation). This causes it to wait for a specified period before animating.

Take a look:


In the code above we introduce the TransformGroup. This is necessary because we have two transforms to animation – the ScaleTransform and the TranslateTransform. The TransformGroupwill contain these different transforms we need.


Just like in the Select Item animation, we create two double animations – for the ScaleX and ScaleY properties respectively. The animation will take .25 seconds. This is a nice, fast duration, but easy for the user to see occur.


In the code above, see the BeginTime property in the DoubleAnimation initializer? This will cause the animation to wait for .45 seconds. The resulting UI effect is that the initial resize will occur, there will be a brief pause, and the drop will start, just like in the Unload Item animation.

Note: You might also notice that there is no easing method here. The reason for this is not oversight. It is because we want to communicate, visually, that the content is being thrown away. Easing would show a kind of hesitation.

Overall this is a beautiful effect – and easy to implement thanks to my Delete() method.

Get the code here.


Animation is a powerful tool in any Windows Phone application developer’s toolbox. However, with great power comes great UI. Though it is easy to overdue things. Though it is easy to be a little too eager. It is equally easy to underdo things. Animations are not just a tool we can use, they are a tool we should use.

  • Animations allow our application to look natural, fitting in with the phone’s native applications
  • Animations make our applications cool and fun to use, leveraging Silverlight’s animation engine

Most of all, animations are a wonderful defense against the UNISTALL button!

Remember the basic animations:

  1. Turnstile
  2. Select Item: get the code
  3. Load Item: get the code
  4. Unload Item: get the code
  5. Delete Item: get the code

I hope these drop-in methods are useful to you while building your Windows Phone applications.

Best of luck!

Source:  http://blog.jerrynixon.com/2012/01/mango-sample-5-must-have-animations.html

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}