Using XAML Grid in WPF

Mahesh Chand
Dec 17, 2014
8.7k
0
2
Article

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.

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

<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="45" />
<RowDefinition Height="45" />
</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.

<TextBlock Grid.Row="1" Grid.Column="2" Foreground="Green"
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.

<Window x:Class="GridSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="450" WindowStyle="ThreeDBorderWindow">
<Grid Name="MCGrid" Width="400" Background="LightSteelBlue" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="45" />
<RowDefinition Height="45" />
</Grid.RowDefinitions>
<TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="0" Foreground="Green"
Text="Author Name" Height="20" VerticalAlignment="Top" />
<TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="1" Foreground="Green"
Text="Age" Height="20" VerticalAlignment="Top" />
<TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="2" Foreground="Green"
Text="Book" Height="20" VerticalAlignment="Top"/>
<TextBlock FontSize="12" Grid.Row="1" Grid.Column="0">Mahesh Chand</TextBlock>
<TextBlock FontSize="12" Grid.Row="1" Grid.Column="1">33</TextBlock>
<TextBlock FontSize="12" Grid.Row="1" Grid.Column="2">GDI+ Programming</TextBlock>
<TextBlock FontSize="12" Grid.Row="2" Grid.Column="0">Mike Gold</TextBlock>
<TextBlock FontSize="12" Grid.Row="2" Grid.Column="1">35</TextBlock>
<TextBlock FontSize="12" Grid.Row="2" Grid.Column="2">Programming C#</TextBlock>
</Grid>
</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.

Grid DynamicGrid = new Grid();
DynamicGrid.Width = 400;
DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;
DynamicGrid.VerticalAlignment = VerticalAlignment.Top;
DynamicGrid.ShowGridLines = true;
DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);
The following code snippet adds three columns and three rows to Grid.
// Create Columns
ColumnDefinition gridCol1 = new ColumnDefinition();
ColumnDefinition gridCol2 = new ColumnDefinition();
ColumnDefinition gridCol3 = new ColumnDefinition();
DynamicGrid.ColumnDefinitions.Add(gridCol1);
DynamicGrid.ColumnDefinitions.Add(gridCol2);
DynamicGrid.ColumnDefinitions.Add(gridCol3);
// Create Rows
RowDefinition gridRow1 = new RowDefinition();
gridRow1.Height = new GridLength(45);
RowDefinition gridRow2 = new RowDefinition();
gridRow2.Height = new GridLength(45);
RowDefinition gridRow3 = new RowDefinition();
gridRow3.Height = new GridLength(45);
DynamicGrid.RowDefinitions.Add(gridRow1);
DynamicGrid.RowDefinitions.Add(gridRow2);
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.

// Add first column header
TextBlock txtBlock1 = new TextBlock();
txtBlock1.Text = "Author Name";
txtBlock1.FontSize = 14;
txtBlock1.FontWeight = FontWeights.Bold;
txtBlock1.Foreground = new SolidColorBrush(Colors.Green);
txtBlock1.VerticalAlignment = VerticalAlignment.Top;
Grid.SetRow(txtBlock1, 0);
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.

DynamicGrid.Children.Add(txtBlock1);

The complete code is shown below.

private void CreateDynamicWPFGrid()
{
// Create the Grid
Grid DynamicGrid = new Grid();
DynamicGrid.Width = 400;
DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;
DynamicGrid.VerticalAlignment = VerticalAlignment.Top;
DynamicGrid.ShowGridLines = true;
DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);
// Create Columns
ColumnDefinition gridCol1 = new ColumnDefinition();
ColumnDefinition gridCol2 = new ColumnDefinition();
ColumnDefinition gridCol3 = new ColumnDefinition();
DynamicGrid.ColumnDefinitions.Add(gridCol1);
DynamicGrid.ColumnDefinitions.Add(gridCol2);
DynamicGrid.ColumnDefinitions.Add(gridCol3);
// Create Rows
RowDefinition gridRow1 = new RowDefinition();
gridRow1.Height = new GridLength(45);
RowDefinition gridRow2 = new RowDefinition();
gridRow2.Height = new GridLength(45);
RowDefinition gridRow3 = new RowDefinition();
gridRow3.Height = new GridLength(45);
DynamicGrid.RowDefinitions.Add(gridRow1);
DynamicGrid.RowDefinitions.Add(gridRow2);
DynamicGrid.RowDefinitions.Add(gridRow3);
// Add first column header
TextBlock txtBlock1 = new TextBlock();
txtBlock1.Text = "Author Name";
txtBlock1.FontSize = 14;
txtBlock1.FontWeight = FontWeights.Bold;
txtBlock1.Foreground = new SolidColorBrush(Colors.Green);
txtBlock1.VerticalAlignment = VerticalAlignment.Top;
Grid.SetRow(txtBlock1, 0);
Grid.SetColumn(txtBlock1, 0);
// Add second column header
TextBlock txtBlock2 = new TextBlock();
txtBlock2.Text = "Age";
txtBlock2.FontSize = 14;
txtBlock2.FontWeight = FontWeights.Bold;
txtBlock2.Foreground = new SolidColorBrush(Colors.Green);
txtBlock2.VerticalAlignment = VerticalAlignment.Top;
Grid.SetRow(txtBlock2, 0);
Grid.SetColumn(txtBlock2, 1);
// Add third column header
TextBlock txtBlock3 = new TextBlock();
txtBlock3.Text = "Book";
txtBlock3.FontSize = 14;
txtBlock3.FontWeight = FontWeights.Bold;
txtBlock3.Foreground = new SolidColorBrush(Colors.Green);
txtBlock3.VerticalAlignment = VerticalAlignment.Top;
Grid.SetRow(txtBlock3, 0);
Grid.SetColumn(txtBlock3, 2);
//// Add column headers to the Grid
DynamicGrid.Children.Add(txtBlock1);
DynamicGrid.Children.Add(txtBlock2);
DynamicGrid.Children.Add(txtBlock3);
// Create first Row
TextBlock authorText = new TextBlock();
authorText.Text = "Mahesh Chand";
authorText.FontSize = 12;
authorText.FontWeight = FontWeights.Bold;
Grid.SetRow(authorText, 1);
Grid.SetColumn(authorText, 0);
TextBlock ageText = new TextBlock();
ageText.Text = "33";
ageText.FontSize = 12;
ageText.FontWeight = FontWeights.Bold;
Grid.SetRow(ageText, 1);
Grid.SetColumn(ageText, 1);
TextBlock bookText = new TextBlock();
bookText.Text = "GDI+ Programming";
bookText.FontSize = 12;
bookText.FontWeight = FontWeights.Bold;
Grid.SetRow(bookText, 1);
Grid.SetColumn(bookText, 2);
// Add first row to Grid
DynamicGrid.Children.Add(authorText);
DynamicGrid.Children.Add(ageText);
DynamicGrid.Children.Add(bookText);
// Create second row
authorText = new TextBlock();
authorText.Text = "Mike Gold";
authorText.FontSize = 12;
authorText.FontWeight = FontWeights.Bold;
Grid.SetRow(authorText, 2);
Grid.SetColumn(authorText, 0);
ageText = new TextBlock();
ageText.Text = "35";
ageText.FontSize = 12;
ageText.FontWeight = FontWeights.Bold;
Grid.SetRow(ageText, 2);
Grid.SetColumn(ageText, 1);
bookText = new TextBlock();
bookText.Text = "Programming C#";
bookText.FontSize = 12;
bookText.FontWeight = FontWeights.Bold;
Grid.SetRow(bookText, 2);
Grid.SetColumn(bookText, 2);
// Add second row to Grid
DynamicGrid.Children.Add(authorText);
DynamicGrid.Children.Add(ageText);
DynamicGrid.Children.Add(bookText);
// Display grid into a Window
RootWindow.Content = DynamicGrid;
}

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.

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.

DynamicGrid.ColumnDefinitions.Insert(3, new ColumnDefinition());

The RemoveAt method of Grid.ColumnDefinitions deletes a column at the given position.

DynamicGrid.ColumnDefinitions.RemoveAt(3);

The Clear method of Grid.ColumnDefinitions deletes all columns in a Grid.

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.

DynamicGrid.RowDefinitions.Add(new RowDefinition());

The Grid.RowDefinitions.Insert method adds a row at a given position.

DynamicGrid.RowDefinitions.Insert(3, new RowDefinition ());

The RemoveAt method of Grid.RowDefinitions deletes a row at the given position.

DynamicGrid.RowDefinitions.RemoveAt(3);

The Clear method of Grid.RowDefinitions deletes all rows in a Grid.

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.

<Grid Name="DynamicGrid" Width="466" Background="LightSteelBlue" ShowGridLines="True"
Canvas.Top="119" Canvas.Left="8" Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<GridSplitter
ResizeDirection="Rows"
Grid.Column="0"
Grid.ColumnSpan="10"
Grid.Row="1"
Width="Auto"
Height="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0"
Background="Green"/>
</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.

<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Blue" Offset="0.1" />
<GradientStop Color="Orange" Offset="0.25" />
<GradientStop Color="Green" Offset="0.75" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</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.