Why do horizontal gridsplitters center themselves in a row and vertical ones don't?

Question

I'm learning how to use gridsplitters and I'm getting confused by how seemingly different a horizontal splitter is to a vertical one. If you look at the XAML below, the first gridsplitter I made very easily, everything worked as expected, I set what row and column it should be in, then set how many rows it should span. It placed the splitter where I would expect it, on the right side on the column. (It doesn't actually resize anything and I don't know why, but at least it's there, where it's supposed to be).

The second splitter however will simply not cooperate in any way. I want it to be placed above the textbox at the bottom of the form. So I set it to that one cell, and it looks like it put itself in the center of the row. I'm obviously getting confused by something simple I don't understand, could someone tell me why the second gridsplitter is not behaving like I want?

<Window x:Class="FontViewer.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"
    xmlns:local="clr-namespace:FontViewer"
    mc:Ignorable="d"
    Title="Font Viewer" Height="480" Width="600">

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="0.8*"/>
        <RowDefinition Height="0.5*"/>
        <RowDefinition Height="0.7*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="0.3*"/>
    </Grid.RowDefinitions>

    <Border CornerRadius="6"
            BorderThickness="1"
            BorderBrush="Gray"
            Background="LightGray"
            Padding="8"
            Margin="6"
            Grid.ColumnSpan="2">
        <TextBlock FontSize="14"
                   TextWrapping="Wrap">
            Select a font to view from the list below.
            You can change the text by typing in the region at the bottom.
        </TextBlock>
    </Border>

    <ListBox x:Name="FontList"
             Grid.Row="1"
             Grid.RowSpan="5"
             HorizontalAlignment="Right"
             ItemsSource="{x:Static Fonts.SystemFontFamilies}"
             Width="190"
             Margin="0 0 0 8">
    </ListBox>

    <TextBox x:Name="SampleText"
             Grid.Row="5"
             Grid.Column="1"
             VerticalAlignment="Center"
             Height="18"
             MinLines="4"
             Margin="0 0 6 0"
             TextWrapping="Wrap"
             ToolTip="Type here to change the preview text.">
        The quick brown fox jumps over the lazy dog.
    </TextBox>

    <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
               FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
               FontSize="10"
               TextWrapping="Wrap"
               Margin="6"
               Grid.Column="1"
               Grid.Row="1"/>
    <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
               FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
               FontSize="16"
               TextWrapping="Wrap"
               Margin="6"
               Grid.Column="1"
               Grid.Row="2"/>
    <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
               FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
               FontSize="24"
               TextWrapping="Wrap"
               Margin="6"
               Grid.Column="1"
               Grid.Row="3"/>
    <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
               FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
               FontSize="32"
               TextWrapping="Wrap" 
               Grid.Column="1"
               Grid.Row="3"
               Margin="6,84,6,5.765" Grid.RowSpan="2"/>

    <GridSplitter Grid.Row="0"
            Grid.Column="0"
            Grid.RowSpan="6"
            Width="3"
            Background="LightGray"
            ResizeBehavior="PreviousAndNext"
            ResizeDirection="Columns" />

    <GridSplitter Grid.Row="5"
            Grid.Column="1"
            Height="3"
            Background="Black"
            ResizeBehavior="PreviousAndNext"
            ResizeDirection="Rows" />
</Grid>

Edit: It looks like I didn't include the closing window tag in the code, but it is there, it just gets omitted for some reason.

Answer 1

You have

             Grid.RowSpan="6"

On the first one, which will stretch it.

Try taking it out temporarily.

It is usual to set stretch on a gridsplitter.

Change your other one to:

     <GridSplitter Grid.Row="5"
        Grid.Column="1"
        Height="3"
        Background="Green"
        ResizeBehavior="PreviousAndNext"
        HorizontalAlignment="Stretch"
        ResizeDirection="Rows" />

And it will stretch horizontally.

Still won't do much, but it will stretch horizontally.

Dificult to tell what else you want this to do but it is usual to align a gridsplitter with a column or row edge.

See

https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-rows-with-a-gridsplitter

https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-columns-with-a-gridsplitter