XAML - Can't resize elements to 0 width in this case - xaml

Question

Given the following XAML my goal is to keep the columns AAA, BBB, CCC always visible. The columns with the listboxes can resize all the way to zero though.
If I remove the ListBoxes then the application works exactly the way I want it to. That is, it doesn't have the weird behavior where the min widths are not respected.
With the listboxes (or DataGrids) the following XAML has this behavior:
After starting the application, if I drag the splitterA all the way close to BBB (BBB will keep the desired width of 25), then drag the splitterB all the way to the right then AAA will have the desired width of 25.
On the other hand, after starting the application, if I drag splitterA all the way to the right (AAA will keep the desired width of 25), then drag the splitterB all the way to the right then AAA will go off the screen. Surprisingly if I then drag the splitterA just a pixel to the left then both columns will "snap" into the correct place.
<Grid Background="CadetBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterB" HorizontalAlignment="Left" />
<Grid Background="Aqua" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBB" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterA" HorizontalAlignment="Left" />
<Grid Background="BurlyWood" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Why does it work when I remove the listboxes?
Note: I modified the question and XAML code slightly to clarify things and also to show what I just found about the listboxes.

Answer 1

I've been playing around with the code for a little bit and it looks like your main problem lies in the fact that your GridSplitters don't have their own columns.
The way GridSplitter works is it adjusts the column immediately to the left and immediately to the right of it. So simply adding an additional column for a GridSplitter won't quite cut it, since you will then have 4 columns in your Grid, and you need both columns to the left of the splitter to be affected. So I would recommend putting those in an additional Grid.
The other problem is the MinWidth of 50 you have on the outer grid does not account for the width of the GridSplitter, so it should be 55.
It seems like this whole thing could be done more cleanly, but since I'm not sure exactly what you're trying to accomplish, I kept the "spirit" of your code intact and updated some things:
<Grid Background="CadetBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" Width="Auto"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition MinWidth="55" Width="5*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" />
<ListBox Grid.Column="0"/>
<GridSplitter Width="5" Grid.Column="1" />
<Grid Background="Aqua" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition MinWidth="25" Width="5*" />
</Grid.ColumnDefinitions>
<TextBlock Text="BBB"/>
<ListBox Margin="0,20,10,20"/>
<GridSplitter Width="5" Grid.Column="1" />
<Grid Background="BurlyWood" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Margin="0,20,10,20" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Hope this helps!

Answer 2

It's a WPF bug:
https://connect.microsoft.com/VisualStudio/feedback/details/636072/msdn-forum-grid-layout-issue-with-minwidth-starsizing
http://social.msdn.microsoft.com/Forums/en/wpf/thread/24460784-7d09-4627-89fe-975e0ca7b303
I got around it with a hack. If anyone has a better solution I'd love to hear it...
XAML:
<Grid Background="CadetBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterB" HorizontalAlignment="Left" DragDelta="splitterB_DragDelta" />
<Grid Background="Aqua" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Name="bbbColumn"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBB" Width="25" />
<ListBox Grid.Column="1" Name="bbbListBox" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterA" HorizontalAlignment="Left" DragDelta="splitterA_DragDelta" />
<Grid Background="BurlyWood" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Code:
private void ToggleWidths()
{
if (bbbColumn.ActualWidth < 10
&& bbbListBox.Visibility != System.Windows.Visibility.Collapsed)
bbbListBox.Visibility = System.Windows.Visibility.Collapsed;
else if (bbbColumn.ActualWidth >= 10
&& bbbListBox.Visibility != System.Windows.Visibility.Visible)
bbbListBox.Visibility = System.Windows.Visibility.Visible;
}
private void splitterA_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
ToggleWidths();
}
private void splitterB_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
ToggleWidths();
}