31

Can anybody help me out with how to enable a treeview to scroll? There must be a simple way but I can't make it work in my code. After multiple failed tries, I currently have something like this:

        <ScrollViewer CanContentScroll="True">
           <TreeView ...>
           </TreeView>
        </ScrollViewer>

I do see an 'disabled' scrollbar, but when the notes of the treeview are larger than the screen height, no scrolling is activated.

Ronald
  • 1,990
  • 6
  • 24
  • 39

6 Answers6

47

The TreeView control itself includes a ScrollViewer in its template. You should be able to just use a TreeView inside an appropriate host (not a StackPanel!).

Kent Boogaart
  • 175,602
  • 35
  • 392
  • 393
  • 9
    What exactly is an appropriate host? My TreeView DOES lay inside a StackPanel though. – Ronald Aug 24 '09 at 11:00
  • I think he's talking about the ScrollViewer not being the appropiate host, as for the "not a StackPanel!" part, I don't really get it, there should be no difference in the TreeView's behavior if you use it in a Grid, StackPanel, WrapPanel, UniformGrid, etc. – Carlo Aug 24 '09 at 18:10
  • 34
    A `StackPanel` gives its content whatever width (when orientation is horizontal) or height (when orientation is vertical) its children ask for. Thus, if you put a `TreeView` (or `ListBox`, or whatever) in a `StackPanel`, then the `TreeView` will think that it has sufficient height to display all items without the need for a `ScrollBar`. In fact, the `TreeView` will be cut off because you'll run out of screen real-estate. Use a `Grid` instead. – Kent Boogaart Jul 20 '10 at 22:11
  • I was able to solve this issue in my own work solely due to Kent Boogaart's comment, +1. Just wrap your tree view in grid brackets. – mwjohnson Aug 15 '13 at 09:25
  • 1
    Even if you wrap a TreeView in a ScrollViewer, and set the Width and Height of the ScrollViewer, the StackPanel still messes up the scrolling. I would have thought the Width/Height constraint on the child would satisfy the StackPanel. But it does not. Avoid TreeViews under StackPanels like the plague. As others have verified, a simple Grid with the Width/Height set and a TreeView under it scrolls correctly. – Gabe Halsmer Nov 26 '13 at 21:16
  • Although this works, one only needs to set the MaxWidth for the grid, and the scrollbar will appear dynamically – James Igoe Jul 14 '20 at 14:49
  • @KentBoogaart I just made it work with a `StackPanel`. I just needed to set a `Height` for my TreeView and now the ScrollBar appears like expected. Did something happen in the last decade to this feature, that it now works with StackPanel? – Stan1k Mar 18 '21 at 15:00
  • I had the same problem with the TreeView inside a StackPanel. I just replaced the StackPanel with a Grid and it worked. Setting a fixed Height was not an option for me because the complete window should be resizable dynamically. – chrmue Jun 30 '22 at 16:31
10

The TreeView contains a ScrollViewer, but as @Carlo said, the TreeView or its container needs to have a height. Alternatively, the TreeView should be hosted in a container that doesn't give infinite height to its children (i.e. a StackPanel which I think was what @Kent was meaning). So place it inside a Grid, no need to give the Grid or the TreeView an explicit height and you should get the scrollbars.

drjeks
  • 101
  • 1
  • 3
  • I had the same problem with the TreeView inside a StackPanel. I just replaced the StackPanel with a Grid and it worked. Setting a fixed Height was not an option for me because the complete window should be resizable dynamically. – chrmue Jun 30 '22 at 16:32
4

Do you have a height explicitly set on your window? If you want to see the scrollbar something must define the height of the TreeView or its container, otherwise it won't know when it needs to show the scrollbar.

Example:

<Window x:Class="StackOverflowTests.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" x:Name="window1" Height="300" Width="300">
    <Grid>
        <TreeView  Name="treeView1" Height="150" VerticalAlignment="Top">
            <TreeViewItem Header="Root" IsExpanded="True">
                <TreeViewItem Header="Item 1"></TreeViewItem>
                <TreeViewItem Header="Item 2"></TreeViewItem>
                <TreeViewItem Header="Item 3"></TreeViewItem>
                <TreeViewItem Header="Item 4"></TreeViewItem>
                <TreeViewItem Header="Item 5"></TreeViewItem>
                <TreeViewItem Header="Item 6"></TreeViewItem>
                <TreeViewItem Header="Item 7"></TreeViewItem>
                <TreeViewItem Header="Item 8"></TreeViewItem>
                <TreeViewItem Header="Item 9"></TreeViewItem>
                <TreeViewItem Header="Item 10"></TreeViewItem>
                <TreeViewItem Header="Item 11"></TreeViewItem>
                <TreeViewItem Header="Item 12"></TreeViewItem>
                <TreeViewItem Header="Item 13"></TreeViewItem>
                <TreeViewItem Header="Item 14"></TreeViewItem>
                <TreeViewItem Header="Item 15"></TreeViewItem>
                <TreeViewItem Header="Item 16"></TreeViewItem>
                <TreeViewItem Header="Item 17"></TreeViewItem>
                <TreeViewItem Header="Item 18"></TreeViewItem>
                <TreeViewItem Header="Item 19"></TreeViewItem>
                <TreeViewItem Header="Item 20"></TreeViewItem>
                <TreeViewItem Header="Item 21"></TreeViewItem>
                <TreeViewItem Header="Item 22"></TreeViewItem>
                <TreeViewItem Header="Item 23"></TreeViewItem>
                <TreeViewItem Header="Item 24"></TreeViewItem>
                <TreeViewItem Header="Item 24"></TreeViewItem>
            </TreeViewItem>
        </TreeView>
    </Grid>
</Window>
Carlo
  • 25,602
  • 32
  • 128
  • 176
  • 1
    Sorry, tried to add heights to the treeview and its container but without success – Ronald Aug 24 '09 at 11:01
  • Hmmm I did get the scroll bar, I'll add my example to my answer, see if it works, basically the window's height is set to 300 and the treeview's height is set to 150, so the treeview is half as tall as the window and it gets a scroll bar if its items overflow the height. – Carlo Aug 24 '09 at 14:37
2

It's a simply a matter of giving the TreeView a fixed Height and Width. And maybe put it in a border. Also, i do have a MaxWidth on my items' content. For example the following is in my main window under two stack panels and it works (I'm using MahApps Metro controls):

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Border BorderThickness="2" BorderBrush="DarkGoldenrod" Margin="4">
        <TreeView x:Name="TreeView" Width="400" Height="800" Focusable="True" VerticalAlignment="Top">
        </TreeView>            
    </Border>
</StackPanel>
Rubarb
  • 41
  • 2
0

Instead of Tree View you can use Expander. Which can scoll With Scroll view properly this work same as Treeview.

Dipesh Bagdi
  • 1
-1

How about just setting the height and width to a fixed amount? I know this might not be the answer for everyone.

I will get there some day
  • 11
  • 1
  • 1
    As far as I can tell, this does not answer the question *at all*. The height and width of *what* should be fixed? And how would that enable the scroll bars? – Hermann Döppes Jan 06 '17 at 01:41
  • Please read the question again. "I do see an 'disabled' scrollbar, but when the notes of the treeview are larger than the screen height, no scrolling is activated." setting the height and width on treeview. This is actually mentioned in the post above mine. If I recall exactly, once the height and width is fixed on the treeview, the scrollbars appear when the main window is resized. – I will get there some day Nov 04 '17 at 00:35