GridSplitter weird behavior, or is it not?

Question

The code below does a row-column demonstration of 3 rows where the last row had 3 columns. in each, the second element is a grid splitter.

if splitter's alignment is set to "center", it works as expected to resize others. but if it is set to left/right for horizontal (or top/bottom for vertical) it just shrinks other two while extending its cell (no less than its size)

Can someone explain why does the GridSplitter behave like this? the code is simple WPF code and can be copy-pasted to C# or VB WPF application's main xaml.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="25"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Background="Lime">
        <Label Content="Label" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </DockPanel>
    <GridSplitter Grid.Row="1" Height="5" Background="#FF7F7F7F" VerticalAlignment="Center" HorizontalAlignment="Stretch"  ResizeDirection="Rows"/>
    <DockPanel Grid.Row="2">
        <Grid DockPanel.Dock="Top" Margin="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="25"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <DockPanel Grid.Column="0" Background="Red">
                <Label Content="Label" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </DockPanel>
            <GridSplitter Grid.Column="1" Width="5" Background="#FF7F7F7F" VerticalAlignment="Stretch" HorizontalAlignment="Center" ResizeDirection="Columns"/>
            <DockPanel Grid.Column="2"  Background="Blue">
                <Label Content="Label" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </DockPanel>
        </Grid>
    </DockPanel>
</Grid>

GridSplitter's behavior is pretty weird...The direction is defined by the Horizontal/Vertical Alignment. So it is probably what is to be expected (check MSDN Help about GridSplitter). Update: Apparently the WPF-GridSplitter actually does have the Direction...interesting. Silverlight one does not. — johannes.colmsee

VinceL VinceL · Accepted Answer · 2018-04-24T18:06:49

GridSplitter has a property called ResizeBehavior which defines the action the question described. If not set manually the default behavior is BasedOnAlignment, meaning it is based on the HorizontalAlignment and VerticalAlignment values you are setting.

If they are set as in the code, ResizeBehavior is defaulted to PreviousAndNext. This will cause it to redistribute space on either side of the GridSplitter.

GridSplitter parts in the code are equivalent to these manual settings of ResizeBehavior.

...
<GridSplitter  ResizeBehavior="PreviousAndNext" Grid.Row="1" Height="5" Background="#FF7F7F7F" VerticalAlignment="Top"  HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
...
<GridSplitter  ResizeBehavior="PreviousAndNext" Grid.Column="1" Width="5" Background="#FF7F7F7F" VerticalAlignment="Stretch" HorizontalAlignment="Left" ResizeDirection="Columns"/>
...

Update with more explanation about default ResizeBehavior of BasedOnAlignment:

At the end of this answer below is a link to an image of a table excerpted from the book WPF 4.5 Unleashed By Adam Nathan (I do not yet have enough reputation to place this image directly here and so am only allowed to create it as a link).

The table shows what the GridSplitter will look like (shown as the colored rectangles/squares) depending upon the HorizontalAlignment and VerticalAlignment settings it is given. If neither of those settings have a stretch, then the GridSplitter will end up as a small dot and so it is only the cases where one of the alignments is set to stretch that we are interested in (as you did in your code).

When the rows or columns are proportionally sized (as is in your case with using asterisks), then dragging the GridSplitter changes the coefficients for the two cells indicated in the table accordingly.

As you can see when the one alignment is set to stretch and the other to center, the two cells affected are the ones that are on either side of the GridSplitter. Thus you see the behavior you first report of those cells on either side being sized equally.

But when set to the Left/Right or Top/Bottom values (depending upon if you are working with vertical or horizontal GridSplitters) then, as you can see from the table, the GridSplitter itself becomes one of the two affected cells. So if, for example, it is a vertical GridSplitter and you set the HorizontalAlignment to Left, you will only be able to move the GridSplitter from where it starts in the center towards the left and that will size that left cell smaller and make the GridSplitter itself larger (and in the process take away space from the right cell). You cannot, however, move the GridSplitter to the right and make the right cell smaller.

Table: Cells Directly Affected When Dragging a GridSplitter with Various Alignment Settings

GridSplitter weird behavior, or is it not?

1 Answers