Listbox inside treeview is not scrollable when listbox is hovered

Question

I am trying to get a TreeView that has multiple selection. I have to build the TreeView programmatically (I assume), as I am getting the data from a Database.

My problem is shown here as I can't embed pictures yet.

The program works as intended in situation A, where I hover the TreeView - I am able to scroll up and down. That is however not possible in situation B, where I'm hovering the ListBox.

The XAML for the example is as follows:

<Window x:Class="WPF_test_1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="150" Width="230">

    <Grid>
        <TreeView x:Name="treeView" Margin="10,10,10,9.8"/>
    </Grid>
</Window>

And the C#:

using System.Windows;
using System.Windows.Controls;

namespace WPF_test_1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ListBox lb = new ListBox();
            lb.Items.Add("Test with a long name");
            lb.Items.Add("Test");
            lb.Items.Add("Test");
            lb.Items.Add("Test");
            lb.Items.Add("Test");
            lb.Items.Add("Test");

            lb.SelectionMode = SelectionMode.Extended;
            lb.BorderThickness = new Thickness(0);

            TreeViewItem lv = new TreeViewItem();
            lv.Header = "TEST";
            lv.Items.Add(lb);
            treeView.Items.Add(lv);
        }
    }
}

I choose to add a ListBox to the TreeViewItem, as that enables the multiple selection without having to implement an extension to the TreeView - but as I said, it does not allow me to scroll properly.

Does anyone know a workaround, or what the problem might be?

Thank you in advance.

Answer 1

Now that I've actually got it through my skull what the actual problem is, I found a way to disable scrolling on a ListBox.

Here's a pure-XAML quickie demonstrating the technique on a group of listboxes as children of TreeViewItems.

In pure code-behind, generating a template is a bit of a hassle. I would suggest creating the style in XAML, giving it x:Key="NonScrollingListBoxStyle", and loading it with FindResource("NonScrollingListBoxStyle") in your codebehind. Then you could manually apply it to each ListBox. Here I've made it an implicit style, just to save typing.

<TreeView Height="120">
    <TreeView.Resources>
        <Style TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <ItemsPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TreeView.Resources>
    <TreeViewItem IsExpanded="True" Header="Item 1">
        <ListBox>
            <TextBlock>Item A</TextBlock>
            <TextBlock>Item B</TextBlock>
            <TextBlock>Item C</TextBlock>
            <TextBlock>Item D</TextBlock>
            <TextBlock>Item E</TextBlock>
        </ListBox>
    </TreeViewItem>
    <TreeViewItem IsExpanded="True" Header="Item 2">
        <ListBox>
            <TextBlock>Item A</TextBlock>
            <TextBlock>Item B</TextBlock>
            <TextBlock>Item C</TextBlock>
            <TextBlock>Item D</TextBlock>
            <TextBlock>Item E</TextBlock>
        </ListBox>
    </TreeViewItem>
    <TreeViewItem IsExpanded="True" Header="Item 3">
        <ListBox>
            <TextBlock>Item A</TextBlock>
            <TextBlock>Item B</TextBlock>
            <TextBlock>Item C</TextBlock>
            <TextBlock>Item D</TextBlock>
            <TextBlock>Item E</TextBlock>
        </ListBox>
    </TreeViewItem>
    <TreeViewItem IsExpanded="True" Header="Item 4">
        <ListBox>
            <TextBlock>Item A</TextBlock>
            <TextBlock>Item B</TextBlock>
            <TextBlock>Item C</TextBlock>
            <TextBlock>Item D</TextBlock>
            <TextBlock>Item E</TextBlock>
        </ListBox>
    </TreeViewItem>
</TreeView>