Flash to Silverlight
- Home
- |
- Get Started
- |
- API Guide
- |
- Downloads
- |
- Community
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.
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!"
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.
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.
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.
myCanvas.Children.Add(el2);
myCanvas.Children.Insert(1, el3);
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.
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.