GridSplitter Not Working for Rows

Question

This is just an example to demonstrate my issue so this is the entire XAML:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
		Height="250"
		Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition />
			<ColumnDefinition />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition />
			<RowDefinition />
			<RowDefinition />
		</Grid.RowDefinitions>
		<GridSplitter
			Background="Green"
			Grid.Column="0"
			Grid.Row="0"
			Grid.RowSpan="3"
            ResizeDirection="Columns"
			VerticalAlignment="Stretch"
			Width="20" />
		<GridSplitter
			Background="Red"
			Grid.Column="1"
			Grid.Row="2"
            HorizontalAlignment="Stretch"
            ResizeDirection="Rows"
			Width="20" />
    </Grid>
</Window>

The intent is to have the first GridSplitter vary the width of the two columns while the second varies the height of rows 1 and 2 in column1.

This is what I get:

Why is the red splitter not horizontal?

Answer 1

Check two variants:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <GridSplitter
		Background="Green"
		Grid.Column="0"
		Grid.Row="0"
		Grid.RowSpan="3"
        ResizeDirection="Columns"
        HorizontalAlignment="Right"
		VerticalAlignment="Stretch"
		Width="20" />
    <GridSplitter
		Background="Red"
		Grid.Column="1"
		Grid.Row="1"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Bottom"
        ResizeDirection="Rows"
		Height="20" />
</Grid>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <GridSplitter
		Background="Green"
		Grid.Column="0"
		Grid.Row="0"
        ResizeDirection="Columns"
        HorizontalAlignment="Right"
		VerticalAlignment="Stretch"
		Width="20" />
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <GridSplitter
			Background="Red"
			Grid.Column="0"
			Grid.Row="1"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Bottom"
            ResizeDirection="Rows"
			Height="20" />
    </Grid>
</Grid>

It is also possible to allocate separate rows and columns for splitters.