Ignore horizontal mouse scrolling with nested ScrollViewer

2
votes

I have a ScrollViewer around a Grid to vertically scroll it's content.

<ScrollViewer>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    ...
    </Grid>
</ScrollViewer>

Inside of this Grid i have another Scrollviewer with horizontal content.

<Grid>
    <ScrollViewer Name="ScrollViewer" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden">
    ...
    </ScrollViewer>
    <Button Name="ButtonRight" HorizontalAlignment="Right" VerticalAlignment="Stretch" Tapped="ButtonRight_Tapped" />
    <Button Name="ButtonLeft" HorizontalAlignment="Left" VerticalAlignment="Stretch" Tapped="ButtonLeft_Tapped" />
<Grid>

The HorizontalScrollMode is disabled and HorizontalScrollBarVisibility is hidden because with mouse input, i want to scroll the content with the left/right buttons. The HorizontalScrollMode is disabled to prevent horizontal scrolling when the mouse is inside the ScrollViewer.

private void ButtonRight_Tapped(object sender, TappedRoutedEventArgs e)
{  
    ScrollViewer.ChangeView(ScrollViewer.HorizontalOffset + ScrollViewer.ActualWidth, 0, 1);
}

With this configuration i can scroll the page vertically even when the mouse is inside the horizontal ScrollViewer. Here is an image to give you an idea: enter image description here

The problem is with touch. How can i still scroll horizontally when the user is using a touch device? When i enable HorizontalScrollMode touch works as desired, but with a mouse it scrolls horizontally which i try to prevent.

Is there a way to ignore the horizontal scrolling with nested ScrollViewers?

1
xamluwp
Sounds like a job for IsHorizontalScrollChainingEnabled – Chris W.
How is IsHorizontalScrollChainingEnabled supposed to work? When i set it to false on the child scrollviewer there is no difference, horizontal scrolling is still enabled. – Thomas Schneiter
Did you use it as an attached property? – Chris W.
No, i just added it to the child ScrollViewer like <ScrollViewer IsHorizontalScrollChainingEnabled="False" ...>. On what element should i put the attached property? – Thomas Schneiter
The docs are always a good place to start, the child. If I have time later I'll make a sample and test. – Chris W.

1 Answers

0
votes

I found a pretty simple solution to solve my problem.

I've added a PointerEntered to my nested horizontal ScrollViewer

<ScrollViewer Name="ScrollViewer" PointerEntered="ScrollViewerImages_PointerEntered" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden">
...
</ScrollViewer>

and enabled the HorizontalScrollMode when the PointerDeviceType is Touch.

private void ScrollViewerImages_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == PointerDeviceType.Touch)
        ScrollViewerImages.HorizontalScrollMode = ScrollMode.Enabled;
    else
        ScrollViewerImages.HorizontalScrollMode = ScrollMode.Disabled;
}