Silverlight, thanks for the Grid, but I still love my Canvas!

When Silverlight 2 was first released, we all caught our first glimpse of a new layout control, the “Grid”. Back in the SL1.0 and SL 1.5 Alpha the community asked for more choices then just a Canvas and Microsoft delivered. In fact, they gave us three, the Canvas, Grid and StackPanel. Microsoft even took it to the next level and replaced the Canvas with the Grid as the new default LayoutRoot within all UserControls.

So what exactly is the Grid and what makes it so much better then the canvas? All layout controls derives from Panel, but Grid has a few very distinct characteristics that make them behave differently then a Canvas.
Grid

• Supports explicit definition of Rows and Columns
• Children of the grid can be positioned by setting their own HorizontalAlignment and VerticalAlignment properties
• Children of the grid are drawn in the order in which they appear in the XAML This effects the layered order or z-order of each element.
• Implicitly creates a clipping region proportional to the size of the grid.

I think the big one that surprises a few is the last bullet regarding clipping. Let me show you an example.


Notice how when you place a Ellipse inside of the Grid it gets clipped. This is extremely important if you are building a UserControl and you require that the control be a fixed Width and Height. Another place will this is relevant is when you have an animation in your user control and it moves the  child outside of the perimeter of the Grid.  A great example of this is when you are building a Game sprite and you want to animate an explosion of that element.  The Sprite might be a fixed size, but the explosion throws shards outward.  In this example you would certainly not want the shards cliped by the grid so a cnvas would be the appropriate choice.

Another thing you need to take into account with all Layout controls is how it will scale within a Grid.  Lets take for example two UserControls.  One with a Layroot of Grid and one with a LayoutRoot of Canvas.  Check out what happens when I apply a ScaleTransform to both user controls.

Both controls appear to scale correctly to 50%, but note how their positions are no longer left and right justified with a margin of 20 pixels.