Get my second horizontal grid splitter working correctly

Question

I am confused with GridSplitter objects:

The above has a vertical splitter:

<GridSplitter
    Width="5" 
    Background="LightGray"
    Grid.Row="1"
    Grid.RowSpan="4"
    Grid.Column="0" />

It behaves correctly and resizes the columns.

But I was trying to add a horizontal grid splitter:

<GridSplitter
    Width="5" 
    Background="Black"
    VerticalAlignment="Stretch"
    ResizeDirection="Rows"
    Grid.Row="2"
    Grid.Column="0" />

But see the black line? That is in the wrong place. It should be horizontal, between the two GroupBox items:

What is wrong with my markup logic? Interestingly, if I set the VerticalAlignment to Top or Center then the splitter will not even display, let alone work.

Thank you.

Update:

Above is resized control (thanks for your answer). But only the groupbox (in this context) should resize. The content of the groupbox can stay at the top.

Update: Fixed the resizing of controls bu changing the RowDefinition height values from 1* to auto.

Try setting the VerticalContentAlignment="Top" if the property exists on the GroupBox or setting the VerticalAlignment=Top of the root child element of the GroupBox — Nkosi
I will leave that for now. Do new question another day. Thanks. — Andrew Truckle
@Nkosi I solved that issue. My RowDefinition heights were all set to 1*. I changed them to auto. — Andrew Truckle

Nkosi Nkosi · Accepted Answer · 2016-06-18T15:41:53

For horizontal grid splitter you should set the height and horizontal alignment.

<GridSplitter
    Height="5" 
    Background="Black"
    VerticalAlignment="Center"
    HorizontalAlignment="Stretch"
    ResizeDirection="Rows"
    Grid.Row="2"
    Grid.Column="0" />

Get my second horizontal grid splitter working correctly

1 Answers