XAML Grid
This article explains how to use Grid element in XAML.
A Grid control is used to display tabular data in a column and row format. The <Grid /> element of XAML represents a Grid control. In this article, I will disucss how to use Grid control in XAML.
Creating a Grid
The <Grid /> element creates a Grid in XAML, which supports properties similar to other XAML elements. For example, the following code creates a Grid control and sets the width, height, and background color.
<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
Width="400" Height="200" Background="LightBlue" >
</Grid>
Adding Grid Columns
You need to use <ColumnDefinition /> element to add a column to the Grid control. The following code adds four columns to the grid.
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
Adding Grid Rows
The <RowDefinition /> element adds a row to the grid. The following code adds 3 rows to a grid.
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
Sample Example
<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
Width="400" Height="200" Background="LightBlue" >
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<TextBlock Grid.Column="0" Grid.Row="0">First Name</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0">Last Name</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0">DOB</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="0">Degree</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1">Mahesh</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1">Chand</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1">07/10/1974</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="1">Mastes</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2">Don</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2">Glaxy</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2">01/20/1904</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="2">Post Graduate</TextBlock>
</Grid>
|
Listing 1. Creating a Grid Control
The code listed in Listing 1 generates Figure 1.
Figure 1. Grid control in XAML
Summary
In this article, I discussed how to create a Grid and add columns and rows to it.
Further Readings
You may also want to read these related articles.
Ask Your Question
Got a programming related question? You may want to post your question here