Can not scroll with scrollwheel

Question

I have a problem with the scrollviewer.

First of all here's my code:

  <GroupBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Header="Pictures"
              Margin="5,2,2,2">
        <ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto" Margin="2">
            <ListView ItemsSource="{Binding ImageBoxes, UpdateSourceTrigger=PropertyChanged}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" ScrollViewer.CanContentScroll="True"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}">
                        <Style.Resources>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Red"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                        </Style.Resources>
                        <Setter Property="BorderBrush" Value="Orange"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="Margin" Value="2"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="BorderBrush" Value="Blue"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
        </ScrollViewer>
    </GroupBox>

The ItemsSouce of the ListView is bound to an ObservableCollection in the model. All items are displayed correctly. I only want to scroll up and down, and this works fine.

My Problem is, that I only can scroll by moving the scrollbar up or down with the cursor. the mouse-wheel doesn't work. I need this to work.

What is the problem here?

Answer 1

This is happening because ListView already has a built-in ScrollViewer. and the desired mouse scrolling is lost when you wrap the ListView in the redundant ScrollViewer.

You have two options I see, the first (simplest) would be to just remove theScrollViewer from your XAML.

<GroupBox>
    <ListView>
        ...
    </ListView>
</GroupBox>

A second alternative which seems unnecessarily more complicated than the first but nonetheless solves the problem of vertical mouse wheel scrolling is to override the ListView's ControlTemplate and specify a template that does not include a ScrollViewer. This way the ScrollViewer you have in your main XAML will work.

It is similar to the answer here. This would allow you to keep your scrollviewer out of the template and in your XAML (not clear to me however that you need to do this). The XAML below is abbreviated to only show the relevant bit and you can for instance see the full default ListView Style via right-click on the ListView in Visual Studio designer and Edit Template (assuming you are using a fairly recent version of VS):

<Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
   ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListView}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True">

                    <!-- REMOVE THE DEFAULT SCROLLVIEWER HERE BUT KEEP THE ITEMSPRESENTER... -->
                    <!-- <ScrollViewer Focusable="False" Padding="{TemplateBinding Padding}"> -->
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    <!-- </ScrollViewer>-->

                </Border>
                <ControlTemplate.Triggers>
                  ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then your main XAML structure can remain the same.

<GroupBox>
    <ScrollViewer>
        <ListView Style="{StaticResource ListViewStyle1}" >
           ...
        </ListView>
    </ScrollViewer>
</GroupBox>