Multiple ListBox within StackPanel Scroll issue

Question

This simple thing is driving me insane. I cannot get a ScrollViewer to work over two ListBox. The two ListBox are within a StackPanel, each ListBox is bound to an ObservableCollection. The ScrollViewer does work but only when user mouses over the scroll bar. This is what I have;

<ScrollViewer VerticalScrollBarVisibility="Auto" PanningMode="VerticalOnly" PanningRatio="2" PanningDeceleration="5">
    <StackPanel>
        <TextBlock Margin="5,5,5,0" FontSize="18" FontWeight="Bold" Text="List 1:" />
        <ListBox Name="Listbox1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Padding="2" TextAlignment="Center">
                        <Run Text="{Binding List1_ID}"  />
                        <LineBreak />
                        <Run Text="{Binding Descript1}" />
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <TextBlock Margin="5,5,5,0" FontSize="18" FontWeight="Bold" Text="List 2:"   />
        <ListBox Name="Listbox2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Padding="2" TextAlignment="Center">
                        <Run Text="{Binding List2_ID}"  />
                        <LineBreak />
                        <Run Text="{Binding Descript2}" />
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
</StackPanel>

How do I handle this? Should I be using something other then a ListBox? I need to use a ItemTemplate (the above DataTemplate is simplified for reading), is there something else I should use?

Answer 1

The issue is, is that there is a ScrollViewer inside of the ListBox template, so you need to edit the template to do that. Here's how I did it:

<Window.Resources>
    <SolidColorBrush x:Key="ListBox.Static.Background"
                     Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="ListBox.Static.Border"
                     Color="#FFABADB3" />
    <SolidColorBrush x:Key="ListBox.Disabled.Background"
                     Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="ListBox.Disabled.Border"
                     Color="#FFD9D9D9" />
    <Style x:Key="ListBoxStyle1"
           TargetType="{x:Type ListBox}">
        <Setter Property="Background"
                Value="{StaticResource ListBox.Static.Background}" />
        <Setter Property="BorderBrush"
                Value="{StaticResource ListBox.Static.Border}" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <!-- <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="true" />
        <Setter Property="ScrollViewer.PanningMode"
                Value="Both" /> -->
        <Setter Property="Stylus.IsFlicksEnabled"
                Value="False" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Padding="1"
                            SnapsToDevicePixels="true">
                        <!-- <ScrollViewer Focusable="false"
                                      Padding="{TemplateBinding Padding}"> -->
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <!-- </ScrollViewer> -->
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Background"
                                    TargetName="Bd"
                                    Value="{StaticResource ListBox.Disabled.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="Bd"
                                    Value="{StaticResource ListBox.Disabled.Border}" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping"
                                           Value="true" />
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping"
                                           Value="false" />
                            </MultiTrigger.Conditions>
                            <!-- <Setter Property="ScrollViewer.CanContentScroll"
                                    Value="false" /> -->
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

And usage:

<ScrollViewer Height="100">
    <StackPanel>
        <ListBox Style="{StaticResource ListBoxStyle1}" ... />
        <ListBox Style="{StaticResource ListBoxStyle1}" ... />
    </StackPanel>
</ScrollViewer>

Note: One you click a item in the bounds of the ScrollViewer you will then be able to scroll.