Mouse wheel doesn't work properly with ScrollViwer

Question

I have a problem with scrolling using mouse wheel in a scroll viewer. It seems that if the mouse cursor is over an area of the scrollbar that doesn't contain any ui element, scrolling doesn't work.

In the attached example I fill the scroll viewer with rectangle that have large margins. When the mouse cursor is over a rectangle scrolling works, but when it's over the margin, no scrolling occurs.

Any idea how to fix this?

XAML:

<UserControl x:Class="SilverlightApplication229.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <StackPanel x:Name="MyPanel" />
        </ScrollViewer>

    </Grid>
</UserControl>

Code:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        for (int i = 0; i < 100; i++)
        {
            Rectangle rect = new Rectangle { Width = 100, Height = 100, Fill = new SolidColorBrush(Colors.Red), Margin = new Thickness(50) };
            MyPanel.Children.Add(rect);
        }
    }
}

Thanks!

Going off of an error I recently had, the solution may be to add a background to the scrollviewer. With a transparent background Silverlight might think that the mouse is on the background and not the scrollviewer. I am not certain of this answer but it would be fast and easy to test. — StephenT

StephenT StephenT · Accepted Answer · 2011-08-05T18:56:05

Going off of an error I recently had, the solution may be to add a background to the scrollviewer. With a transparent background Silverlight might think that the mouse is on the background and not the scrollviewer. I am not certain of this answer but it would be fast and easy to test.

The reason this is probably the case is (I think) because the container pretty much has to be square. So if you have two things overlapping eachother where the containers overlap but the contents don't, this will permit you to interact with the one that you are actually over, and not the one on top.

Mouse wheel doesn't work properly with ScrollViwer

1 Answers