ScrollViewer not working with MouseWheel on GroupBox

Question

I am trying to get a scrollviewer to work in a custom styled groupbox. This is the style for the groupbox:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!--Set default style of groupbox-->
<Style TargetType="GroupBox">
    <Setter Property="Margin" Value="0, 10, 0, 0"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GroupBox">
                <Border CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource ContentBackgroundBrush}">
                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                        <StackPanel Orientation="Vertical" CanVerticallyScroll="True">
                            <Label Content="{TemplateBinding Header}" Margin="5,5,0,0" Style="{StaticResource SmallTitle}"></Label>
                            <ContentPresenter Margin="10, 5, 10, 10" RecognizesAccessKey="True" x:Name="CtlGroupboxPresenter" />
                        </StackPanel>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The scrollbar shows up, but I can't scroll using the mouse wheel. It works however when my mouse if over the vertical scrollbar. It seems like a tracking issue.

I saw some guys on SO that suggest adding some code to code behind to get it working, but as this is in a resource dictionary I have no place where I could put it...

Does anyone know what the issue is?

Here is an image of the wpf form:

XAML inside the groupbox:

<UserControl x:Class="Sun.Plasma.Controls.ViewNews"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<DockPanel LastChildFill="True">
    <Label DockPanel.Dock="Top" Style="{StaticResource LblTitle}" FontWeight="Bold" FontSize="24" >Latest SUN news &amp; announcements</Label>

    <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
        <StackPanel Orientation="Vertical" Name="CtlLoadingNews">
            <Label Style="{StaticResource LblContent}">Loading content from server...</Label>
            <ProgressBar IsIndeterminate="True" Height="30" />
        </StackPanel>
        <ListView Background="Transparent" DockPanel.Dock="Bottom" ItemsSource="{Binding NewsFeeds}" BorderBrush="Transparent" Name="CtlNews" Visibility="Collapsed">

            <!-- Defining these resources prevents the items from appearing as selectable -->
            <ListView.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
            </ListView.Resources>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Margin="0 0 0 20">
                        <Label Style="{StaticResource LblTitle}" FontWeight="Bold" Content="{Binding Title}" />
                        <StackPanel Orientation="Horizontal">
                            <Label Style="{StaticResource LblFooter}" Content="{Binding PublishDate}" />
                            <Label Style="{StaticResource LblFooter}">By</Label>
                            <Label Style="{StaticResource LblFooter}" Content="{Binding Authors[0]}" />
                            <Label Style="{StaticResource LblFooter}">
                                <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="{Binding Source}">Read entry</Hyperlink>
                            </Label>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</DockPanel>

Answer 1

inspired by @Domysee, but my event was not fired by the scrollviewer, probably because of different layout

XAML:

<GroupBox Header="Services">
<Grid PreviewMouseWheel="OnScroll">
    <ScrollViewer x:Name="_scrollViewer" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <ItemsControl ItemsSource="{Binding Services}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="2" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </ScrollViewer>

            <Button Width="50"
                    HorizontalAlignment="Left"
                    Command="{Binding NewServiceCommand}"
                    Content="+" />
        </StackPanel>
    </ScrollViewer>
    <Grid 
         <!-- overlay goes here -->
    </Grid>
</Grid>
</GroupBox>

code behind:

private void OnScroll(object sender, MouseWheelEventArgs e)
{
    double change = e.Delta;
    double currentPosition = _scrollViewer.VerticalOffset;

    _scrollViewer.ScrollToVerticalOffset(currentPosition - change);
}

Answer 2

The problem is that the ListView in the contents of the GroupBox stops the MouseWheel event from bubbling up to the ScrollViewer. I found a hacky solution:

You handle the PreviewMouseWheel event on the inner ListView and raise the MouseWheel event directly on the scroll viewer.

private void ListView_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = true;
        var eventArg = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
        eventArg.RoutedEvent = UIElement.MouseWheelEvent;
        eventArg.Source = sender;
        //navigate to the containing scrollbar and raise the MouseWheel event
        (((sender as ListView).Parent as GroupBox).Content as ListView).RaiseEvent(eventArg);
    }
}

Again, this is not a solution I particularly like, because it is dependent on the layout of the GroupBox.

A second, slightly better way is to add a style to the resources of the GroupBox in which you add a handler to the PreviewMouseWheel event:

<GroupBox Header="test">
    <GroupBox.Resources>
        <Style TargetType="ScrollViewer">
            <EventSetter Event="PreviewMouseWheel" Handler="ScrollViewer_PreviewMouseWheel" />
        </Style>
    </GroupBox.Resources>
    <!-- your contents -->
</GroupBox>

The event handler then does the scrolling:

private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    var scrollViewer = sender as ScrollViewer;
    double change = e.Delta;
    double currentPosition = scrollViewer.VerticalOffset;

    scrollViewer.ScrollToVerticalOffset(currentPosition - change);
}