WPF: TreeView or TreeListView Headers Horizontal Scrolling Issue

Question

I downloaded TreeListView from here. It did not showed Horizontal or Vertical Scroll bar when data is clipped. Like this

So I changed its Style to

<Style TargetType="{x:Type l:TreeListView}">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
            Value="Auto" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type l:TreeListView}">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <DockPanel>
                        <GridViewHeaderRowPresenter Columns="{StaticResource gvcc}"
                                                    DockPanel.Dock="Top" />
                        <ScrollViewer x:Name="_tv_scrollviewer_"
                                      Background="{TemplateBinding Background}"
                                      CanContentScroll="False"
                                      Focusable="True"
                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                      Padding="{TemplateBinding Padding}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </DockPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="VirtualizingStackPanel.IsVirtualizing"
                             Value="true">
                        <Setter Property="CanContentScroll"
                                TargetName="_tv_scrollviewer_"
                                Value="true" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Vertical Scrollbar is fine. But the problem is Horizontal Scollbar. When data gets clipped horizontally, and scrollbar is moved on right, the data moves right but headers stay where they are. Like this.

How to overcome this problem that when treeitem is scrolled horizontally, headers move with it. I am not allowed to put headers in scrollviewer because they need to be visible when data is scrolled vertically.

Answer 1

I had the same issue with this kind of tree and now is solved by sincronizing scrollbars. I added a scroll bar to the GridViewHeaderRowPresenter that is hidded horizontaly and disabled vertically, and I used a code from codeproject that already implements sincronization of scrollbars.

<DockPanel>
        <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Hidden"
                    VerticalScrollBarVisibility ="Disabled"
                    controls:ScrollSynchronizer.ScrollGroup="Group1">
          <GridViewHeaderRowPresenter Columns="{StaticResource gvcc}"/>
         </ScrollViewer>
         <ScrollViewer  
                     HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                     VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                     controls:ScrollSynchronizer.ScrollGroup="Group1">
                  <ItemsPresenter />
          </ScrollViewer>
</DockPanel>

Link to the library http://www.codeproject.com/Tips/564665/Synchronize-Two-Scroll-Viewers-in-WPF and the original article for the lib http://www.codeproject.com/Articles/39244/Scroll-Synchronization.

Answer 2

If you want the complete treeview (including the header) to scroll horizontally, additionanly add a scrolviewer like this:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" >
    <Treeview/>
</ScrollViewer>

Answer 3

I believe setting HorizontalScrollBarVisibility="Disabled" should force the contents of the scrollviewer inside. With the scrollbar disabled, it should keep it from messing up the render. This has actually been a problem for a couple of versions. I am unsure if it has been fixed in the latest WPF.