Should the Silverlight root tag be UserControl or Canvas?

Question

I'm reading Silverlight 2 Unleashed, published in October 2008 and it has examples in it with a root canvas tag:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Red"
    Width="500"
    Height="300">
     <Ellipse Width="400"...

However when I create a new Silverlight Application in VS2008, I get a UserControl root tag:

<UserControl x:Class="TestFirst.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White"...

Of course I can change this by replacing the root tag with Canvas but then I have to also change the code behind to inherit from Canvas instead of UserControl and have to take out the InitializeComponent method.

• Is using the Canvas tag as the root standard or is the book going about an alternate way to create Silverlight applications?
• What are the advantages of using Canvas instead of UserControl as the root element?
• Why would the book for its first examples create silverlight applications in a different way than is given by default in Visual Studio?
• Is there a way to have a canvas tag generated as the root tag by default in Visual Studio?

Answer 1

I think the book probably did things wrong. Books tend to do that, actually.

Typically, your user control should have UserControl as its root. If you just happen to need a Canvas for coordinate-positional drawing for the entire control, put the Canvas as the first child of UserControl. [Edit:] In your second example, replace the Grid with a Canvas -- but again, only if you really need Canvas!

Canvas is a very narrow-scope panel; it's explicitly for coordinate-positional drawing, and should not be used for anything other than this. If you're doing an input control of any sort, use a combination of Grids, DockPanels, and/or StackPanels. And maybe even Canvases for nifty little animations near your TextBoxes. :)

The point is that you should narrow your scope. If you start with a Canvas for anything, you're going to end up with pain as you try to deal with all the complex positioning of your controls.

Answer 2

Hi,

Taken out of context, using a Canvas as the root in a XAML document might seem weird. However in the book, this is used when we demonstrate the very first XAML samples in an online tool named SilverlightPad. In that case, there is no code behind, only XAML, thus you do not need to change anything in a class file (since there is none).

The point is, any XAML element can be used as the root of a XAML document. What Visual Studio does by creating a UserControl XAML root, and linking it to a UserControl class in code behind is really a special case of a more general scheme. I agree that it is what the reader will be confronted to most of the time, but I also believe in the value of showing that things can be different. In addition, it is also important to show that sometimes, there is no code behind, and that XAML is a language with multiple features even without the "help" of a code behind class.

Silverlight 2 Unleashed uses a progression starting from pretty much zero, and with a (rather steep) learning curve. If you continue to read on, you will see that we start using Visual Studio a little later in the book, and things will become more familiar. However, you will have seen that you can use other elements as the root, and I think this has an educational value.

If you have any other questions, feel free to post here or to email me.

Cheers, Laurent

Answer 3

Here is an interesting blog post by one of the Silverlight developers entitled "Why I don't like Canvas". Should help you understand when to use (and when not to use) the Canvas element.

http://blogs.msdn.com/devdave/archive/2008/05/21/why-i-don-t-like-canvas.aspx