Gridsplitter/ListView/ScrollViewer problem

Question

I have a problem with the gridsplitter pushing my listview out of view in this combination. Steps to reproduce:

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

For me, this slowly pushes the ListView outside the Window/clips the ScrollViewer. Note the ScrollViewer is actually decreasing in size with the Window, but not at the same rate and slowly goes out of view. Once the scrollviewer starts slipping out of view the splitter cannot be used any more!

Oddly enough, if I don't minimize the left panel first I don't get this behavior!

Why does it have this behaviour and what would be a fix for this?

<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

Hi Dave ola,

Thank you for your helpful feedback.

This behavior is casue by Two start"*" width column, the Grid layout part cause the splitter could not resize anymore, I think there is a workaround you could refer to, you could set the first Grid.Column width to a hard code width instead of start.

 

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi Sheldon,

 

If I set the first column to hardcoded with:

 

 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="300" MinWidth="100" />
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="*" MinWidth="400" />
 </Grid.ColumnDefinitions>

This solves the window resize problem, but now if I move the gridsplitter to the right it pushes my listview all the way outside the window!

 

Answer 3

Have you tried:

<ColumnDefinition Width="*" MinWidth="100"/>

<ColumnDefinition Width="5"/>

<ColumnDefinition Width="Auto" MinWidth="400" />

 

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

That behaviour is just weird. If I widen my listview columns it pushes the left panel smaller, and I can stretch columns out of view without a horizontal scollbar. What I need is:

* left and right panels share window width and are resized by a splitter

* a listview in the right panel

* when the listview columns stretch out of view, a horizontal scrollbar appears so the user can see that content

* the window resizes without clipping the internal controls

It seems a very difficult thing to do with WPF.

The code in the first post is what I need, except for the behavior when the gridsplitter is far left and the window is made smaller.

Answer 5

Hi Dave Ola,

I find lots of people faced the similar issue, like:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/3131e948-520b-4016-86cd-feafb310e1ab

http://social.msdn.microsoft.com/Forums/en/wpf/thread/24460784-7d09-4627-89fe-975e0ca7b303

And someone has submit a feedback about this issue to WPF connect, you could refer to:

http://social.msdn.microsoft.com/Forums/en/wpf/thread/24460784-7d09-4627-89fe-975e0ca7b303

I am sorry to tell that I think you have to change your desgin and drop some behaviors,

 

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 6

Hi Dave Ola,

Any updates?

 

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 7

Hi Sheldon,

 

Actually yes. I ended up approaching the problem from a different way and instead of setting a minimum width on the first column I set a maximum width (container width - desired minwidth for column 1) on the other column, changing dynamically as the container is resized. Now everything works fine:

 

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

and

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

Thanks for your help!