Using XAML Grid Panel

The <Grid> element in XAML represents a grid panel that provides a grid layout. The code example in this article shows how to use a Grid panel at design time using XAML in a WPF app.

The WPF Grid Control is a content control that represents data in a flat columns and rows format where a row and a column may be managed independently.

The Grid element in XAML represents a WPF Grid control. The following code snippet creates a Grid control, sets its width and foreground color and ensures the grid lines are visible.

  1. <Grid Name="MCGrid" Width="400" Background="LightSteelBlue" ShowGridLines="True" \>  
The ColumnDefinitions property is used to add columns and the RowDefinitions property is used to add rows to a Grid. The following code snippet adds three columns and three rows to a grid.
  1. <Grid.ColumnDefinitions>  
  2.    <ColumnDefinition />  
  3.    <ColumnDefinition />  
  4.    <ColumnDefinition />  
  5. </Grid.ColumnDefinitions>  
  6. <Grid.RowDefinitions>  
  7.    <RowDefinition Height="45" />  
  8.    <RowDefinition Height="45" />  
  9.    <RowDefinition Height="45" />  
  10. </Grid.RowDefinitions>  
Any control in WPF can be placed within a grid using its Grid.Row and Grid.Column properties that represents what column and what row a control will be placed in. The values of rows and columns start with 0. That means, if there are three columns in a grid, the first column would be represented by the number 0. The following code snippet puts a TextBlock control in a cell that is in the second row and the third column.
  1. <TextBlock Grid.Row="1" Grid.Column="2" Foreground="Green"   
  2.    Text="Age" Height="20" VerticalAlignment="Top" />  
Here is the complete code to create a Grid with three columns and three rows and some text data in the grid cells.
  1. <Window x:Class="GridSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="Window1" Height="300" Width="450" WindowStyle="ThreeDBorderWindow">  
  5.     <Grid Name="MCGrid" Width="400" Background="LightSteelBlue" ShowGridLines="True">  
  6.         <Grid.ColumnDefinitions>  
  7.             <ColumnDefinition />  
  8.             <ColumnDefinition />  
  9.             <ColumnDefinition />  
  10.         </Grid.ColumnDefinitions>  
  11.         <Grid.RowDefinitions>  
  12.             <RowDefinition Height="45" />  
  13.             <RowDefinition Height="45" />  
  14.             <RowDefinition Height="45" />  
  15.         </Grid.RowDefinitions>  
  16.   
  17.         <TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="0" Foreground="Green"   
  18.                    Text="Author Name" Height="20" VerticalAlignment="Top"  />  
  19.         <TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="1" Foreground="Green"   
  20.                    Text="Age" Height="20" VerticalAlignment="Top" />  
  21.         <TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="2" Foreground="Green"   
  22.                    Text="Book" Height="20" VerticalAlignment="Top"/>  
  23.     
  24.         <TextBlock FontSize="12" Grid.Row="1" Grid.Column="0">Mahesh Chand</TextBlock>  
  25.         <TextBlock FontSize="12" Grid.Row="1" Grid.Column="1">33</TextBlock>  
  26.         <TextBlock FontSize="12" Grid.Row="1" Grid.Column="2">GDI+ Programming</TextBlock>  
  27.         <TextBlock FontSize="12" Grid.Row="2" Grid.Column="0">Mike Gold</TextBlock>  
  28.         <TextBlock FontSize="12" Grid.Row="2" Grid.Column="1">35</TextBlock>  
  29.         <TextBlock FontSize="12" Grid.Row="2" Grid.Column="2">Programming C#</TextBlock>        
  30.   
  31.     </Grid>  
  32. </Window>  
The output looks like this.



The following code snippet adds a Grid splitter to a Grid that you can use to resize a Grid row.
  1. <Grid Name="DynamicGrid" Width="466" Background="LightSteelBlue" ShowGridLines="True"   
  2.           Canvas.Top="119" Canvas.Left="8" Height="200">  
  3.       <Grid.ColumnDefinitions>  
  4.             <ColumnDefinition />  
  5.             <ColumnDefinition />  
  6.             <ColumnDefinition />  
  7.         </Grid.ColumnDefinitions>  
  8.         <Grid.RowDefinitions>  
  9.             <RowDefinition Height="50*" />  
  10.                 <RowDefinition Height="Auto" />  
  11.                 <RowDefinition Height="50*" />  
  12.             </Grid.RowDefinitions>  
  13.   
  14.             <GridSplitter   
  15.                 ResizeDirection="Rows"  
  16.                 Grid.Column="0"  
  17.                 Grid.ColumnSpan="10"  
  18.                 Grid.Row="1"   
  19.                 Width="Auto"  
  20.                 Height="3"  
  21.                 HorizontalAlignment="Stretch"  
  22.                 VerticalAlignment="Stretch"  
  23.                 Margin="0"  
  24.                 Background="Green"/>  
  25. </Grid>  
The Background property of a Grid sets the background colors of a Grid. The following code snippet uses linear gradient brushes to draw the background of a Grid.
  1. <Grid.Background>  
  2.     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >  
  3.         <GradientStop Color="Blue" Offset="0.1" />  
  4.         <GradientStop Color="Orange" Offset="0.25" />  
  5.         <GradientStop Color="Green" Offset="0.75" />  
  6.         <GradientStop Color="Red" Offset="1.0" />  
  7.     </LinearGradientBrush>  
  8. </Grid.Background>  
The new Grid looks like Figure 1.



Figure 1

This article has moved here: WPF Grid Panel tutorial