XAML Grid

This article explains how to use Grid element in XAML.
  • 3273

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.

 GridImg1.gif

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
 
© 2019 DotNetHeaven. All rights reserved.