How can I make scrollviewer for Windows 8 Metro respond to the mouse wheel?

Question

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

In my search, I found MouseWheelParameters located in System.Windows.Input, but when I try to use get_pageTranslation, it gives an error stating that I cannot explicitly use the get method.

Answer 1

"get_pageTranslation" is actually a " PageTranslation " on MouseWheelParameters, you access it by saying:

wheelParameters.PageTranslation 

 get_PageTranslation() 

is the name of a method that implements the PageTranslation property, but is not available from C # or C ++ applications.

Answer 2

ScrollViewer in WinRT works out of the box with the mouse wheel. However, there are really two ScrollViewers in your script, the one you created and the one inside the GridView template. These are two conflicts.

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

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

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

Answer 3

There are default styles for unidirectional scrolling in 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 select ScrollViewer to move it.

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