Geeks With Blogs

News
Welcome to my blog.
Here's what we've got on the menu today:

Lorin Thwaits A geek says what?

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*" />

 

Posted on Tuesday, August 1, 2006 11:24 AM WPF | Back to top


Comments on this post: Comparing HTML Tables to WPF Grids

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
Nice article!
Left by Shakeel on Sep 02, 2007 8:25 PM

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
I may perhaps the new protection restricts you from even reading any data at all! Wouldn't that be a kicker. Thanks for the valuable post.
Left by Russian Railways on May 29, 2009 10:32 PM

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
And the borders, cellpadding, cellspacing??!
Have only "ShowGridLines="true"" .... where set the border color for all table?

Tks!
=)
Left by Ericc Antunes on Jun 05, 2009 2:20 PM

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
I can't get the cellspacing right either.
Left by Certificate of Deposit on Sep 13, 2009 9:52 PM

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
I took along on this trip: the USB daughter card.
Left by DDos Protection on Nov 07, 2009 1:12 AM

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
Bamboo window blinds takes a good bit of skill to complete the necessary items fully and successfully. Well, those of you who know me know that I love black mini blinds. You can't make them do your bidding. There are some mere mortals who never to leave the house. By no means is this a recipe for cheap bamboo blinds provided that I had to spend time updating my bamboo blind for sure.

I want to avoid feeling evil.

It seems to me this combination of bamboo window shades and bamboo verticle blinds might be great. Bamboo window blinds is near and dear to my heart.


Left by Rufus on Jan 24, 2010 9:37 AM

# re: Comparing HTML Tables to WPF Grids
Requesting Gravatar...
I really loved this wonderful blog post. Please continue this great work. Cheers!!
Left by 720p hd trailers on Mar 06, 2010 6:45 PM

Your comment:
 (will show your gravatar)


Copyright © Lorin Thwaits | Powered by: GeeksWithBlogs.net