The Grid element in XAML represents a WPF Grid control. The following
code snippet creates a Grid control, sets it width and foreground color and
make sure 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 by 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, first column would be represented
by number 0. The following code snippet puts a TextBlock control in a cell that
is in second row and 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.
