Here we see how to create Grid control and also explain the basic use of Grid properties in xaml.
Grid control
The Grid control contains row and columns as a table in HTML. It is also called the layout control. It supports arranging controls in multi-row and multi-column layouts.
Creating Grid control in XAML
<Grid x:Name="LayoutRoot" Background="White" Width="450" ShowGridLines="True"></Grid>
The Width and Height property represents the width and the height of the control. Name property represents name of the control.
Important Property
ColumnDefinitions - ColumnDefinitions collections is used to specify number of columns in Grid control.
ShowGridLines - ShowGridLines="True" This indicates that the grid lines will be visible. You can always set this property to False if you want to hide the grid lines.
Column Width, and Row Height
To provide the most flexibility, Grid columns and rows are sized by GridLength objects which use the GridUnitType, which in turn allows you to choose among:
Auto (size based on the size properties of the object being placed in the grid).
Pixel (size in pixels).
Star (size based on a weighted proportion of the available space).
For example
The following example explains how to use a Grid and how to create rows and columns:
XAML code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="LayoutRoot" Background="White" Width="400" >
<Grid.RowDefinitions>
<RowDefinition Height="81"></RowDefinition>
<RowDefinition Height="101"></RowDefinition>
<RowDefinition Height="118*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="109*"></ColumnDefinition>
<ColumnDefinition Width="114"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Height="86" HorizontalAlignment="Left" Margin="19,11,0,0" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="65" Grid.Column="1" Grid.Row="2" Source="/WpfApplication70;component/Images/file1.jpg" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="12,30,0,0" Name="TextBox1" VerticalAlignment="Top" Width="75" Text="TextBox" />
<Rectangle Height="53" HorizontalAlignment="Left" Margin="22,19,0,0" Name="Rectangle1" Stroke="Black" VerticalAlignment="Top" Width="65" Grid.Column="3" Grid.Row="1">
<Rectangle.Fill>
<ImageBrush ImageSource="/WpfApplication70;component/Images/image1.jpg.gif" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
Now run the application without ShowGridLines property.
Figure1.gif
Now run the application with ShowGridLines property.
ShowGridLines="True"
Figure2.gif