How can I make a Windows 8 Metro scrollviewer respond to mousewheel?

Question

I'm currently writing an app for Windows 8 using Metro and C#. In my app I use a combination of scrollviewer and gridview to show my data. My problem is however, how can I make it scrollable with a mouse wheel?

In my searching I found MouseWheelParameters located in System.Windows.Input, but when I try to use the get_pageTranslation, it gives an error stating I can't explicitly use the get method.

Answer 1

The ScrollViewer in WinRT does work out of the box with the mouse wheel. However, in your scenario there are really two ScrollViewers, the one you created and the one inside the GridView template. These two conflict.

To solve this problem, I removed the ScrollViewer from the GridView template as follows:

<GridView.Template>
    <ControlTemplate>
        <ItemsPresenter />
    </ControlTemplate>
</GridView.Template>

This seems to work, but it may have other unwanted side effects...

Answer 2

There are default styles for unidirectional scrolling in a ScrollViewer

<Style x:Key="HorizontalScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
</Style>

<Style x:Key="VerticalScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
</Style>

Use these styles to scroll with the mouse wheel. You may need to click to give focus to the ScrollViewer so it will move.

<ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}">
    <StackPanel ... />
</ScrollViewer>

Answer 3

The "get_pageTranslation" is actually the "PageTranslation" property on the MouseWheelParameters, you access it by saying:

wheelParameters.PageTranslation

this:

get_PageTranslation()

is the name of the method which implements the PageTranslation property, but it is not accessible from C# or C++ applications.