WPF Web Based

R4R^®

WPF with C#

WPF Web Based Tutorials

WPF Examples

WPF

WPF Projects

WPF Project

WPF Interview Materials

WPF subjective question

WPF Interview question

WPF Objective question

WPF FAQS

Grid Control in WPF Web Based

Home

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible.

A grid consists of rows and columns . To setup this, use the following definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

A Grid has RowDefinitions and ColumnDefinitions that specify the height (specific to the row), the width (specific to the column), and possibly other dimensional aspects. Normally, you would expect to see a combination of row/cell or row/column

objects to lay out the grid; however, WPF works differently. Each control has a Grid.Row and Grid.Column, which specifies the row/column to render in.

The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control.

Define Rows and Columns in Grid

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. The following example shows a grid with three rows and two columns.

The size can be specified as an absolute amount of logical units, as a percentage value or automatically.

Fixed Fixed size of logical units (1/96 inch)
Auto Takes as much space as needed by the contained control
Star (*) Takes as much space as available, percentally divided over all star-sized columns. Star-sizes are like percentages, except that the sum of all star columns does not have to be 100%. Remember that star-sizing does not work if the grid size is calculated based on its content.

How to Add Control To Grid

To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row- and columndefinitions must precced any definition of child controls.

The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
<Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
<Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
<Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" 
      MinWidth="80" Margin="3" Content="Send"  />
</Grid>

Exapmle:

Grid Control

.XAML CODE:

<Page x:Class="WpfBrowserApplication5.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1">
<Grid Height="284" Background="Coral" Width="354">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="25" />
<RowDefinition Height="Auto" MinHeight="27" />
<RowDefinition Height="174*" />
<RowDefinition Height="31.447*" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="61" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
<Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
<Label Grid.Row="2" Content="Comment:" Grid.RowSpan="2" />
<TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="2" Margin="3" Grid.RowSpan="2" />
<Button Grid.Column="1" Grid.Row="4" HorizontalAlignment="Right" 
        MinWidth="80" Margin="3" Content="Discard"/>
<Button Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right" 
        MinWidth="80" Margin="0,5.999,-79.547,0" Content="Send"
		Height="21.277" Grid.RowSpan="2" VerticalAlignment="Top"
		Width="80" />
</Grid>
</Page>