The basics of a Silverlight Control

I've been sitting here for the past few days really getting my head deeper into Silverlight and I'll post more example's of going from Flex to Silverlight later this week. I will however branch out a bit here and illustrate one nugget that I wish someone had of sat over my shoulder and told me about prior to embarking on Silverlight 101.

InitializeFromXaml is your friend.

In C# (Managed Code) I was struggling initially on how the hell do I create children within a Canvas tag for example. In that how does Orcas know how to assemble the pieces together so that I have not only nested children via C# but at the same time, ensuring Silverlight runtime knows as well (ok, one in the same I guess).

How about some code:

XamlPath = "com.mossyblog.MyFile.xaml";
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream(XamlPath);
actualControl = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());

A bunch of stuff happens here in 2 small lines of code, but basically it reads in the file path I pass in (XamlPath) and invokes this.InitializeFromXaml() to effectively read in the file and instantiate this control.

It's important to make mental note of this as when you write your own controls inside Silverlight, you will need to do this for all Controls (unless you extend Canvas or something along those lines).

That being said if you use the example UI Framework (Located in the Alpha 1.1 SDK) you can effectively bypass a lot of this by simply extending the ControlBase Class (which does it's own automatic lookup in terms of path finding and appropriate level of instantiation)

 Creating Children from within a Custom Control

After you master the "How" for bringing in XAML files as controls within your code-behinds, it's now a bit of a head scratching exercise on how one is able to then instantiate sub-children within?

If you do a "this." and await intelli-sense you're not going to see any methods like "add()" which is what you need right?

Well again, looking at the SDK examples you will note the following in some parts:

((Canvas)ActualControl).Children.Insert(0, content);
[via ListBox.cs]

Inside ControlBase class, there is a public property named AcutalControl, which then points to a private property called actualPath which was given it's value based off the result of this.initializeFromXaml() method invocation (Important to note kids).

This specific type returned from doing this is FrameworkElement (which basically means all roads lead back to this guy). Now, FrameworkElement does have  Add children methods if you were to read-up on it via the XAML documentation (WPF folks will love it). In Silverlight however, if you were to typecast it as a Canvas element (which is legal) you effectively are then able to use Children.Add( myChild ) approach to life.

Example:

public VideoThumbNail()
{
    this.setXamlPath("APAC07.Carrousel.VideoThumbNail.xaml");   
    this.createChildren();
    this.measure();
    this.updateDisplayList();
}

public void createChildren() {
    base.createChildren();

    ImageThumbNail it = new ImageThumbNail();
    ((Canvas)ActualControl).Children.Add(it);

}

I wrote my own event management approach to Silverlight simply because I was bored and thought it may help Adobe Flex Developers understand Silverlight by using similar concepts found within Adobe Flex 2.0.1 framework.

I'm not kidding, with enough time I think I could easily code-port the framework into Silverlight (given Adobe Flex soon will be open source - it may even be legal! hehe).

I hope this helps folks understand how the creation of children happens with managed code inside Silverlight development space. It's pretty straightforward once someone shows you at the start and then from there on out it's just downhill all the way (not as scary).

Back to coding, as I need this demo finished by Wednesday for the APAC Sharepoint conference where I'll be showing folks how Sharepoint + Silverlight can play a role with one another.

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS