Elements of a DockPanel that share the same scrollbar?

Question

Here is the code I have :

<ScrollViewer Grid.Row="2" CanContentScroll="True">
      <DockPanel>
           <TreeView x:Name="tView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>

           <TreeView Name="pluginsView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>
      </DockPanel>
</ScrollViewer>

I HAVE to define 2 TreeViews. There are in the same "area" (in mean same [Row, Column]) so I had to use a Panel. I used a StackPanel but the display was not what I wanted. I used the ScrollViewer so that I get a common scrollbar for the 2 TreeViews when they don't vertically fit the space of the "area".

The problem I have is horizontally. When 1 of my 2 TreeView is too "large", I got a scrollbar that appears but only for the TreeView that is too large, so when I scroll, only one of my TreeView moves horizontally. What I want is that when I scroll, both of my TreeView move horizontally.

I don't know if it's clear enough, I can upload screenshots if it's not clear !

I tried this code too, but it doesn't work too :

<ScrollViewer Grid.Row="2" CanContentScroll="True">
      <Grid Grid.Row="2">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
           </Grid.RowDefinitions>
           <TreeView Grid.Row="0" x:Name="tView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>

           <TreeView Grid.Row="1" Name="pluginsView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>
      </DockPanel>
</ScrollViewer>

but I got the EXACT same problem.. :(

Answer 1

It sounds like it is using the TreeView's internal ScrollViewer to scroll the content, not the outer ScrollViewer.

Usually this is because the content inside the ScrollViewer is limited in size in some way, so make sure you aren't limiting the size of the TreeView or it's parent panel in any way. This would include Vertical/Horizonal Aligment being set to Stretch.

Here's an example that works to scroll smoothly in both directions. I was a little surprised that I had to set HorizontalScrollBarVisibility in the <ScrollViewer> tag to make the Horizontal ScrollBar show up.

<Border BorderBrush="Black" BorderThickness="2" Height="100" Width="100">
    <ScrollViewer CanContentScroll="True"
                  HorizontalScrollBarVisibility="Auto"  
                  VerticalScrollBarVisibility="Auto">
        <DockPanel>
            <Rectangle Height="75" Width="150" Fill="Red" DockPanel.Dock="Top" />
            <Rectangle Height="75" Width="150" Fill="Blue" />
        </DockPanel>
    </ScrollViewer>
</Border>

Answer 2

Try disabling the horizontal ScrollViewer of the trees. This way the wrapping ScrollViewer will need to open.

XAML:

<ScrollViewer Grid.Row="2" CanContentScroll="True">
      <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="*" />
               <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <TreeView Grid.Row="0" x:Name="tView" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
               [...]
           </TreeView>

           <TreeView Grid.Row="1" Name="pluginsView" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
               [...]
           </TreeView>
      </Grid>
</ScrollViewer>

Answer 3

After hours of tests, here is what worked for me :

 <ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Auto">
     <DockPanel ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <TreeView x:Name="tView" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                [...]
            </TreeView>

            <TreeView Name="pluginsView" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                [...]
            </TreeView>
      </DockPanel>
  </ScrollViewer>

For this to work you HAVE TO disable the visibility of TreeViews AND the Grid, AND you have to use HorizontalScrollBarVisibility="Auto" on the ScrollViewer !