WPF listview / gridsplitter / scrollviewer resize problems

Question

I have a problem with the grids grid that takes my list out of view in this combination. Steps to play:

• Run the program, drag the window size larger
• Drag the red splitter all the way to minimize the blue column
• Extend both ListView columns until they are outside the viewport and a horizontal scroll appears.
• Drag window size again

For me, this slowly pops the ListView out of the window. Note that ScrollViewer actually reduces the size with Window, but not at the same speed and slowly out of sight. As soon as the scrollviewer starts to exit view mode, the splitter can no longer be used!

Oddly enough, if I do not minimize the left panel first, I do not get this behavior!

What will this fix be?

<Window x:Class="LayoutTest3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="600" Width="800" MinHeight="600" MinWidth="800" > <Window.Resources> <XmlDataProvider XPath="/Celebrities/Celebrity" x:Key="celebs"> <x:XData> <Celebrities xmlns=""> <Celebrity Name="Jimmy"> <LastName>Page</LastName> </Celebrity> <Celebrity Name="Johnny"> <LastName>Depp</LastName> </Celebrity> <Celebrity Name="Britney"> <LastName>Spears</LastName> </Celebrity> </Celebrities> </x:XData> </XmlDataProvider> <DataTemplate x:Key="NameTemplate"> <TextBlock Text="{Binding XPath=@Name }" /> </DataTemplate> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" MinWidth="100" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" MinWidth="400" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" Background="Blue" /> <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" ResizeBehavior="PreviousAndNext" VerticalAlignment="Stretch" Background="Red" /> <Border Grid.Column="2" Background="Green"> <ListView ItemsSource="{Binding Source={StaticResource celebs}}"> <ListView.View> <GridView> <GridView.Columns> <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}" Width="150" /> <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding XPath=LastName}" /> </GridView.Columns> </GridView> </ListView.View> </ListView> </Border> </Grid> </Window> 

Answer 1

Known issue with GridSplitter and Column with MinWidth, GridSplitter is still changed. Grid ignores Column MinWidth. The result of this is a growing parent column that gets the larger size actually available. But grid layouts that take into account MinWidth and, therefore, your shrinking column remain in MinWidth, but a child with an increasing number of columns goes beyond the size that GridSplitter goes beyond the MinWidth of the shrinking column.

I am going to find out how I solved this in my one of the projects and I will send the code. In the meantime, you can try the following options.

• Remove MinWidth from ColumnDefinition
• Add MinWidth for Baby

Knowing in advance that your minimum grid size should be 500 + Size Splitter, you can set the MinWidth of the entire grid.

Answer 2

Here is how I did it:

 <Grid Name="container" SizeChanged="container_SizeChanged"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Name="rightPanel" Width="*" MinWidth="100"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Background="Red" Foreground="White">Test</TextBlock> <GridSplitter Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="2" Height="Auto" ResizeDirection="Columns"/> <Border Grid.Column="1" Background="Green" Margin="0 0 0 0"> <ListView ItemsSource="{Binding Source={StaticResource celebs}}"> <ListView.View> <GridView> <GridView.Columns> <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}" Width="150" /> <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding XPath=LastName}" /> </GridView.Columns> </GridView> </ListView.View> </ListView> </Border> </Grid> 

and the code behind (yuck!):

 private void container_SizeChanged(object sender, SizeChangedEventArgs e) { rightPanel.MaxWidth = container.ActualWidth - 150; } 

Basically you take out the minimum width and do a similar calculation to set MaxWidth on another panel.

Answer 3

Perhaps this may help, you should always use the same type of device for width / height, or the splitter is working fine.

  <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" MinWidth="150"/> <ColumnDefinition Width="4*" MinWidth="150"/> </Grid.ColumnDefinitions> <ListView Grid.Column="0" BorderBrush="#FF005BFF" Margin="0,0,5,0"> <ListView.View> <GridView> <GridViewColumn /> </GridView> </ListView.View> </ListView> <GridSplitter Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="2" /> <ListView Grid.Column="1" BorderBrush="#FFFF5100" Margin="5,0,0,0"> <ListView.View> <GridView> <GridViewColumn /> </GridView> </ListView.View> </ListView> </Grid>