Windows Phone 7 (2 of n): Animation Basics

juin 25

Windows Phone 7 (2 of n): Animation Basics

By guillem.mazarico Non classé, Silverlight, Technique, WP7 Add comments

This post will focus on animations. While Silverlight is a very capable technology for creating rich user interfaces, Windows Phone 7’s UI languages, codenamed Metro, has very strong red threads and principles which push typography, panoramic navigation and animation. One might find the experience a bit bland at first, but it really comes alive when one sees the UI in motion. A post dedicated to Metro is planned, but for now I suggest you read these nice articles.

If you base your design principles on Metro and try to embrace the design of WP7’s default applications, you will want to animate parts of your UI on actions or based on a timer.

Animations can be created in very different ways: some can be created through the Blend tool when the targets are well-defined and are static, some have to be handled through code when their targets are dynamically generated.
Let’s discuss the more complicated case, the dynamic generation of animations. We will go through Blend animations later on.

The goal

The goal of this tutorial is to animate items in a list randomly. Items are displayed as two-side tiles, which flip to display the “back” of the tile. This could be useful to display a list of photos for example, without having to overcrowd the UI with long titles and descriptions (i. e. secondary information). This information would be written on the back of the tile.

Here is a preview:

Items are animated randomly at a regular time interval. To affect visual objects with a timer, we will use the DispatcherTimer, simply because using a regular timer would cause us a headache when dealing with cross-thread invoking (don’t worry if you do not understand this, it is not required to read the article).

Designing the data

Let’s design the data we want to display on the tile:

public class DataExampleInformation
{
    public string Title
    {
        get;
        set;
    }
  
    public string Description
    {
        get;
        set;
    }
}
  
public class DataExample
{
    public ImageSource ImageSource
    {
        get;
        set;
    }
  
    public DataExampleInformation Description
    {
        get;
        set;
    }
}
  

These data classes are relatively straightforward. The DataExample class contains an image, the one to display on the front of the tile, and a reference to another object of type DataExampleInformation which contains both title and description, i.e. the data to be displayed on the back of the tile. The second class is purely artificial of course but it will show an applied example of deep data-binding.

When a list of items is bound to a listbox, the listbox will take each item of the list and display it according to its ItemTemplate. The ItemTemplate property on the list is of type DataTemplate. The default DataTemplate displays the data in a TextBlock whose text fields binds to the data’s string representation. Since we want to display our picture and data, we need to create our own DataTemplate.

Creating the usercontrol

Let’s create a new UserControl to host our work and call it AnimatedTilesUserControl. Create a listbox as the only element in this usercontrol, and let’s customize the way items will be displayed by creating a new DataTemplate.

<DataTemplate x:Key="DataTemplateTileDataExampleItem">
    <Grid x:Name="TileGrid" Height="150" Width="150" Margin="5">
        <Grid x:Name="BackGrid">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFB64F4F" Offset="0"/>
                    <GradientStop Color="#FFCE0F0F" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0"
                       TextWrapping="Wrap" d:LayoutOverrides="Width, Height"
                       Text="{Binding Description.Title}"
                       FontFamily="Segoe UI Semibold" FontSize="24" 
                       HorizontalAlignment="Center"/>
            <TextBlock Grid.Row="1"
                       TextWrapping="Wrap" d:LayoutOverrides="Width, Height"
                       Text="{Binding Description.Description}"
                       FontFamily="Segoe UI Semibold" FontSize="18" 
                       HorizontalAlignment="Stretch"/>                    
        </Grid>
        <Grid x:Name="FrontGrid">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF356D6E" Offset="0"/>
                    <GradientStop Color="#FF00F9FF" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Image Source="{Binding ImageSource}" />
        </Grid>
    </Grid>
</DataTemplate>        
  

This custom DataTemplate has two grids, one to display the front content, one to display the back content of the tile. Here, only the FrontGrid will be visible since it takes all the space available and is declared after the BackGrid. This is called the Z Order. The last items declared in XAML are always displayed front-most. The size of the items is absolute and set to width=150 and height=150 to mimic the square tiles of WP7 start experience. You could of course have other aspect ratios and sizes.

Now that we are done with this, we need to animate the items. To achieve a nice flip effect, we will use Silverlight’s projection feature. Every single UIElement can be displayed in 3 dimensions simply by changing 3 parameters: RotateX, RotateY and RotateZ which are 3 properties of the PlaneProjection class.

The obvious way to have a flip effect is to animate the RotationX property from 0 to 180 degrees. The RotationX value change will make the element rotate around the X axis.

Looking at the DataTemplate we’ve already created, and since we need to animate the whole tile, there are a few things to be changed in the TileGrid.

<DataTemplate x:Key="DataTemplateTileDataExampleItem">
     <Grid x:Name="TileGrid" Height="150" Width="150" Margin="5">
         <Grid.Projection>
             <PlaneProjection RotationX="45"
                              CenterOfRotationY="0.5"/>
         </Grid.Projection>
    …
  

We declared a projection transformation on the TileGrid. The value (45 degrees) set to the RotationX property is quite random, just to show the way the whole element is projected, before actually taking care of animating the value to produce a smooth flip animation.

Play around with the CenterOfRotationY property to see how it affects the actual projection of the tile. For example, set it to 0 or 1 and see how it changes.

Since we want to animate each tile randomly every time our DispatcherTimer ticks, our data item must be wrapped in an element whose properties can be animated. Such a wrapper must then inherit from DependencyObject and declare the various properties that will be animated.

public class AnimatedTile : DependencyObject
{
    public object Data { get; set; }
  
    public static DependencyProperty RotationXProperty = DependencyProperty.Register("RotationX", typeof(double), typeof(AnimatedTile), new PropertyMetadata(0.0));
    public double RotationX
    {
        get { return (double)GetValue(RotationXProperty); }
  
        set { SetValue(RotationXProperty, value); }
    }
  
    public double CenterOfRotationY { get; set; }
  
    public AnimatedTile()
    {
        this.CenterOfRotationY = 0.5;
    }
  
    public AnimatedTile(object data)
        : this()
    {
        this.Data = data;
    }
}
  

This class declares a DependencyProperty, meaning the binding facility will be able to know when it gets updated automatically. It also features a Data property which will contain the actual business object, in our case an instance of the DataExample class.

Let’s update the DataTemplate to bind to these DependencyProperties:

<DataTemplate x:Key="DataTemplateTileDataExampleItem">
    <Grid x:Name="TileGrid" Height="150" Width="150" Margin="5">
        <Grid.Projection>
            <PlaneProjection RotationX="{Binding RotationX}"
                             CenterOfRotationX="{Binding CenterOfRotationX}"/>
        </Grid.Projection>
        <Grid x:Name="BackGrid">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFB64F4F" Offset="0"/>
                    <GradientStop Color="#FFCE0F0F" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0"
                       TextWrapping="Wrap" d:LayoutOverrides="Width, Height"
                       Text="{Binding Data.Description.Title}"
                       FontFamily="Segoe UI Semibold" FontSize="24" 
                       HorizontalAlignment="Center"/>
            <TextBlock Grid.Row="1"
                       TextWrapping="Wrap" d:LayoutOverrides="Width, Height"
                       Text="{Binding Data.Description.Description}"
                       FontFamily="Segoe UI Semibold" FontSize="18" 
                       HorizontalAlignment="Stretch"/>                    
        </Grid>
        <Grid x:Name="FrontGrid">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF356D6E" Offset="0"/>
                    <GradientStop Color="#FF00F9FF" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Image Source="{Binding Data.ImageSource}" />
        </Grid>
    </Grid>
</DataTemplate>        
  

You can notice here that the binding path to the business object has been slightly changed to reflect its embedding in the AnimatedTile wrapper.

Animating the tiles

First, declare a DispatcherTimer and register an event handler to its tick event.

private Random rdm = new Random();
private DispatcherTimer dispatcherTimer = new DispatcherTimer();
  
public AnimatedTilesUserControl()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(AnimatedTilesUserControl_Loaded);
}
  
void AnimatedTilesUserControl_Loaded(object sender, RoutedEventArgs e)
{
    // Binding a list of items to the listbox
    this.ItemsListBox.ItemsSource = dataItems;
  
    // Setting up and starting the timer
    dispatcherTimer.Interval = TimeSpan.FromSeconds(5);
    dispatcherTimer.Tick += new System.EventHandler(dispatcherTimer_Tick);
    dispatcherTimer.Start();
}
  
private void dispatcherTimer_Tick(object sender, System.EventArgs e)
{
    // Animate the tiles here
}
  

This timer will help us execute an action every five seconds. The ItemsSource property of the ListBox is set to some very straightforward sample data similar to this:

private List<AnimatedTile> dataItems = new List<AnimatedTile>()
{
    new AnimatedTile(new DataExample()
    {
        Description = new DataExampleInformation()
        {
            Description = "This is the description for icon 1",
            Title = "Icon 1"
        },
        ImageSource = new BitmapImage(new Uri("/pics/appbar.1.png", UriKind.Relative))
    }),
    new AnimatedTile(new DataExample()
    {
        Description = new DataExampleInformation()
        {
            Description = "This is the description for icon 2",
            Title = "Icon 2"
            },
        ImageSource = new BitmapImage(new Uri("/pics/appbar.2.png", UriKind.Relative))
    })
};
  
  

On every timer tick, let’s pick one random item and animate it.

private void dispatcherTimer_Tick(object sender, System.EventArgs e)
{
    // Get the index of the tile to animate
    int itemToAnimate = rdm.Next(this.dataItems.Count);
  
    // Get the tile/wrapper
    AnimatedTile tileToAnimate = this.dataItems[itemToAnimate];
  
    // Animating the RotationX property with the default linear function
    Storyboard sb = new Storyboard();
    DoubleAnimation da = new DoubleAnimation();
    da.From = tileToAnimate.RotationX;
    da.To = tileToAnimate.RotationX + 180;
    da.Duration = TimeSpan.FromSeconds(1);
  
    Storyboard.SetTarget(da, tileToAnimate);
    Storyboard.SetTargetProperty(da, new PropertyPath(AnimatedTile.RotationXProperty));
    sb.Children.Add(da);
  
    sb.Begin();
}
  

To animate an object, it is necessary to create a storyboard. Think of it as the higher level animation manager that can receive high-level commands such as Begin and Stop. Specific element animations can then be attached to it. In our case, we decided to animate the RotationX DependencyProperty of the AnimatedTile wrapper with a DoubleAnimation. The value of this property must be increased by 180 degrees for an actual flip. Setting the duration of the animation to 1 second will change the value of the property from the From value to the To value in a linear fashion. Advanced easing functions can also be specified, see http://msdn.microsoft.com/en-us/library/cc189019(VS.95).aspx#easing_functions .

Now if you watch this animation unfold, you will notice the tile is flipped correctly. However, once the animation is complete, you will see the back of the FrontGrid element, not even the back of the BackGrid. To remedy this, we will need to change the order of the displayed elements at the middle of the animation. The display order of the elements is handled through the ZIndex property. This property’s type being an int, a DoubleAnimation would not do. To change this property through the storyboard, we will thus use an ObjectAnimationWithKeyFrames.

The ObjectAnimationWithKeyFrames describes an animation through the use of KeyFrames. You set the value you want the property to have at the time you specify, it’s that simple. Here’s what we need to do to change the ZIndex.

Change the AnimatedTile wrapper to include a ZIndex DependencyProperty.

public static DependencyProperty ZIndexProperty = DependencyProperty.Register("ZIndex", typeof(int), typeof(AnimatedTile), new PropertyMetadata(0));
  
public int ZIndex
{
    get { return (int)GetValue(ZIndexProperty); }
    set { SetValue(ZIndexProperty, value); }
}

Change the DataTemplate and bind the BackGrid’s ZIndex to the AnimatedTile’s ZIndex DependencyProperty.

<DataTemplate x:Key="DataTemplateTileDataExampleItem">
    <Grid x:Name="TileGrid" Height="150" Width="150" Margin="5">
        <Grid.Projection>
            <PlaneProjection RotationX="{Binding RotationX}"
                             CenterOfRotationX="{Binding CenterOfRotationX}"/>
        </Grid.Projection>
        <Grid x:Name="BackGrid"
              Canvas.ZIndex="{Binding ZIndex}">
   …

Finally, let’s add the animation of that ZIndex value in the timer tick event.

private void dispatcherTimer_Tick(object sender, System.EventArgs e)
{
    // Get the index of the tile to animate
    int itemToAnimate = rdm.Next(this.dataItems.Count);
  
    // Get the tile/wrapper
    AnimatedTile tileToAnimate = this.dataItems[itemToAnimate];
  
    // Animating the RotationX property with the default linear function
    Storyboard sb = new Storyboard();
    DoubleAnimation da = new DoubleAnimation();
    da.From = tileToAnimate.RotationX;
    da.To = tileToAnimate.RotationX + 180;
    da.Duration = TimeSpan.FromSeconds(1);
  
    Storyboard.SetTarget(da, tileToAnimate);
    Storyboard.SetTargetProperty(da, new PropertyPath(AnimatedTile.RotationXProperty));
    sb.Children.Add(da);
  
    // Animating the ZIndex property to play on the display element
    ObjectAnimationUsingKeyFrames oa = new ObjectAnimationUsingKeyFrames();
    DiscreteObjectKeyFrame deokf = new DiscreteObjectKeyFrame();
    deokf.KeyTime = TimeSpan.FromSeconds(0);
    deokf.Value = tileToAnimate.ZIndex;
    oa.KeyFrames.Add(deokf);
  
    // In the middle of rotation, change ZIndex to 1 to show back of tile
    deokf = new DiscreteObjectKeyFrame();
    deokf.KeyTime = TimeSpan.FromSeconds(0.5);
    deokf.Value = (tileToAnimate.ZIndex == 0) ? 1 : 0;
    oa.KeyFrames.Add(deokf);
  
    Storyboard.SetTarget(oa, tileToAnimate);
    Storyboard.SetTargetProperty(oa, new PropertyPath(AnimatedTile.ZIndexProperty));
    sb.Children.Add(oa);
  
    sb.Begin();
}

To recap the animation:

start to flip at t=0s from 0 degrees
set ZIndex of BackGrid to 0 at t=0s
set ZIndex of BackGrid to 1 at t=0.5s; at that time, the TileGrid’s RotationX DependencyProperty’s value is 90 degrees
at 1s, ZIndex of BackGrid is 1 and TileGrid’s RotationX DependencyProperty’s value is 180 degrees

You will notice now that the back of the tile is shown correctly once the animation has reached the second half. However, the content of the back part is flipped! It makes sense when you think about it. To correct this, simply specify a transformation:

<Grid x:Name="BackGrid"
      Canvas.ZIndex="{Binding ZIndex}"
      RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <CompositeTransform ScaleY="-1"/>
    </Grid.RenderTransform>
    <Grid.Background>
   …
  

When specifying the origin of the transformation and the value of the ScaleY DependencyProperty to -1, it will flip the content of the BackGrid and display it as it should.

The center of the transform is important as well: you have to specify coordinates the middle of the element to achieve the expected effect, so (0.5, 0.5).

Post comments if you want more details, I intend to share the source code for it in a little while but you should have all the information you need to build your own project.

Partager :

3 Responses to “Windows Phone 7 (2 of n): Animation Basics”

Tweets that mention Windows Phone 7 (2 of n): Animation Basics -- Topsy.com dit :

25 juin 2010 à 15 h 35 min

[...] This post was mentioned on Twitter by Larry King, Larry King. Larry King said: Windows Phone 7 (2 of n): Animation Basics http://bit.ly/aJsY36 #SL #RIA [...]
Series of Tutorials for WP7 | Phone 7 dit :

5 juillet 2010 à 14 h 28 min

[...] (2 of n) – Animation Basics [...]
Tim dit :

28 novembre 2010 à 1 h 34 min

Thanks for the sharing your tutorial. I’m really struggling to get this working on my project. Any idea when the source will be available? Thanks again for sharing.

L	Ma	Me	J	V	S	D
« mai				juil »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30