(See Part 1 and Part 2 first…)
In the third and final installment of this series on Silverlight Layout, we are going to be discussing my preferred option for interface creation: The Grid. In many ways, I would compare this to table based layout in HTML (which is generally a bad word), but I will come to its defense in Silverlight today.
There are many reasons why table-based layouts should not be used in HTML. A few of them are:
1) Tables are very heavy. With all of the <tr> and <td> tags you need, the page bloats quickly.
2) CSS is the right way to do it. Once you harness the power of CSS, you have far greater control of your layout (not to mention accessibility) than you do with tables.
3) Tables are very difficult to manipulate once they are in place. If you’ve ever tried to move things around in a legacy table layout, you know what I’m talking about.
The reason I am recommending this type of layout is because those problems have been addressed in Silverlight with the <Grid>. So let’s take a look at the code.
You’ll notice that this doesn’t really look like HTML table layout that you’ve seen in the past. Instead, we’ve seperated (still in the same file, mind you) the content from the layout. We don’t have to wrap each element in a set of table tags. We define a grid, and then we assign each element to a cell of that grid. I’ve also turned on the ShowGridLines attribute, so we can see exactly what the grid looks like. We can also assign height and width values to the cells of the grid, up to and including the wildcard “*” character. This tells the application to use the rest of the remaining space for that cell. If you have more than one wildcard cell, it will split the unclaimed space evenly between them. Please note that the grid starts with 0,0, not 1,1. So our Red Rectangle is assigned to Grid.Cell=”0″ and Grid.Row=”0″ which puts it in the top left corner. Each of the respective rectangles after that is assigned to their respective grid location as well. The design pane of Visual Studio 2008 looks like this with the XAML I just used:
You’ll notice that the Black rectangle is missing. That is the one assigned to the wildcard space. In the design pane, there’s not a Canvas width and height defined. In the XAML, I did not specify a width and height for my Grid. This causes it to fill the entire space of the window it is rendered in. When we run the application, however, you’ll see that the black box is, in fact, there, and takes up the rest of your browser window.
In my next post, I will talk about using templates to create “styles” that can be reused by your XAML elements.
JEFF BLANKENBURG 