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>

score 3 · Accepted Answer · answered Feb 20 '17 at 21:37

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"/>

This (first example) worked perfectly for my use case. Thank you — PersuitOfPerfection, Feb 20 '17 at 22:13

score 1 · Answer 2 · answered Feb 20 '17 at 21:04

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>

answered Feb 20 '17 at 21:04

Abin

2,868
1
23
59

I presume you meant to put the grid splitter in column 1 (0, 1, 2) right? I tried this but it seemed to exhibit the same problem as stated in the OP – PersuitOfPerfection Feb 20 '17 at 21:33
I appreciate the help. The solution was a deviation on your answer anyway. Thank you – PersuitOfPerfection Feb 20 '17 at 22:28

Grid with GridSplitter not respecting minimum width for the second column

2 Answers2