#1,048 – How to Set a GridSplitter’s Alignment Properties

The most common way to use a GridSplitter is to place it in its own auto-sized row or column.  In the example below, we want a vertical GridSplitter, so we place it in its own auto-sized column.

        <Grid Name="myGrid">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Label Content="Row 0 Col 0" Background="Azure" Grid.Row="0" Grid.Column="0" />
            <!-- more here -->

            <GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="3" Background="Blue"
                      VerticalAlignment="Stretch" HorizontalAlignment="Center" />
        </Grid>

When a vertical GridSplitter is in its own column, you’ll want to set its VerticalAlignment to Stretch and its HorizontalAlignment to Center.  (A horizontal GridSplitter would reverse this).

With the HorizontalAlignment set to Center, the column containing the GridSplitter does not itself resize.  Moving the GridSplitter resizes the two columns on either side of it, which is what we want.