Flash to Silverlight

You do Flash and now you want to add Silverlight to your skillset?
You've come to the right place.

Displaying Objects

Object Inheritance 

Similar to the Display List, Silverlight has the concept of a visual tree. The visual tree is a filtered representation of the larger object tree and contains only the rendered elements. When dealing with the display and grouping of elements this is the tree we are affecting.

object inheritance comparison

Framework Element

The picture to the right compares the core display class hierarchy. Most visual classes in Silverlight inherit from a subclass or directly from FrameworkElement.

One of the main differences to point out is that when comparing core display classes, input functionality from UIElement comes before display functionality from FrameworkElement. For example, a simple Ellipse class does not need to be wrapped in a Sprite-like class to capture mouse events.

Content Control

Another difference is that along with Panel-based container classes like Canvas and Grid to contain children, some controls inherit from the ContentControl class. Instead of multiple children, ContentControl supports a single child which is useful when working with templates.

For example, a Button control has a single property called Content which can be set to a string value, like "Pizza Time!"

Pizza Time! Button

This will render a TextBlock to display the string within the Button. Alternatively we could define a new ContentTemplate for the Button, including a TextBlock for the string and an Image for a photo. In this way, we maintain the look and functionality of the Button while customizing just the content. This functionality is very useful in dynamic data and databinding scenarios.

Try the Styling and Skinning Controls tutorial to learn more about using templates.

Application and RootVisual

There is no Stage in Silverlight, instead there is an Application object. The Application class is instantiated by the Silverlight run-time when it starts. Along with providing application-level services for state and exception detection, the RootVisual property is used to instantiate your custom class. When beginning a new project in Visual Studio or Expression blend this is set to the MainPage class by default.

Grouping Objects 

Managing child collections in Silverlight should feel very similar to other technologies. There’s not a lot of room for variety, as the methods are pretty simple. We’ll walk through the methods for adding, removing, depth level and clearing children.

For these code samples, I've created a simple helper method called CreateEllipse that returns an Ellipse to reduce the lines of code needed.

Add Children

First, add 3 ellipses to the Children collection of a Canvas. The result is shown to the right.

3 ellipses added to a Canvas
Ellipse el1 = CreateEllipse(Colors.Green);
Ellipse el2 = CreateEllipse(Colors.Red);
Canvas.SetLeft(el2, 50);
Ellipse el3 = CreateEllipse(Colors.Blue);
Canvas.SetLeft(el3, 100);

myCanvas.Children.Add(el1);
myCanvas.Children.Add(el2);
myCanvas.Children.Add(el3);

Notice the depth is set by the order of adding the children. If we wanted to change the depth order, we could modify the add lines using one of the methods illustrated below.

2 ellipses added and 1 inserted
myCanvas.Children.Add(el1);
myCanvas.Children.Add(el2);
myCanvas.Children.Insert(1, el3);
myCanvas.Children.Add(el1);
myCanvas.Children.Add(el2);
myCanvas.Children.Add(el3);
Canvas.SetZIndex(el2, 1);

Remove Children

Removing Children is just as simple as adding them. We can use either the Remove or RemoveAt methods.

1 ellipse removed

myCanvas.Children.Add(el1);
myCanvas.Children.Add(el2);
myCanvas.Children.Add(el3);
myCanvas.Children.RemoveAt(1);
myCanvas.Children.Remove(el2);


Notice that in the code sample, we first remove the red Ellipse el2 by index, and then we attempt to remove it by reference. The Remove method checks to see if it is a member of the collection first before removing it, so no exception is thrown.

As a finally note to remove all of the children at once a call to the Clear method can be used to remove all Ellipses.

myCanvas.Children.Clear();
To learn about arranging and positioning objects once you have them added to different types of Panels, try the Arranging Pictures to Learn Layout tutorial.
blog comments powered by Disqus