Understanding Animation

From childhood we all are fascinated by one thing- movement of static objects or Animation. I feel the best part in Silverlight is its ability to animate things and fascinate its users. Animation always doesn't mean make a man run or breaking a table. Simple page transitions in a site or changes in the button when you hover over it , also comes under animation. So lets see how beautiful this animation can be. First we will animate a simple ball (an ellipse in technical terms!) using blend and then in the next part we will do the same animation from the code behind. So lets begin with it.

First rule in animation which I follow is to picturize it in your mind. So here is the picturization:
Lets think of a ball moving and falling in to a basket.

Here is the application in action

1. For the representation of the ball we would need something that looks like a ball. The closest would be an ellipse.



2. Now, think of the movement of the ball. The ball should bounce and roll over.So we would have to create a ground for it and keep this in mind. for the ground we can think of rectangle with a skew.



3. Next, we would have to think about the basket where we would be putting the ball. That can be again 2 ellipses with a skew(i mean a twisted ellipse). To give it an actual basket's feel we will take three such ellipses.

We would add few paths to make it look like a net.We have completed our picturization and now that it really looks like a basket ball court, let's begin with the animation!

We can create storyboard and give timelines to it, so as to achive the movement of the ball.Here I have given the ball only two types of transformation i.e rotate transform and translate transform.

Rotate transfrom would give the ball its rolling over kind of effect, whereas, translate transform(TranslateTransform.Y, TranslateTransform.X) would give it the up and down motion or translation in x and y directions.To adjust the timeline, you just have the drag the white point! It is so easy!! Let us see the final animation!

Here is the complete source code for it.

In the next post you will see this animation done entirely in code.So keep watching this space!

Silverlight Flexible Layout

Hi friends,
I have seen in Silverlight forums and other places that there are some confusions about Layouts. Specially how to give your Silverlight application a flexible layout that will be adjusted automatically as browser resize. Hope this post helps.

Basically there are two ways of doing it. One is from code where you will change the height,widths of controls as browser resizes. Another is creating layout as it automatically changes with browser resize. I will explain the later here.

Silverlight has 3 layout controls. Grid, StackPanel and Canvas. Canvas is NOT A FLEXIBLE ONE. Other two are. That does not mean you will not use Canvas but you will use it where you know the canvas does not have to be adjusted with browser resize.

So basically we will try building the following layout.



Now the top part is flexible provided that the text will come in middle. Middle green part is flexible but has a orange box in it that is fixed size. Bottom left red part is fixed but right skyblue part is flexible with text aligned to right.

Now come to the Page.xaml. There will be one LayoutRoot Grid is already defined. Now as you can see we will have 3 rows in the LayoutRoot Grid. Top white one middle one and bottom one.
We will set fixed height for top and bottom rows and let the middle row occupy the remaining height. I have given 100px for Top one and 100px for bottom one.

We will put one Grid for each row namely TopGrid, MiddleGrid and BottomGrid and set their Grid.Row property to 0,1 and 2 respectively.

Now we will define two columns for the BottomGrid. First one with fixed width ( 70 here) and the second one with remaining size. We will also add two Grids inside bottom grid and set Grid.Column to 0 and 1 respectively. We will name them as LeftBottomGrid and RightBottomGrid.

Now if you set the Grid backgrounds as the above image your application will look something like the following in the design view.



My Usercontrol width and height are 40o and 500 respectively.

Now we will add one textblock in the TopGrid and with text "WELCOME TO SILVERLIGHT" and set text align to center. Also set its vertical align ment to center.

We will add one canvas with orange background inside MiddleGrid and set its height and width to 100.

We will finally add another textblock in the RightBottomGrid with text "Code name Mrgni" and have its text alignment right. Also set its vertical alignment to center.

Now remove the height and width from the UserControl tag. It is required as we want our Silverlight application to Streach the entire div it has been assign to. Now run the application and here it goes....

Now here we have not used any relative positioning. But that can be done easily. Suppose you want the TopGrid to always have the height 100 but want the BottomGrid to have 1/5 th of remaining height and rest part to be occupied to MiddleGrid. Just change LayoutGrid's rowdefinitions as 100, 4*, 1* and you are done.

Here is the complete source for it. Please leave a comment if you have any doubt or any correction. I have done this application totally from Visual Studio but you can do it from blend as well.

Skinning a Simple Slider

[ Updated for Silverlight 2 ]

Hi all,

In this post I will explain how we can make a customized slider from the default one. Silverlight makes customizing a control very easy. We will concentrate on the design part only and try to do total thing without looking to the xaml code.

Here is how it will look finally.


Upper one is the default one and the lower one is the customized one.

Silverlight separates a controls programmatic behavior to its look and feel. Changing one of them does not affect the other.

Now here we will modify the look and feel of it. In other words we will change the default Template" or "Skin" the slider.

We will try to modify it in expression blend because though theoretically it can be done from Visual Studio practically it is lot more easier in blend.

Now first we have to understand Silverlight slider control consists of different parts. First of all it has vertical and horizontal part. Here we are using Horizontal one and that is default. Each of them consists of same set of components. Here we will concentrate on horizontal one but same concept will be applied for vertical one also.

Now Make a project in blend named SliderSkinningExample. Now add one slider control to it and give it a width of 400. It will now look like the top one in the previous image. Now right click it in interaction window and click edit control parts then create a copy.



We can create and empty template too. But as a slider contains different parts it is easier to make a copy of the default one and have some changes in it.


Now name the template to MySliderSkin. Now we have two choices of placing the template either in the same document or in the App.xaml. If you define it in App.xaml (Application) it will be accessible from anywhere in your page whereas this document will only make it available to the current usercontrol. Here we will define it in document. I will explain why later.

Now you will see the parts of the slider like the following.



Now we can see there is a main root grid and two child grid inside it; HorizontalTemplate and VerticalTemplate. Each has two repeat buttons and one thumb and one background rectangle. (They also ve one HorizontalTrackRectangleDisabledOverlay, ThumbDisabledOverlay and
VerticalTrackRectangleDisabledOverlay rectangle but we will not consider them for now.)

The main theme for the slider looks somewhat like the following. (Considering only the horizontal part)

The blue part is the thumb that tells what the current position is. Green part is the background rectangle. Red part is the "HorizontalTrackLargeChangeDecreaseRepeatButton" and the orange part is the "HorizontalTrackLargeChangeIncreaseRepeatButton".

Here we will be considering only the horizontal one. Make the vertical template part's visibility collapsed.

Now we will have to skin 4 components of the slider to get what we want.

1. Background Rectangle: (TrackRectangle). Make its height 12, RadiusX and RadiusY to 5, StrokeThicknes 1. Now we will apply some gradient to its Fill.



We have 3 gradient stop. Left and right one to #FF3F3F47 and middle one to #FF202022. We will leave other properties of this rectangle unchanged.

2. HorizontalTrackLargeChangeDecreaseRepeatButton: We can not directly change it as it is a control. we have to again make a template for it. RightClick it and create a copy of the default template. You will see only a Grid inside it. Have two rectangles inside the root grid. (Make the root grid opacity to 100% as by default it is set to zero.

a) First rectangle: Set its width auto, height 10, stroke thickness 0. Make horizontal and vertical alignment to stretch. RadiusX and RadiusY to 4 (as this is slightly smaller than the background rectangle we are setting the RadiusX and RadiusY to 4 insteed of 5).
Fill this rectangle with the same style gradient, only make the gradient stop colors #FFEAC6C6 for left and right and #FFF7F7F7 for the middle. Set left margin 6.

b) Second rectangle: The purpose of this rectangle is to hide the rounded corner of the first rectangle to the right side. See the following two images to get the clear idea.




Without the second rectangle.



with second rectangle.

Copy the first rectangle. Make horizontal alignment of the second rectangle right and have a width of 10 and height of 10. Keep radiusx and radiusy 0. Set the right margin to -2. (You will not see it like the above image as we did not skin the thumb yet.)

3. HorizontalThumb: Make horizontal thumb height and width to auto. Create a copy of the template for HorizontalThumb. Delete everything inside it except the root grid. Have two ellipse inside it.

a) Outer ellipse: Height and width 18. Stroke thickness 2. Fill radial gradient. Left and right of gradient stop color #FF000000 middle gradient stop color #FFF0F0F4. Stroke color #FF555555.

a) Inner ellipse: Height and width 5. Stroke thickness 2. Fill #FFFFFFFF. Stroke color #FF727070. Horizontal and vertical alignment center.

4. HorizontalTrackLargeChangeIncreaseRepeatButton: No need to change.

Now the slider should look like the above one.

To apply this style to a new slider drag a new slider in the page and right click it and select edit control part -> apply resource -> MySliderSkin.



Unto now we never seen the xaml that is created for this. Frankly we don't have to. Just to know what blend has created for us lets see it in xaml view in blend or open it from Visual Studio.

Everything has been created inside UserControl.Resources tag. We can copy this to App.xaml also and only have to change to Application.Resources from UserControl.Resources. If you carefully see you will see there are something called VisualState and VisualStateGroup inside the xaml code. They are used for handling different states like mouse over, pressed , focused etc. They can be controlled from blend design view though we are not doing anything with them in this example.

Another thing: We did not created the style in Application level because if we create it we can not use blend for making templates for the inner controls of the slider like thumb. This problem is likely to be fixed in later versions of blend.

Please leave a comment if you have any doubt or if you found some error in this.

I am trying to build some simple Silverlight application at home and I will share them once finished. I am also thinking of changing the colors and modifying this blog a bit. Bye for now...