Layout Panel in WPF using VB.NET: Part 3

In this article I will explain about the layout and panels in WPF.
  • 2098

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

 grid1.gif

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

grid2.gif 

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

grid3.gif

Conclusion

I hope this part of my article helps you to clearing Grid concept. Next part is about the UniformGrid.
 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.