Enable Mouse Scrolling While Maintaining Ability to Touch Select Items

Question

I'm using a GridView to display a list of items. I need the ability to be able to use the mouse scroll wheel to scroll in the page where the GridView is contained. This is easily achievable by overriding the template of the GridView

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

However, I also need the items to be selectable from a touch device. This is usually done by flicking an item downwards after which it would be selected. After applying the above template override the touch selection mechanism breaks.

I went into Blend and started looking at the default template for the GridView which can be seen below

<ControlTemplate
    TargetType="GridView">
    <Border
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Background="{TemplateBinding Background}">
        <ScrollViewer
            x:Name="ScrollViewer"
            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
            IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
            IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
            TabNavigation="{TemplateBinding TabNavigation}"
            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
            <ItemsPresenter
                HeaderTemplate="{TemplateBinding HeaderTemplate}"
                Header="{TemplateBinding Header}"
                HeaderTransitions="{TemplateBinding HeaderTransitions}"
                Padding="{TemplateBinding Padding}" />
        </ScrollViewer>
    </Border>
</ControlTemplate>

If I remove the ScrollViewer or disable the horizontal scrolling part in any way then the touch selection stops working.

How can I enable both mouse scrolling and touch selection at the same time?

And just to clarify, I don't need the actions to happen simultaneously. Both just need to work separately on the same page for the same GridView.

you might be going about this the wrong way in that you are changing the control template. Does the following link solve what you are trying to do? stackoverflow.com/questions/13470083/… — chue x
Nope, it seems that horizontal scrolling and touch drag selection are mutually exclusive so far. — Kasper Holdum
Sorry, I haven't had a mouse to test this (been on the road). Now I do. I can scroll with the wheel and drag select in my grid using the settings from my link above. Any chance you are using the VS simulator to do your testing? If so, you have to first left click on your app inside the simulator before it will register the scroll wheel. Outside the simulator, you don't have to do this. — chue x
It works if it's the only element in the page. I have a lot of other content, so I need a ScrollViewer around all of the content. Once the GridView is surrounded by another SV'er it stops responding to the mouse wheel. This didn't work: pastebin.com/jQNR88PA — Kasper Holdum

chue x chue x · Accepted Answer · 2012-12-19T23:03:04

I don't think your scenario is possible. The SV with the grid inside it is the problem. The MSDN docs say that the GridView prevents the PointerWheelChanged event from bubbling up:

See the GridView docs:

Caution The PointerWheelChanged event does not bubble up from a GridView. This means that a control that has a GridView inside of it does not receive mouse wheel change messages if the pointer is over the GridView. For example, if you put a GridView inside of a ScrollViewer, you can't scroll the ScrollViewer with the mouse wheel when the pointer is over the GridView.

Enable Mouse Scrolling While Maintaining Ability to Touch Select Items

1 Answers