Grid Panel Tutorial

Introduction

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 cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

The resize behavior 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

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinitionitems 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 (after filling all auto and fixed sized columns), proportionally divided over all-star-sized columns. So 1*/2* means the same as 10*/20*. Remember that star-sizing does not work if the grid size is calculated based on its content.

<Window x:Class="GridLayoutExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid Layout Example"
        MinHeight="240"
        MinWidth="500"
        Height="240"
        Width="500"
        WindowStartupLocation="CenterScreen"
        WindowState="Normal">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="250*"/>
        </Grid.ColumnDefinitions>
     
        <Grid.RowDefinitions>
            <RowDefinition Name="row0" Height="30"/>
            <RowDefinition Name="row1" Height="30"/>
            <RowDefinition Name="row2" Height="30"/>
            <RowDefinition Name="row3" Height="30"/>
            <RowDefinition Name="row4" Height="30"/>
            <RowDefinition Name="row5" Height="30"/>
            <RowDefinition Name="row6" Height="*"/>
        </Grid.RowDefinitions>
     
        <Grid.Resources>
            <Style TargetType="{x:Type Label}">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Height" Value="25"/>
                <Setter Property="Margin" Value="10,0,0,5"/>
                <Setter Property="Padding" Value="2,2,0,2"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
            </Style>


            <Style TargetType="{x:Type TextBox}">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Height" Value="25"/>
                <Setter Property="Margin" Value="0,0,5,5"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
            </Style>


            <Style TargetType="{x:Type Button}">
                <Setter Property="Width" Value="100"/>
                <Setter Property="Height" Value="25"/>
                <Setter Property="Margin" Value="0,0,5,5"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
            </Style>
        </Grid.Resources>
     
        <Label  Grid.Column="0" Grid.Row="1" Content="Name"/>
        <TextBox Grid.Column="1" Grid.Row="1" Name="txtName"/>
     
        <Label Grid.Column="0" Grid.Row="2" Content="Address"/>
        <TextBox Grid.Column="1" Grid.Row="2" Name="txtAddress"/>


        <Label Grid.Column="0" Grid.Row="3" Content="Phone"/>
        <TextBox Grid.Column="1" Grid.Row="3" Name="txtPhone"/>


        <Label Grid.Column="0" Grid.Row="4" Content="Contact"/>
        <TextBox Grid.Column="1" Grid.Row="4" Name="txtContact"/>


        <Button Grid.Column="1" Grid.Row="5" Name="butSave" Content="Save"/>
    </Grid>
</Window>