Creating Killer Animations in Code - Page 2
       by kirupa  |  17 October 2009

In the previous page, you created your project and drew a circle. In this page, let's pick up from where we left of and make our circle a little bit more useful.

Making our Circle into a UserControl
Our circle right now looks pretty, but it isn't very useful. It is merely a primitive shape of type Ellipse:

[ the shapes (much like goggles)...do nothing! See funny clip here ]

 What we want to do is convert our circle into something that can contain code and be something more than just a shape. That something is a UserControl. If you are familar with Flash, think of a UserControl as a MovieClip.

To convert your circle into a UserControl, select the circle with your mouse and press F8 or go to Tools | Make into UserControl:

[ press F8 or go to Tools | Make Into UserControl ]

Once you have called the Make Into UserControl command, the Make Into UserControl dialog will appear. In this dialog, you get the opportunity to name your UserControl. Give your UserControl the name BlueCircle:

[ give your UserControl the name BlueCircle ]

Click OK to close this dialog and to create the new UserControl with the name BlueCircle. Many things will have happened behind the scenes once you converted your shape into a UserControl, but the most noticeable is that your circle now lives in its own XAML file called BlueCircle.

You can tell by looking at the list of open documents where you see BlueCircle.xaml opened alongside MainPage.xaml:

[ your circle is all grown up now. It is now a UserControl ]

Just for kicks, go ahead and press F5 (Project | Run Project) to see what happens now. After a few seconds, your browser will load, but all you will see is just your blue circle. That's great - there shouldn't be anything else going on. Don't worry, we will fix that up soon.

Changing the Root Layout to a Canvas
Switch back to MainPage.xaml. Take a look at your Objects and Timeline panel and notice that you see your BlueCircle usercontrol now displayed there:

[ what was a shape before is now a UserControl whose type is BlueCircle ]

That's not the only thing I wanted you to notice though. Notice that your BlueCircle usercontrol is nested under LayoutRoot. LayoutRoot currently is a Grid layout panel. While for most applications, using Grids is good, for what we are going to do - programmatically move things around, a Grid is not what we want.

What we need is the more basic Canvas. To change your LayoutRoot to a Canvas, right click on LayoutRoot, and from the menu that appears, go to Change Layout Type | Canvas:

[ change from a Grid to a Canvas ]

Once you have done this, your LayoutRoot layout panel will now be a Canvas. You can tell by having LayoutRoot selected and looking in your Properties Inspector, directly below the element name, where the type of the element is displayed:

[ LayoutRoot is now a Canvas ]

I will explain later why we had to make this change, but for now, let's proceed to the next step - which is, adding the code. That will be done on the next page.

Onwards to the next page!

1 | 2 | 3 | 4 | 5