Over a million developers have joined DZone.

Moving Robots with a Dynamic Storyboard in WP7

DZone 's Guide to

Moving Robots with a Dynamic Storyboard in WP7

· Mobile Zone ·
Free Resource

One thing I have come across was a dynamically manipulatable storyboard that was created by a designer. This demo I created basically moves the robot seen in Figure 1 to any position you specify in the textbox.


Figure 1. Moving the robot by dynamically modifying the storyboard

In following section, let’s start by creating the storyboard.

Creating Storyboard

First you will need to create the storyboard where the robot will be moving from one location to the other location as shown in Figure 2 below.


Figure 2. Create the storyboard of moving robot

In the next section, you will learn to modify xaml so you can dynamically change the x and y coordinates in the code based on the x and y input textboxes.

Modifying XAML

First let’s open Main.xaml, which contains the robot storyboard. You will be able to see the storyboard that you just created named MoveRobot in phone:PhoneApplicationPage.Resources section as shown below.


<Storyboard x:Name=”MoveRobot”>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(CompositeTransform.TranslateX)” Storyboard.TargetName=”RobotLayout”>

<EasingDoubleKeyFrame KeyTime=”0″ Value=”0″/>

<EasingDoubleKeyFrame x:Name=”posX” KeyTime=”0:0:2″ Value=”193″/>


<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(CompositeTransform.TranslateY)” Storyboard.TargetName=”RobotLayout”>

<EasingDoubleKeyFrame KeyTime=”0″ Value=”0″/>

<EasingDoubleKeyFrame x:Name=”posY” KeyTime=”0:0:2″ Value=”205″/>




When you look at the xaml you will notice the key frame CompositionTransform.TranslateX and TranslateY, which are responsible for specifying the coodinates where the robot will move. Name the CompositionTransform.TranslateX and TranslateY node using x:Name, which will now allow you to reference them in the code and specify the value dynamically.

Modifying the Storyboard Dynamically

Now you created references to posX and posY in XAML and you will be able to reference them and change the value as shown in below code during the button click event.

private void btnMove_Click(object sender, System.Windows.RoutedEventArgs e)


posX.Value = Double.Parse(txtX.Text, CultureInfo.InvariantCulture);

posY.Value = Double.Parse(txtY.Text, CultureInfo.InvariantCulture);



Download Code


This is a useful technique because you can have a nice animation created by the designer and allow the developers to manipulate any part of the animation. For example, SteakCooker (http://social.zune.net/redirect?type=phoneApp&id=4e26e56f-14ed-df11-9264-00237de2db9e) uses this blog technique to manipulate the time because the time dynamically has to change depending on the size of steaks and how the user wants the steak cooked.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}