Windows Presentation Foundation is set to revolutionize both web-based and standalone application development. It uses a declarative markup language called XAML to place controls, which looks very similar to HTML. If you're new to XAML or would like to follow along with these examples, you may want to check out a previous tutorial I blogged about WPF, "Start experimenting with XAML on your XP machine in under 15 minutes".
In this post we'll see how WPF uses the System.Windows.Controls.Grid control to present data similar to an HTML table. We'll also see features specific to the Grid control.
Here is the table layout we will use for these examples:
And here is the HTML code that would create it:
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
In XAML the columns and rows are defined first, and then controls which come later can be placed in a specific cell. Unlike HTML a cell cannot be merged with another cell, but controls being placed can span multiple cells. In this example there are two cells that are merged using HTML's COLSPAN and ROWSPAN. To replicate this we'll put two rectangles on the grid, filled with a color so we can see where they exist:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid ShowGridLines="true">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Fill="#800000FF" Grid.Column="1" Grid.ColumnSpan="2"></Rectangle>
<Rectangle Fill="#80FF0000" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"></Rectangle>
</Grid>
</Page>
This example uses ShowGridLines="true" in order to see the gridlines, which is great to use during development. The two cells that span more than one column or row are each filled with a rectangle of color so you can see the results. When placed in XamlPad, the result looks like this:
Note that the gridlines are present even where a control spans two cells. This is because spanning of cells occurs on a control basis rathar than a cell basis.
Unless you use the Grid.Column and Grid.Row properties, content will default to being shown in the upper-left cell of the Grid. An example of defining where content should be placed can be seen in the two Rectangle controls used in this example that use Grid.Column, Grid.Row, Grid.ColumnSpan, and Grid.RowSpan for placement.
Note the colors used for the Fill attribute of these rectangles. With the alpha channel being 80 hex, this effectively sets 50% opacity since 80 hex is half of the maximum FF hex. So what happens if they overlap each other? Being halfway transparent the colors will combine. We will move the reddish rectangle up to start at the top row, which is row 0. Here is the code change to make this happen, and net effect:
<Rectangle Fill="#80FF0000"
Grid.Row="0" Grid.Column="1" Grid.RowSpan="2">
</Rectangle> |
 |
By default the grid will fill up whatever space is available to it with equally spaced cells. If you want to define the width of a column or height of a row then like HTML you can use either a number of pixels or a fractional amount of the whole. The fractional values work differently than HTML's percentages. Doing WIDTH="50%" on a <TD> in HTML means that the column, not the <TD>, will try to take half of all the width available to that table. Things are done a little differently in WPF, where you define the width on the whole ColumnDefinition and not an individual cell. And in WPF instead of a percentage you use a fractional decimal amount suffixed with an asterisk, such as Width="0.50*". The result of using this is also different than HTML in that a setting of 0.50* makes that column take half of the space that it would normally consume. The added code and net effect is this:
<ColumnDefinition Width="0.50*" /> |
 |