Beginners Guide to Silverlight 4 PathListBox Control (Part–II)

In my previous article “Beginners Guide to Silverlight 4 PathListBox Control (Part-I)” I described about creating your very first PathListBox control in your Silverlight application followed by creating a Circular path to position the items in the circular edge. From that article, I think you are now familiar with it.

In this post, I will demonstrate you guys how to animate the items in a specific direction. This not only guide you for animation in PathListBox but also will help you understanding the StoryBoard creation (if you are very new to Silverlight). Read the whole article and at the end don’t forget to leave your comments.

Creating a Storyboard for Animation

Let us start by creating a Storyboard for our previous sample application. Here we will do rotating of our circular path which when rotates will also rotate the items present in the circular path. It is very easy to create a Storyboard in Expression Blend as it gives you more power to the UI, hence we will use Blend here to design our animation.

Follow the below steps to understand about storyboard animation and begin with the example:

1. Select the Path control named “path”
2. Now as shown in the below snapshot, click on the ‘+’ icon dropdown bottom next to the “Objects and Timeline” section. This is the option to create an animation in Silverlight. Why Silverlight? This option is also available in WPF applications to create a Storyboard.
3. From the dropdown you will see an option named “New…”. Click on that.

Once you click on the “New…” option from the dropdown, it will open up a dialog box named “Create Storyboard Resource”. This has a TextBox where you can enter the name of your Storyboard. In our example we will name it as “sb_RotatingItems”. Click “OK” to continue.

Creating KeyFrames in the Timeline

The above steps will create a blank animation for you. Now, it is time to give a visual to the animation. You will notice that the created Storyboard has been already selected in the left panel and in the UI design panel it is surrounded with a RED Border. This means that, you can now modify the storyboard in the design window. If you do any change in the UI will come under the animation.

For our example, we want to rotate it in circular way. So, let’s jump into it to create the animation. Follow the simple steps mentioned below and try to understand each one of them clearly. If you have any queries, please use the below comments/feedbacks form. I will try to answer your queries as soon as possible.

1. Here you will see a red circular icon (Step 1 & Step 2). This informs that, the storyboard is in Edit Mode. Whatever you do in this edit mode will reflect in your animation.
2. In Step 2 of the snapshot, you will see a Yellow marker available in the timeline. This is used to move the timeline front or backward.

Lets make it little Zoom. You will notice the following buttons in the timeline. There are more but the followings are more useful while creating/modifying a Storyboard.

1. Now see in the Step 1, a ellipse is there in the timeline with a ‘+’ sign. This is to create a KeyFrame in the timeline.
2. There are five buttons available in the Step 2 and Step 3. The first one positions the Yellow navigator of the timeline to the first position. The second button will move the navigator one step backward. Third one plays the current animation. Fourth one moves the navigator forward by one keyframe. The last is useful to move the navigator at the end keyframe of the storyboard.

Let use create a new Keyframe (the first one at ZERO position) for our Storyboard.

1. Select the path control added in the Grid and click on the “Record Keyframe” button to add a new frame in the zeroth timeline. Be sure that, the yellow navigator is placed at the zero position.
2. This will add a blank keyframe in the same position of the navigator for the selected path control.

Now as our first Keyframe is ready, it’s time to do some animation for a specific duration. We will do it for 5 secs. You can use any number of duration in the timeline.

1. Drag the navigator to the 5th second. Also you can try the Next Keyframe button to move the navigator by one frame position.
2. Click “Record Keyframe” button once again. This will add a new Keyframe in the timeline.
3. You will notice that, the two keyframes are connected by a selection. See the below snapshot.

Adding Animations to the Storyboard

It’s time for us to add the animation in the Storyboard timeline. Be sure that the last keyframe is selected in the timeline panel. We will put a rotation in this frame. As our first frame is empty, it will create an animation from that keyframe to the last one to complete the rotation.

1. Go to the properties panel of the path control and expand the “Transform” frame.
2. There you will find another tab called Rotate. Click this and it will open up the tab contents.
3. In the Textbox named degree put some numeric value of the angle of the rotation. If you put positive value, it will rotate clockwise and if you put negative value, the animation will happen anticlockwise. We can use “360” in our case as we need a full rotation. This will do a clockwise rotation.

As we need a anticlockwise full rotation of the circular path and it’s contents, put “-360” as the value to the degree input box.

Now the animation that we created here will run for a single rotation and then it will stop. But, we need infinite loop of the rotation. Follow the following steps to add a repeat count to the animation:

1. In the “Objects and Timeline” panel look near to the path control. You will see it can be expandable. Click on the small arrow to expand the content of the control.
2. You will see “RenderTransform” as the immediate child and then “Rotation” as it’s siblings.
3. Right Click on the “Rotation” item will open a context menu named “Edit Repeat Count”.

Clicking on “Edit Repeat Count” context menu item will open the dialog named “Edit Repeat” to the screen.

1. Here in the new opened dialog, you can provide any number as the value of “Repeat” textbox. If you put 5, the animation will run 5 times continuously. There is another button on the right called “Set to forever”. Clicking on it will set the animation looping for infinite time.
2. Once you click on “Set to forever”, this will set the value for the Repeat property to “Forever” and will be visible in the TextBox next to it.
3. Click “Ok” to save the changes made to the Storyboard.

Now check in the below screenshot, there is a button called “Close Storyboard” near to the Storyboard name and the “Add new Storyboard” menu. Click on it will close the Storyboard and bring the animation to normal mode from the edit mode.

You will see an Arrow placed near to the “Close Storyboard” button. Clicking this will open up one search panel where all the storyboards attached to the page will be listed there.

Knowledge on the XAML

Our storyboard is ready for us. But what did the Blend IDE done in the XAML page? Let’s have a look into this:

You will notice that, it added a Storyboard as a Resource to the UserControl which has a DoubleAnimationUsingKeyFrames as the child. It is targetting the Rotation property of the RenderTransform of the UI control named “path”. RepeatBehavior=”Forever” represents the looping time of the animation. Here it will be infinite. If you put 5 here, it will call the animation 5 times only.

Later you will see there are two frames in the XAML. The first Keyframe we added at very first will have a value=”0” and the last frame placed after 5sec duration will have a value=”360”. From this you can clearly understand that, the animation will start from the 0th Timeline and begin with an angle of 0 degree change and end with an angle of 360 degree after 5 sec.

Lets see more on the UI control named “path”. You will see that, it has a child called CompositeTransform wrapped with RenderTransform. This ensures that, you have a smooth animation effect either Scaling of the control, Rotation of the control, Skewing of the control or TranslateTransform i.e. positioning of the control. “CompositeTransform” will have a mixed behavior of the animation defined in the Storyboard.

Calling the Storyboard from the code

As you know, our XAML code is ready but if you run the application now, it won’t run the animation. We need to call the Storyboard to run. To do this, first we have to get the reference of the Storyboard from the page Resource by specifying the storyboard name as Key. Then we have to call the Begin() method which actually runs the animation. Have a look into the code. In this example, I am adding the code in the constructor. But as your need, you can place it in any portion of the code block.

Demo

Now run your application and you will see that the Circular Path starts rotating in the anticlockwise direction. Not only that, it also started rotating the items present in the edge of the circular path.

End Note

This was a small demonstration of Storyboard creation with full coverage of animating any content control in any direction of a specified path using the new PathListBox control. Hope, this post will be useful for the beginners in Silverlight to get some basic idea on Storyboard too. Bookmark and share this to all who needs to learn about it.

Also, don’t forget to leave your comments/suggestions as this helps me to serve you better by writing more articles in Silverlight with proper steps and snapshots.

Download the Entire Source Code of the Application