Over a million developers have joined DZone.

Moving Robots with a Dynamic Storyboard in WP7

· Mobile Zone

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.

SNAGHTML909d69

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.

SNAGHTML947f20

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.

<phone:PhoneApplicationPage.Resources>

<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>

<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″/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</phone:PhoneApplicationPage.Resources>

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);

MoveRobot.Begin();

}

Download Code

Conclusion

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.

Topics:

Published at DZone with permission of Henry Lee, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
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.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}