Grid yourself… it’s WPF

It’s time to begin building a WPF Window. First though, we need to know something about the controls. In most cases you don’t want to place your controls directly on the window. Instead you want to use a container control that will help you group controls and arrange their placement.

While there are several, the most common of the containers is the Grid. It’s so common, both Visual Studio and the Expressions tool use the Grid as the default. Remember the project from yesterday? Take a look at the Xaml window (note you can click on most of these images to get a larger view):

With the Grid, you can simply drop several controls, such as buttons into it, or code them:

Above you can see I dropped two buttons. In order to manage the placement of the second button, a “Margin” property was added to specify where WPF should place the button. A better way, however, might be to divide the grid into rows and columns. Then in the button declaration you specify which row / column to place the button in.

Here we define the number of rows in the <Grid.RowDefinitions> area. As you see there are three rows defined. The column definitions are defined likewise, using <Grid.ColumnDefinitions>. Note the dotted blue lines Visual Studio thoughtfully drew on our window, to indicate where our grid lies.

Inside the Button tag, you see I indicated the row / column to put the button by using Grid.Row and Grid.Column syntax. Note that the numbering is zero based.

There are some simple ways you can enhance the grid’s usability. For example, let’s say button1’s Width was 150, and not 75. The resulting window looks like this:

See how the button is cut off (look where the arrow is pointing). There’s an easy way to fix this however. To the button, add Grid.ColumnSpan=“2”. And thus the problem is fixed!

While there’s a lot more we can do with the grid, there’s one thing left for today to discuss. Sizing of the rows and columns.

The height / width is established in the Definitions area. There are three ways to define a height / width. The first is automatic, and you simply set Height=”Auto” (or width) and WPF will take care of sizing for you.

The second way is absolute. With absolute, you simply give a number which represents the number of pixels. Width=”100” sets it to 100 pixels.

The final method is proportional. Unlike ASP.Net, which used percentages, WPF uses an * (asterisk). When only one row (or column) is set to *, that row (or column) takes up all the remaining space. When multiple rows (or columns) have an *, the remaining space is divided evenly between those rows (or… yes, you guessed it, columns).

Finally, you can affix a multiplier to the * . If, for example, one column was 2*, and the other two columns were set to *, the first column would be twice as wide as the others. Let’s look at a quick example…

Look closely at the dotted lines of the grid. You can see the center is twice as wide as the left and right columns. Note the multiplier can be a decimal as well, I could have specified 2.5* if I’d wanted. And, even though I did this sample with Columns, the same rules apply in the RowDefinition area.

Personally, I really love this * syntax. No more do I have to fiddle with trying to add up percentages or divide them. I simply use easy numbers to indicate how wide I want a column (or row) in relation to the others.

As I mentioned, there’s much more that can be done with the grid, but this covers a few nice basics that should get us started.

Update (29 Aug 2007): After looking at the post today, I realized some of the images could be a bit small. So here is the final XAML code in text format, in case you are interested: