Search code examples
silverlighttreeviewscroll

Scroll behavior of TreeView in Silverlight 4

I'm relativ new to SilverLight 4 and I'm having a problem with the behavior of the TreeView control.

I want to be able to scroll vertically inside the TreeView but the scrolling only works when i have the mouse over the items. The scrollbar is visible and it works perfectly with it but when my mouse is inside the TreeView but not on any TreeView item, the TreeView won't scroll. Is there anyway to fix this? Or if anyone knows any free or proprietary controls, I'd be happy to know.

Note: Placing the TreeView inside a ScrollingViewer works but it messes up the style of the TreeView. Also I would not like to use a ScrollViewer if possible.

Thanks

Here's the code if someone wants to try it out:

<UserControl x:Class="TreeViewScrollingTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

<Grid x:Name="LayoutRoot" Background="White">
    <sdk:TreeView x:Name="treeView1" Height="200">
        <sdk:TreeViewItem Header="Header 001">
            <TextBlock>Test 001</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 002">
            <TextBlock>Test 002</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 003">
            <TextBlock>Test 003</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 004">
            <TextBlock>Test 004</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 005">
            <TextBlock>Test 005</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 006">
            <TextBlock>Test 006</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 007">
            <TextBlock>Test 007</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 008">
            <TextBlock>Test 008</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 009">
            <TextBlock>Test 009</TextBlock>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem  Header="Header 010">
            <TextBlock>Test 010</TextBlock>
        </sdk:TreeViewItem>
    </sdk:TreeView>
</Grid>
</UserControl>
Solution

  • Using the tips from Lee Campbell's Blog-post: http://leecampbell.blogspot.ch/2009/01/horizontal-stretch-on-treeviewitems.html

    I modified the default column definitions and now the TreeViewItems stretch atleast corretly to the whole width of the TreeView. The scrolling problem also vanished now that the TreeView control realizes that my mouse cursor is over the TreeViewItems.