Grid in WPF

Grid In Wpf

Grid is mostly used panel in wpf. It's used for designing layout of UI in wpf. It's used for defining rows and columns of table like structure that is similar to html table.

You can add a row RowDefinition in grid's child element Grid.RowDefinitions as below example:

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="200" />    
</Grid.RowDefinitions>

You can add a column ColumnDefinition in grid's child element Grid.ColumnDefinitions as below example:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>

Below example demonstarte that how to design rows and colums in Grid:

<Window x:Class="Grid.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="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

        </Grid.ColumnDefinitions>

    </Grid>

</Window>

Output:

Place Controls in Row and Column

After defining layout of grid, next task is place wpf controls inside row and column. In html table, you can simply place control inside column but in wpf grid its bit typical. For placing control inside grid, use Grid.Column and Grid.Row attached property of control to place control in specific row and column. You have to define row and column index value in Grid.Row and Grid.Column property. Below example demonstrate that how to place control in specific row and column:

<Window x:Class="Grid.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="500">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Content ="Row 0, Column 0" />

        <Button Grid.Row="0" Grid.Column="1" Content ="Row 0, Column 1" />

        <Button Grid.Row="0" Grid.Column="2" Content ="Row 0, Column 2" />

        <Button Grid.Row="1" Grid.Column="0" Content ="Row 1, Column 0" />

        <Button Grid.Row="1" Grid.Column="1" Content ="Row 1, Column 1" />

        <Button Grid.Row="1" Grid.Column="2" Content ="Row 1, Column 2" />

        <Button Grid.Row="2" Grid.Column="0" Content ="Row 2, Column 0" />

        <Button Grid.Row="2" Grid.Column="1" Content ="Row 2, Column 1" />

        <Button Grid.Row="2" Grid.Column="2" Content ="Row 2, Column 2" />

    </Grid>

</Window>

Output:

Grid ColumnSpan

You can merge columns in grid as per your requirement. Use Grid.ColumnSpan property same as html table's colspan property. Below example demonstrate that how to use Grid.ColumnSpan in grid:

<Window x:Class="Grid.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="500">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.ColumnSpan="3" Content ="Row 0, ColumnSpan 3" />

       

        <Button Grid.Row="1" Grid.ColumnSpan="3" Content ="Row 1, ColumnSpan 3" />

       

        <Button Grid.Row="2" Grid.ColumnSpan="3" Content ="Row 2, ColumnSpan 3" />

       

    </Grid>

</Window>

Output:

Grid RowSpan

You can merge rows in grid as per your requirement. Use Grid.RowSpan property same as html table's rowspan property. Below example demonstrate that how to use Grid.RowSpan in grid:

<Window x:Class="Grid.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Grid RowSpan" Height="350" Width="500">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="0" Grid.RowSpan="3" Content ="Column 0, RowSpan 3" />

 

        <Button Grid.Column="1" Grid.RowSpan="3" Content ="Column 1, RowSpan 3" />

 

        <Button Grid.Column="2" Grid.RowSpan="3" Content ="Column 2, RowSpan 3" />

       

    </Grid>

</Window>

Output:

RowSpan and ColumnSpan

You can also merge row as well as column together. Below example demonstrate that use of Grid.RowSpan and Grid.ColumnSpan together:

<Window x:Class="Grid.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Grid RowSpan ColumnSpan" Height="350" Width="500">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

            <ColumnDefinition Width="160" />

        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="Red"  

              Content ="Row 0, Column 0 ColumnSpan 2" />

 

        <Button Grid.Row="0" Grid.Column="2" Background="DodgerBlue"  Content ="Row 0, Column 2" />

 

        <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Background="DeepPink"  

              Content ="Row 1, Column 0, RowSpan 2" />

 

        <Button Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" 

              Background="DarkViolet"  Content ="Row 1, Column 1, RowSpan 2, ColumnSpan 2" />        

    </Grid>

</Window>

Output: