Introduction
Here we talking about the Grid in WPF. The Grid is a layout panel that arranges its child elements or controls in tabular structure of rows and columns. We can resize it easily by the help of VerticalAlignment and HorizontalAlignment property. Its functionality is more flexible than the HTML table. A column can contain different or multiple controls. Grid is very useful in .NET because when we create a tabular structure and want to add multiple controls in it then we uses Grid control.Automatically generates columns according to the public properties of your data objects by using of AutoGenrateColumn Property. Data Grid provides this feature. When we create Grid on our page the code in XAML look like this.
Code
<Grid Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Grid1" VerticalAlignment="Top" Width="481" >
</Grid>
Defining the Rows and Columns
The Grid has one row and one column by default. If we want to add more columns and rows thenwe have to add RowDefinition
items to the RowDefinitions
collection and ColumnDefinition
items to the ColumnDefinitions
collection. By these ColumDefinition and RowDefinition property we can give the columns and rows. when we add the rows and columns in Grid Then code in XAML will look like this.
property window
We can see these properties in this property window.
Code
<Grid Visibility="Visible" IsHitTestVisible="True">
<Grid Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Grid1"VerticalAlignment="Top" Width="481" />
<Grid.RowDefinitions>
<RowDefinition Height="83"></RowDefinition>
<RowDefinition Height="105"></RowDefinition>
<RowDefinition Height="117*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="101"></ColumnDefinition>
<ColumnDefinition Width="102"></ColumnDefinition>
<ColumnDefinition Width="105"></ColumnDefinition>
<ColumnDefinition Width="115"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
After adding rows and columns in Grid, Grid will look like this.
Simple Grid with Multiple controls
There is a Grid which contains multiple controls like button, label and textboxes.
<Grid Visibility="Visible" IsHitTestVisible="True">
<Grid Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Grid1" VerticalAlignment="Top" Width="481">
<Label Content="EMP ID" Height="28" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Label1"VerticalAlignment="Top" ContentStringFormat="" Width="70" />
</Grid>
<Label Height="28" HorizontalAlignment="Left" Margin="20,36,0,0" Name="Label2" VerticalAlignment="Top" Grid.Row="1"Width="70" Content="EMP NAME" />
<Label Content="EMP ADD" Height="28" HorizontalAlignment="Left" Margin="20,39,0,0" Name="Label3"VerticalAlignment="Top" Grid.Row="2" Width="70" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="13,25,0,0" Name="TextBox1" VerticalAlignment="Top"Width="120" Grid.Column="1" Background="#FFEFB5B5" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="13,36,0,0" Name="TextBox2" VerticalAlignment="Top"Width="120" Grid.Column="1" Grid.Row="1" Background="#FFCFE8FF" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="13,44,0,0" Name="TextBox3" VerticalAlignment="Top"Width="120" Grid.Column="1" Grid.Row="2" Background="#FFC0F2C0" />
<Button Content="SUBMIT" Height="34" HorizontalAlignment="Left" Margin="42,127,0,0" Name="Button1"VerticalAlignment="Top" Width="75" Grid.Column="2" Grid.Row="2" />
The output will look this
Auto generated columns
Automatically generates columns according to the public properties of your data objects by using of AutoGenrateColumn Property. Data Grid provides this feature. It generates these types of columns.
- Textbox columns for string values.
- Checkbox columns for boolean values.
- Combobox columns for enumerable values.
- Hyperlink columns for Uri values.
Resize columns and rows
We can resize the columns and rows by the help of GridSplitter. WPF provides this feature. Code will look like this in XAML.
<Grid Height="257" Name="Grid1" Width="352" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="174*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="173*" />
</Grid.ColumnDefinitions>
<Label Content="LEFT SIDE" Margin="12,0,0,0" Background="#FFE7A3A3" />
<GridSplitter HorizontalAlignment= "Right" VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="RIGHT SIDE" Grid.Column="3" Background="#FFB0EDB0" />
</Grid>
output will look like this.