How to get manipulation events to work on an element that contains a ScrollViewer child

Question

Say I have the following XAML:

<Grid ManipulationMode="TranslateY" ManipulationDelta="Grid_ManipulationDelta">
    <ScrollViewer HorizontalScrollMode="Enabled" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden">
        <StackPanel Orientation="Horizontal">
            <Rectangle Width="100" Height="100" Fill="Red" />
            <Rectangle Width="100" Height="100" Fill="Blue" />
            <Rectangle Width="100" Height="100" Fill="Red" />
            <Rectangle Width="100" Height="100" Fill="Blue" />
            <Rectangle Width="100" Height="100" Fill="Red" />
            <Rectangle Width="100" Height="100" Fill="Blue" />
            <Rectangle Width="100" Height="100" Fill="Red" />
            <Rectangle Width="100" Height="100" Fill="Blue" />
        </StackPanel>
    </ScrollViewer>
</Grid>

(The StackPanel is just arbitrary content.)

I would like the Grid to handle TranslateY manipulation events only, and the ScrollViewer to scroll horizontally only; however the ScrollViewer takes precedence even if the manipulation was vertical and not horizontal. The Grid never receives ManipulationDelta events, except if I disable scrolling on the ScrollViewer, which obviously isn't what I would like.

Does this have something to do with the ScrollViewer's "magical" behavior of direct manipulation events? I've tried different combinations of "rails" settings too (i.e. setting Grid's ManipulationMode to TranslateRailsY and setting IsHorizontalRailEnabled to true on the ScrollViewer) but it still doesn't work.

Justin XL Justin XL · Accepted Answer · 2016-01-07T22:26:09

You are right, parent elements of ScrollViewer won't receive the manipulation events as they are blocked by the direct manipulation events of the ScrollViewer.

However, elements within the ScrollViewer will be able to receive them as long as their ManipulationMode includes the System mode.

In your particular case, you will want to monitor the ManipulationDelta event on your StackPanel and have its ManipulationMode set to TranslateY,System.

Also don't forget to give your StackPanel a Transparent background for receiving events.

<StackPanel Background="Transparent" ManipulationMode="TranslateY,System" ManipulationDelta="StackPanel_ManipulationDelta">

How to get manipulation events to work on an element that contains a ScrollViewer child

2 Answers