Preface

Grid is the most powerful layout container in WPF and deserves a special topic to understand how to use it.

Use

Row and Column Definitions

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
</Grid>

Row and Column Width and Height Settings

There are three ways to set the width and height of rows and columns, which are described in the recommended order:

• Automatic size setting (most commonly used, most recommended)

  <RowDefinition Height="Auto"></RowDefinition>
  

• Scaled settings (good adaptability)

  // The height below is twice that above
  <RowDefinition Height="*"></RowDefinition>
  <RowDefinition Height="2*"></RowDefinition>
  

• Set absolute width and height (rigid, inflexible and not recommended)

  <RowDefinition Height="30"></RowDefinition>
  

Draggable Splitter Bar

GridSplitter allows users to dynamically resize each row and column of the Grid, such as the left and right layout of the computer's resource manager.

There are some guidelines for using GridSplitter:

• When using GridSplitter, it is recommended to reserve a row or column to place the GridSplitter object, with the reserved row and column width set to Auto
• When each GridSplitter is dragged, it changes the size of the entire row or column, not just the grid Splitter is placed in which grid changes its size, which is a bit like dragging excel columns
• Combining the above features, when using GridSplitter, it's best to let it go through the entire row or column, setting RowSpan. If you don't, the only area you can drag is the row, but the effect is to move the entire row or column.

Property description:

• ShowPreview property.This property determines whether the dimensions change immediately when dragging the splitter bar or whether a preview of the dashed line is shown first
• The DragIncrement property allows the splitter bar to move more, set to 30, from a smooth drag to skip every 30 pixels, similar to the effect of a shift.
• The Background property sets how the splitter bar is filled to change the appearance of the splitter bar

How to set up GridSplitter:

• Setting the vertical splitter bar requires setting VerticalAlignment to Stretch, Width to a fixed value (making the splitter slightly wider to be visible), and HorizontalAlignment to Center, since this is the default value for the property, you do not need to explicitly specify it
• Setting the horizontal splitter bar requires setting HorizontalAlignment to Stretch, Height to a fixed value, VerticalAlignment to Center, since this is the default value for the property, you do not need to specify it explicitly

Examples:

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition MinWidth="50"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
    <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
    <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
    <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>

Two Grid Dimensions Link Shared Dimension Groups

If two Grids, one row or column of one Grid, change the size of the other, you need to use the ShareSizeGroup shared size group

Use:

• The outer control containing two Grid s must set IsSharedSizeScope to determine the shared size range
• The width and height of two shared rows and columns require SharedSizeGroup = "labelName"
• ShareSizeGroup is specified when a row or column is defined

Examples:

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="label1"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="True" DragIncrement="30"></GridSplitter>
    </Grid>
    <Grid ShowGridLines="True" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="label1"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
    </Grid>
</Grid>

Notes and tips

• You can set the Grid.ShowGridLine to True to allow the Grid to display split lines, making it easy to observe the grid panel split while developing
• Layout rounding.For example, dividing a 99-pixel Grid into two halves causes blurring because the pixels can't be whole.The solution is:

  <Grid UseLayoutRounding="True">
  

  Layout rounding eliminates blurring by aligning content to the nearest pixel boundary.
• You can use GridSplitter if you don't reserve a row or column, but if GridSplitter shares a cell with other content, you need to deal with their relationships so that the contents don't overlap with GridSplitter.