Share via

The basics of a Silverlight Control

  • Article

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.

Comments

  • Anonymous
    May 13, 2007
    I'm using InitializeFromXaml but the approach above means that the XAML file is built into the DLL right? So what if the designer wants to make a change to the Xaml and see their results? They need to build. (Yeah I know Blend can build). Would it be better to find a way to find the Xaml at runtime?

  • Anonymous
    May 15, 2007
    Scott has a great post about the things he learned while creating his first Silverlight control. He’s

  • Anonymous
    May 15, 2007
    Scott 在他的博客上给出了一个实际创建Silverlight Controls的过程，值得参考。 http://blogs.msdn.com/msmossyblog/archive/2007/05/14/the-basics-of-a-silverlight-control.asp

  • Anonymous
    May 15, 2007
    Interesting Silverlight posts today: Silverlight Control

  • Anonymous
    May 16, 2007
    Hi, I am new to Silverlight and would like to ask you to give me some tutorial for step by steb building Silverlight controls from the very beginning. Thanks in advance.

  • Anonymous
    May 20, 2007
    Another week has shot by. Didn't have any time to look at Silverlight although I have managed to download

  • Anonymous
    May 20, 2007
    Another week has shot by. Didn't have any time to look at Silverlight although I have managed to

  • Anonymous
    May 20, 2007
    Another week has shot by. Didn't have any time to look at Silverlight although I have managed to download

  • Anonymous
    May 21, 2007
    Microsoft Silverlight is a cross-browser , cross-platform plug-in for delivering the next generation

  • Anonymous
    June 04, 2007
    During the weekend I spent some minutes to collect some of the greatest Silverlight examples. Most of

  • Anonymous
    July 30, 2007
    Though the jury is still out on what controls we'll see in or alongside Silverlight 1.1 when it's released,

  • Anonymous
    July 30, 2007
    Though the jury is still out on what controls we'll see in or alongside Silverlight 1.1 when it's