Vertical and horizontal GridSplitter

Question

I have a grid and I am trying to put both vertical and horizontal GridSplitters. It's my main grid and I would like it to be as fluid as possible.

On my second definition I get "Missing Grid.Column setter for non-first child"

I've found loads of documentation on implementing one or the other. I have found nothing suggesting that I can do both. But, our industry is made of people wanting to push functionality.

Here is my XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"></ColumnDefinition>
        <ColumnDefinition Width="5"></ColumnDefinition>
        <ColumnDefinition Width="50*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*"></RowDefinition>
        <RowDefinition Height="5"></RowDefinition>
        <RowDefinition Height="50*"></RowDefinition>
    </Grid.RowDefinitions>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"></GridSplitter>
    <GridSplitter  Grid.Row="1" Height="5" HorizontalAlignment="Stretch"></GridSplitter>

Hypabyssal

Your XAML is missing from the question. – Jetta

Possible duplicate of WPF vertical gridsplitter not working – Catullus

Answer 1

You need to set Grid.Column for grid splitters and also you need

HorizontalAlignment="Stretch"  -> for horizontal splitter
VerticalAlignment="Stretch"  -> for Vertical splitter

so your code looks like --

<GridSplitter Grid.Column="1" Width="5" Grid.RowSpan ="3" VerticalAlignment="Stretch"></GridSplitter>
<GridSplitter  Grid.Row="1" Height="5" Grid.ColumnSpan ="3" HorizontalAlignment="Stretch"></GridSplitter>

Trelu

This only works because ResizeDirection=”Auto” will most likely choose by Alignment. But this is not how you really set the ResizeDirection. – Woolsack

Answer 2

ResizeBehavior="PreviousAndNext" needs to be added to allow proper adjustment of both columns and rows. See below for my sample.

    <Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"></ColumnDefinition>
        <ColumnDefinition Width="5"></ColumnDefinition>
        <ColumnDefinition Width="50*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*"></RowDefinition>
        <RowDefinition Height="5"></RowDefinition>
        <RowDefinition Height="50*"></RowDefinition>
    </Grid.RowDefinitions>
    <GridSplitter Grid.Column="1" Width="5" Grid.RowSpan ="3" 
                  VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext">
    </GridSplitter>
    <GridSplitter  Grid.Row="1" Height="5" Grid.ColumnSpan ="3" 
                   HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndNext">            
    </GridSplitter>
    <Button Grid.Row="0" Grid.Column="0" Content="1,1" FontSize="30"/>
    <Button Grid.Row="2" Grid.Column="0" Content="3,1" FontSize="30"/>
    <Button Grid.Row="0" Grid.Column="2" Content="1,3" FontSize="30"/>
    <Button Grid.Row="2" Grid.Column="2" Content="3,3" FontSize="30"/>
</Grid>

Drool

In the title you misspelled ResizeHehavior where it must be ResizeBehavior - Suggested edit queue is full – Woolsack

Spelling error fixed. Thanks. – Drool

Answer 3

You can set the direction as follows:

<GridSplitter ResizeDirection=”Rows”/>

or

<GridSplitter ResizeDirection=”Columns”/>

However, when you set Alignment to either Horizontal or Vertical, the default ResizeDirection=”Auto” will most likely choose a fitting resize direction.

Woolsack

this doesnt really work. I want a vertical splitter and I set it to Columns it resizes the column the splitter sits in but the column on the left becomes resized in opposite direction. if you are so sure about your answer perhaps a more complete example would help – Gann

This is totally the expected behavior of the GridSplitter: Moving the split between two grid columns - make one smaller while the other becomes bigger. I don't understand your critique. – Woolsack