Grid with GridSplitter not respecting minimum width for the second column

Question

I'm new to WPF and am having a small, but frustrating problem.

I have a grid with two rows and two columns. The first row contains a menu bar, the second row contains a column to the left (containing a listbox) and a column to the right of that (containing a listbox).

It also contains a GridSplitter to handle resizing the two columns. I naturally only want one GridSplitter in this interface.

I set the first column to have a minimum width of 260px, and it works great. I cannot resize the column below 260px. However, for the second column (the one on the right) it is not respecting the minimum width property at all.

I can resize it so it's completely invisible even.

What am I doing wrong here?

XAML below:

Thank you

<Window x:Class="MyProject.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:MyProject"
        mc:Ignorable="d"
        Title="MainWindow" Width="800" Height="600" Background="Black" MinWidth="800" MinHeight="600" Icon="/MyProject;component/Images/Porgram Icons/Icon1.ico">
    <Window.Resources>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <WrapPanel />
        </ItemsPanelTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
            <StackPanel/>
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="260" MinWidth="260"/>
            <ColumnDefinition MinWidth="450"/>
        </Grid.ColumnDefinitions>

        <Menu Width="Auto" Height="20" Background="#272822" Foreground="#FFFFFF" DockPanel.Dock="Top" Grid.Row="0" Grid.ColumnSpan="2">
            <MenuItem Header="_File" Background="#272822" Foreground="#FFFFFF" BorderBrush="Black">
                <MenuItem Header="Quit" Background="#272822"/>
                <Separator />
            </MenuItem>
        </Menu>

        <ListBox x:Name="listBox1" ItemsPanel="{DynamicResource ItemsPanelTemplate2}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="0" Background="#272822" Grid.Column="0" Grid.Row="1" MinWidth="110" VerticalContentAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Hidden"/>

        <GridSplitter Width="5" Background="#272824" Grid.Column="0" Grid.Row="1"/>

        <Border CornerRadius="10" BorderBrush="#272824" 
              BorderThickness="1" Grid.Column="1" Grid.Row="1">
            <ListBox x:Name="listBox2" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="1" Background="#272822" Grid.Row="1" Grid.Column="1"/>
        </Border>
    </Grid>
</Window>

Answer 1

Use GridSplitter in side a column or row like below,

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="260" MinWidth="260"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition MinWidth="260"/>
    </Grid.ColumnDefinitions>

  //First Control in Column 0

  <GridSplitter Width="5" Grid.Column="0" Grid.Row="1"/>// Splitter in column 1

  //Second Control in column 2

</Grid>

Answer 2

You will find this works a lot better...

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30*" MinWidth="260"/>
        <ColumnDefinition Width="70*" MinWidth="450"/>
    </Grid.ColumnDefinitions>

It is not clear to me why your definition does not work. The fixed width of the first column seems to be confusing the splitter.

Best practice is to put the splitter in its own column.

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30*" MinWidth="260"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="70*" MinWidth="450"/>
    </Grid.ColumnDefinitions>
    <GridSplitter Width="5" Background="#272824" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>