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

• Download PathListBoxDemo-II - 468.23 KB

Introduction

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 how to animate the items in a specific direction. This will not only guide you for animation in PathListBox, but will also help you in 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 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 already been 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. Any change you make in the UI will come under the animation.

For our example, we want to rotate it in a 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.

Let's zoom it a little. You will notice the following buttons in the timeline. There are more but the following are more useful while creating/modifying a Storyboard.

1. Now see in Step 1, an 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 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. The third one plays the current animation. The fourth one moves the navigator forward by one keyframe. The last one is useful to move the navigator at the end keyframe of the storyboard.

Let us 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 5^th 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 an anticlockwise full rotation of the circular path and its 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 an infinite loop of the rotation. Follow the steps given below to add a repeat count to the animation:

1. In the “Objects and Timeline” panel, look near the path control. You will see that 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 its 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 the Storyboard name and the “Add new Storyboard” menu. Clicking 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 do 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 targeting 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 the very beginning 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 0^th Timeline and begin with an angle of 0 degree change and end with an angle of 360 degree after 5 sec.

Let's 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 beginners in Silverlight to get some basic idea on Storyboard too. Bookmark and share this with all who need 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.

History

• 29^th July, 2010: Initial post