Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating reusable animations programmatically in Silverlight and Windows Phone

DZone's Guide to

Creating reusable animations programmatically in Silverlight and Windows Phone

· 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

As many of you know, I answer a lot of emails regarding Windows Phone development and last week I was asked to show how to create reusable Storyboards with animations programmatically in Silverlight (Windows Phone). Of course, there are plenty tutorials in the internet, but I have decided to create my own. In a nutshell, in this post I am going to create a reusable Storyboard based on DoubleAnimation (for translate transformation), which can be applied for any instance of UIElement.


First of all, I will create a default page, add a Rectangle control to ContentPanel (Grid) and apply a new instance of TranslateTransform to rectangle’s RenderTransform property. If you are familiar with Silverlight, then you, probably, know that Rectangle control inherit from UIElement.

Rectangle rect = new Rectangle
    {
        Fill = new SolidColorBrush(Colors.Green),
        RenderTransform = new TranslateTransform()
    };
ContentPanel.Children.Add(rect);

Next step is to create a method to produce a reusable Storyboard. This method will take UIElement as parameter and return a new instance of Storyboard. Notice that within the storyboard I have modified TranslateTransform.Y property of UIElement using PropertyPath.

public Storyboard CreateAndApplyStoryboard(UIElement targetElement)
{
    Storyboard sb = new Storyboard();
 
    DoubleAnimation animation =
        new DoubleAnimation {From = 0, To = 700};
 
    Storyboard.SetTarget(animation, targetElement);
    Storyboard.SetTargetProperty(animation,
        new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.Y)"));
 
    sb.Children.Add(animation);
    return sb;
}

Finally, to try that Storyboard in action, simply, call Begin method for a storyboard instance. Check my code bellow:

Storyboard sb = CreateAndApplyStoryboard(rect);
sb.Begin();

Now you can create a new instance of such storyboard for every instance that derives from UIElement class.

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

Topics:

Published at DZone with permission of Jevgeni Tšaikin. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}