Silverlight – Create StoryBoard to move elements

submit to reddit

In this tutorial, we will show you how to create a Story Board in Silverlight to move the elements from one position to another. Silverlight gives designers the ability to create some move effects, which can be accomplished just by few lines of code. Follow the steps in order to accomplish the task.

We can discuss about creating a Move effect via  C# program OR creating a Story Board in XAML file.

How to Create Move Effect via C# Program:

Step 1] Create Some UI Elements that you want to Move. In this Case we are creating a Rectangle with an Image.

1
2
3
4
Rectangle r1 = new Rectangle();
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri("images/1.jpg", UriKind.Relative));
r1.Fill = imageBrush;

Step 2] Create a Canvas and Add the Created element to it.

1
canvas2.Children.Add(r1);

Step 3] You can create a storyboard dynamically using the following
code. Storyboard control is used to animate properties of an
object.

1
Storyboard sb1 = new Storyboard();

Step 4] Now its time to create a Double Animation. Before that, we can see some of the properties of DoubleAnimation.

  • Storyboard.TargetProperty – The element property that you wish to animate.
  • Storyboard.TargetName- The object you want to animate
  • Duration – how long the animation should take.
  • From/To – The start and end values you want the property to be set to. Default value is 1.0.
  • AutoReverse -reverse animation course once it’s completed.

Now to create a double animation,

1
2
3
4
5
6
DoubleAnimation da1 = new DoubleAnimation(); DoubleAnimation da2 = new DoubleAnimation();
//For X Axis
da1.To = 200; // The element will move from his place (0) to (200).
Storyboard.SetTarget(da1, r1); Storyboard.SetTargetProperty(da1, new PropertyPath("(Canvas.Left)"));
//For Y Axis Storyboard.SetTarget(da2, r1);
Storyboard.SetTargetProperty(da2, new PropertyPath("(Canvas.Top)"));

Step 5] Finally, add both the double animations to the Story board and then add the story board to the main Layout Grid.

1
2
sb1.Children.Add(da1); sb1.Children.Add(da2);
LayoutRoot.Resources.Add("sb1", sb1);

Step 6] Start the Storyboard.

1
sb1.Begin();

How to Create Move Effect in XAML file:

We can also define the storyboard and double animation in the storyboard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<UserControl x:Class="jump_try1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="637" d:DesignWidth="793"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk
">

<UserControl.Resources> <Storyboard x:Name="move1">
<DoubleAnimation x:Name="goX1" Storyboard.TargetName="none"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1"/>
<DoubleAnimation x:Name="goY1" Storyboard.TargetName="none"
Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:1"/>
</Storyboard> </UserControl.Resources>
//Add your Grid Layout Root here. </UserControl>

Now you can call the Storyboard by just move1.begin();

Write your comments/concerns about this post.