Using XAML Grid Panel

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 



Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.