XAML Standard

Using XAML Grid in WPF

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.

Create Grid

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.



Great Grid Dynamically

The Grid class in WPF represents a Grid control. The following code snippet creates a Grid control, sets its width, horizontal alignment, vertical alignment, show grid lines and background color.
  1. Grid DynamicGrid = new Grid();  
  2. DynamicGrid.Width = 400;  
  3. DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;  
  4. DynamicGrid.VerticalAlignment = VerticalAlignment.Top;  
  5. DynamicGrid.ShowGridLines = true;  
  6. DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);  
  7.   
  8. The following code snippet adds three columns and three rows to Grid.  
  9.   
  10. // Create Columns  
  11. ColumnDefinition gridCol1 = new ColumnDefinition();  
  12. ColumnDefinition gridCol2 = new ColumnDefinition();  
  13. ColumnDefinition gridCol3 = new ColumnDefinition();  
  14. DynamicGrid.ColumnDefinitions.Add(gridCol1);  
  15. DynamicGrid.ColumnDefinitions.Add(gridCol2);  
  16. DynamicGrid.ColumnDefinitions.Add(gridCol3);  
  17.   
  18. // Create Rows  
  19. RowDefinition gridRow1 = new RowDefinition();  
  20. gridRow1.Height = new GridLength(45);  
  21. RowDefinition gridRow2 = new RowDefinition();  
  22. gridRow2.Height = new GridLength(45);  
  23. RowDefinition gridRow3 = new RowDefinition();  
  24. gridRow3.Height = new GridLength(45);  
  25. DynamicGrid.RowDefinitions.Add(gridRow1);  
  26. DynamicGrid.RowDefinitions.Add(gridRow2);  
  27. DynamicGrid.RowDefinitions.Add(gridRow3);  
Once rows and columns are added to a Grid, you can add any content to the Grid cells using the SetRow and SetColumn methods. The SetRow and SetColumn methods take the first parameter as the control name and the second parameter as the row number and column number respectively. The following code snippet creates a TextBlock control and displays it in Cell(0,0) that represents the first row and first column of the Grid.
  1. // Add first column header  
  2. TextBlock txtBlock1 = new TextBlock();  
  3. txtBlock1.Text = "Author Name";  
  4. txtBlock1.FontSize = 14;  
  5. txtBlock1.FontWeight = FontWeights.Bold;  
  6. txtBlock1.Foreground = new SolidColorBrush(Colors.Green);  
  7. txtBlock1.VerticalAlignment = VerticalAlignment.Top;  
  8. Grid.SetRow(txtBlock1, 0);  
  9. Grid.SetColumn(txtBlock1, 0);  
Once a control is created and its position within the Grid is set, the next step is to add a control to the Grid using the Grid.Children.Add method. This code snippet adds a TextBlock to the Grid.
  1. DynamicGrid.Children.Add(txtBlock1);  
The complete code is shown below.
  1. private void CreateDynamicWPFGrid()  
  2. {  
  3.     // Create the Grid  
  4.     Grid DynamicGrid = new Grid();  
  5.     DynamicGrid.Width = 400;  
  6.     DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;  
  7.     DynamicGrid.VerticalAlignment = VerticalAlignment.Top;  
  8.     DynamicGrid.ShowGridLines = true;  
  9.     DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);  
  10.   
  11.     // Create Columns  
  12.     ColumnDefinition gridCol1 = new ColumnDefinition();  
  13.     ColumnDefinition gridCol2 = new ColumnDefinition();  
  14.     ColumnDefinition gridCol3 = new ColumnDefinition();  
  15.     DynamicGrid.ColumnDefinitions.Add(gridCol1);  
  16.     DynamicGrid.ColumnDefinitions.Add(gridCol2);  
  17.     DynamicGrid.ColumnDefinitions.Add(gridCol3);  
  18.   
  19.     // Create Rows  
  20.     RowDefinition gridRow1 = new RowDefinition();  
  21.     gridRow1.Height = new GridLength(45);  
  22.     RowDefinition gridRow2 = new RowDefinition();  
  23.     gridRow2.Height = new GridLength(45);  
  24.     RowDefinition gridRow3 = new RowDefinition();  
  25.     gridRow3.Height = new GridLength(45);  
  26.     DynamicGrid.RowDefinitions.Add(gridRow1);  
  27.     DynamicGrid.RowDefinitions.Add(gridRow2);  
  28.     DynamicGrid.RowDefinitions.Add(gridRow3);  
  29.   
  30.     // Add first column header  
  31.     TextBlock txtBlock1 = new TextBlock();  
  32.     txtBlock1.Text = "Author Name";  
  33.     txtBlock1.FontSize = 14;  
  34.     txtBlock1.FontWeight = FontWeights.Bold;  
  35.     txtBlock1.Foreground = new SolidColorBrush(Colors.Green);  
  36.     txtBlock1.VerticalAlignment = VerticalAlignment.Top;  
  37.     Grid.SetRow(txtBlock1, 0);  
  38.     Grid.SetColumn(txtBlock1, 0);  
  39.   
  40.     // Add second column header  
  41.     TextBlock txtBlock2 = new TextBlock();  
  42.     txtBlock2.Text = "Age";  
  43.     txtBlock2.FontSize = 14;  
  44.     txtBlock2.FontWeight = FontWeights.Bold;  
  45.     txtBlock2.Foreground = new SolidColorBrush(Colors.Green);  
  46.     txtBlock2.VerticalAlignment = VerticalAlignment.Top;  
  47.     Grid.SetRow(txtBlock2, 0);  
  48.     Grid.SetColumn(txtBlock2, 1);  
  49.   
  50.     // Add third column header  
  51.     TextBlock txtBlock3 = new TextBlock();  
  52.     txtBlock3.Text = "Book";  
  53.     txtBlock3.FontSize = 14;  
  54.     txtBlock3.FontWeight = FontWeights.Bold;  
  55.     txtBlock3.Foreground = new SolidColorBrush(Colors.Green);  
  56.     txtBlock3.VerticalAlignment = VerticalAlignment.Top;  
  57.     Grid.SetRow(txtBlock3, 0);  
  58.     Grid.SetColumn(txtBlock3, 2);  
  59.   
  60.     //// Add column headers to the Grid  
  61.     DynamicGrid.Children.Add(txtBlock1);  
  62.     DynamicGrid.Children.Add(txtBlock2);  
  63.     DynamicGrid.Children.Add(txtBlock3);  
  64.   
  65.     // Create first Row  
  66.     TextBlock authorText = new TextBlock();  
  67.     authorText.Text = "Mahesh Chand";  
  68.     authorText.FontSize = 12;  
  69.     authorText.FontWeight = FontWeights.Bold;  
  70.     Grid.SetRow(authorText, 1);  
  71.     Grid.SetColumn(authorText, 0);  
  72.   
  73.     TextBlock ageText = new TextBlock();  
  74.     ageText.Text = "33";  
  75.     ageText.FontSize = 12;  
  76.     ageText.FontWeight = FontWeights.Bold;  
  77.     Grid.SetRow(ageText, 1);  
  78.     Grid.SetColumn(ageText, 1);  
  79.   
  80.     TextBlock bookText = new TextBlock();  
  81.     bookText.Text = "GDI+ Programming";  
  82.     bookText.FontSize = 12;  
  83.     bookText.FontWeight = FontWeights.Bold;  
  84.     Grid.SetRow(bookText, 1);  
  85.     Grid.SetColumn(bookText, 2);  
  86.     // Add first row to Grid  
  87.     DynamicGrid.Children.Add(authorText);  
  88.     DynamicGrid.Children.Add(ageText);  
  89.     DynamicGrid.Children.Add(bookText);  
  90.   
  91.     // Create second row  
  92.     authorText = new TextBlock();  
  93.     authorText.Text = "Mike Gold";  
  94.     authorText.FontSize = 12;  
  95.     authorText.FontWeight = FontWeights.Bold;  
  96.     Grid.SetRow(authorText, 2);  
  97.     Grid.SetColumn(authorText, 0);  
  98.   
  99.     ageText = new TextBlock();  
  100.     ageText.Text = "35";  
  101.     ageText.FontSize = 12;  
  102.     ageText.FontWeight = FontWeights.Bold;  
  103.     Grid.SetRow(ageText, 2);  
  104.     Grid.SetColumn(ageText, 1);  
  105.   
  106.     bookText = new TextBlock();  
  107.     bookText.Text = "Programming C#";  
  108.     bookText.FontSize = 12;  
  109.     bookText.FontWeight = FontWeights.Bold;  
  110.     Grid.SetRow(bookText, 2);  
  111.     Grid.SetColumn(bookText, 2);  
  112.   
  113.     // Add second row to Grid  
  114.     DynamicGrid.Children.Add(authorText);  
  115.     DynamicGrid.Children.Add(ageText);  
  116.     DynamicGrid.Children.Add(bookText);  
  117.   
  118.     // Display grid into a Window  
  119.     RootWindow.Content = DynamicGrid;  
  120.   
  121. }  
How to create, add and delete columns in a WPF Grid Dynamically

The Add method of Grid.ColumnDefinitions adds a new column to a Grid.
  1. DynamicGrid.ColumnDefinitions.Add(new ColumnDefinition());  
The Grid.ColumnDefinitions.Insert method adds a column at a given position. The following code adds a new column at position 3 in a Grid.
  1. DynamicGrid.ColumnDefinitions.Insert(3, new ColumnDefinition());  
The RemoveAt method of Grid.ColumnDefinitions deletes a column at the given position.
  1. DynamicGrid.ColumnDefinitions.RemoveAt(3);  
The Clear method of Grid.ColumnDefinitions deletes all columns in a Grid.
  1. DynamicGrid.ColumnDefinitions.Clear();  
How to create, add and delete rows in a WPF Grid Dynamically

The Add method of Grid.RowDefinitions adds a new row to a Grid.
  1. DynamicGrid.RowDefinitions.Add(new RowDefinition());  
The Grid.RowDefinitions.Insert method adds a row at a given position.
  1. DynamicGrid.RowDefinitions.Insert(3, new RowDefinition ());  
The RemoveAt method of Grid.RowDefinitions deletes a row at the given position.
  1. DynamicGrid.RowDefinitions.RemoveAt(3);  
The Clear method of Grid.RowDefinitions deletes all rows in a Grid.
  1. DynamicGrid.RowDefinitions.Clear();  
How to Resize WPF Grid Rows with a GridSplitter

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>  
Formatting 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

Setting Image as Background of a Grid

To set an image as the background of a Grid, we can set an image as the Background of the Grid. The following code snippet sets the background of a Grid to an image. The code also sets the opacity of the image.
  1. <Grid.Background>  
  2. <ImageBrush ImageSource="Flower.jpg" Opacity="0.3"/>  
  3. </Grid.Background>  
The new output looks like Figure 2.

Figure 2
 
 

Up Next
    Ebook Download
    View all
    Programming XAML
    Read by 6.4k people
    Download Now!
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs