You learn the WrapPanel and
DockPanel in previous article. this article explain you the next category of
Layout Panels:
Grid: Grid is the next
category of layout panels and it is a most powerful and important container in
WPF. It behaves exactly same as its name implies it arranges its child controls
in a tabular structure of row and columns like the HTML functionality works but
it is more flexible than HTML, Each control has a row and column, and a control
can also have a row span and a column span in order to occupy multiple
cells.
The grid has one row and column by
default. To create additional rows and columns, you have to add
RowDefinations items to the RowDefinations collection and
ColumnDefinations items to the ColumnDefinations collection.
Creating a Grid-based layout is a two-step process. First, you
choose the number of columns and rows that you want. Next, you assign the
appropriate row and column to each contained element, thereby placing it in just
the right spot.
Example: Create a simple grid with 4 buttons(the default).
The code you need to write is:
<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>
<Grid.RowDefinitions>
<RowDefinition
/>
<RowDefinition
/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
/>
<ColumnDefinition
/>
</Grid.ColumnDefinitions>
<Button
Grid.Row="0"
Grid.Column="0"
Content="MANISH"
/>
<Button
Grid.Row="0"
Grid.Column="1"
Content="RAHUL"
/>
<Button
Grid.Row="1"
Grid.Column="0"
Content="RAM"
/>
<Button
Grid.Row="1"
Grid.Column="1"
Content="RAJ"
/>
</Grid>
</Window>
Output window
How see how to resize the controls
according to the requirment in next example:
Example: Create 4 buttom
grid with different size.
<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>
<Grid.RowDefinitions>
<RowDefinition
Height="40"
/>
<RowDefinition
/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="75"
/>
<ColumnDefinition
Width="75"
/>
</Grid.ColumnDefinitions>
<Button
Grid.Row="0"
Grid.Column="0"
Content="But1"
/>
<Button
Grid.Row="0"
Grid.Column="1"
Content="But
2" />
<Button
Grid.Row="1"
Grid.Column="0"
Content="But3"
/>
<Button
Grid.Row="1"
Grid.Column="1"
Content="But
4" />
</Grid>
</Window>
Output Window
As I say, a control can also span
multiple rows:
Example:
<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>
<Grid.RowDefinitions>
<RowDefinition
Height="60"
/>
<RowDefinition
Height="60"
/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="100"
/>
<ColumnDefinition
Width="100"
/>
</Grid.ColumnDefinitions>
<Button
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"Content="Button
1" />
<Button
Grid.Row="0"
Grid.Column="1"
Content="Button
2" />
<Button
Grid.Row="1"
Grid.Column="1"
Content="Button
3" />
</Grid>
</Window>
Output Window
Conclusion
I hope this part of my article
helps you to clearing Grid concept. Next part is about the UniformGrid.