How can I get the mouse wheel to work correctly with the Silverlight 4 ScrollViewer

Question

When I use the following xaml in Silverlight 4, the ScrollViewer will not recognize the mouse wheel unless I click once on the scroll bar thumb, and keep the mouse over the scroll bar, while turning the mouse wheel.

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer>
        <StackPanel Name="stackPanel1">
            <Button Content="Button 1" Width="150" />
            <Button Content="Button 2" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 3" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 4" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 5" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 6" Width="150" Margin="0,20,0,0" />
            <Button Content="Button 7" Width="150" Margin="0,20,0,0" />
        </StackPanel>
    </ScrollViewer>
</Grid>

Has anyone else experience this, and is there any work around?

Answer 1

Install the Silverlight toolkit from here http://silverlight.codeplex.com/

Add reference to the System.Windows.Controls.Navigation and System.Windows.Controls.Toolkit dlls

Modify your code to add the navigation namespace to the UserControl tag as shown below

<UserControl x:Class="SilverlightApplication1.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"
      xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="400">

Wrap your StackPanel in frame tag like so

<ScrollViewer x:Name="SV"  >
        <navigation:Frame>
            <StackPanel Name="stackPanel1">
            <Button Content="Button 1" Width="150" />

In the code behind, add the following lines

    public MainPage()
    {
        InitializeComponent();
        SV.SetIsMouseWheelScrollingEnabled(true);

Reference : http://diptimayapatra.wordpress.com/2009/12/08/mouse-wheel-scroll-for-scrollviewer-in-silverlight-3/

Answer 2

The resolution here seems to be set a background brush on the ScrollViewer. In my case I chose to use the Transparent brush. It seems to be related to hit testing whereby a control without a brush will never receive any mouse events.

<ScrollViewer Background="Transparent">