wpf - TreeListView horizontal scrollbar for each column

Question

I am trying to customize the sample TreeListView described on MSDN TreeListView and downloaded from GitHub Ariesy TreeListView .

I would like to apply one styling change - introducing separate horizontal scrollbars for each of the column.

In result desired TreeListView control should look this way horizontal scrollbars location is marked as red-blue rectangles .

I tried different approaches with no luck - horizontal scrollbars were never displayed for each column - only one global horizontal and vertical scrollbar for the whole control is presented. I suppose that some customization related to ItemsPresenter is required, but that is only my assumption. This is my current code that presents only global scrollbars for the whole TreeListView :

<Style TargetType="{x:Type l:TreeListView}">
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type l:TreeListView}">
            <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
                <DockPanel>
                    <GridViewHeaderRowPresenter Columns="{DynamicResource gvcc}"
                                    DockPanel.Dock="Top" AllowsColumnReorder="False"
                                    HorizontalAlignment="Stretch"/>

                    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                              Name="scrollViewerBody"
                              VerticalScrollBarVisibility="Auto">
                        <ItemsPresenter />
                    </ScrollViewer>
                </DockPanel>
            </Border>
        </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>

This is how the control looks currently: only global scrollbars available

Do you know how the desired behavior could be achieved?

Answer 1

Not going to happen. The way the control is put together behind the scenes, there is no concept of a "'something' that spans every row in a column". Each row is a GridViewRowPresenter which "fakes" the columns in ArrangeOverride. You wouldn't be able to do anything to span all the rows (which is what you need) because they are all independent of each other on the visual tree and have no relationship to each other. The GridViewRowPresenter just lays out TextBlocks for each row according to the width of each column.

You can achieve what you want by putting the control together a different way. It's quite a bit of work though. Have a view that puts the header control at the top and track the column resizes to 3 ScrollViewers (assuming you have 3 columns). In the first ScrollViewer, you'd put a TreeView… in the other columns, you had to put a vertical stack panel and manage showing and hiding the sub items as the tree is expanded / collapsed.

That being said... why do you even want to do this? It's not something that people expect. If you want to see more of a column, you just stretch the header. Multiple horizontal scroll bars will look very messy and confuse the user. Stretching the columns is what people expect.