Manipulations on ListView's parent

Question

I want to let the user swipe on control that contains ListView. Here is the example code:

<Border ManipulationMode="All"
        ManipulationDelta="UIElement_OnManipulationDelta">
    <ListView>
        <ListView.Items>
            <x:Int32>1</x:Int32>
            <x:Int32>1</x:Int32>
            <x:Int32>1</x:Int32>
            <x:Int32>1</x:Int32>
            <x:Int32>1</x:Int32>
            <x:Int32>1</x:Int32>
            <x:Int32>1</x:Int32>
        </ListView.Items>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="200" Height="50"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Border>

For some reason ManipulationDelta event is not raising on a phone. How can i solve this?

Tested your code, this problem only occur when testing on mobile emulator or simulator or device phone, not on PC, or local machine. Am i right? — Grace Feng, Mar 10 '16 at 06:50

score 1 · Accepted Answer · edited May 23 '17 at 10:28

At the very beginning I want to say, if there is no Margin on the ListView or no Padding on the Border, and there is no such size limit on both elements, the ListView in this scenario will fill the whole border and catch all the event first by default.

But UIElement.ManipulationDelta event is a routed event. When you swipe on it, the ListView catches it, the meanwhile you didn't handle this event on ListView, so will this event bubble up to parent elements because it goes unhandled, then your Border as a parent elemtn can handle this event. This is why manipulations on ListView's parent can get fired on PC.

But why can't it get fired on mobile emulator? As I said, this swipe gesture is first caught by ListView, and a ListView control contains a ScrollViewer in it, this ScrollViewer will handle your swipe gesture as scrolling on mobile emulator, then won't ListView pass this event to its parent again like it on PC.

The difference between this event on PC and emulator is, the manipulation event can respond to Mouse device, but not to single finger touch. You can refer to ListView ManipulationCompleted event doesn't work on phone.

How to solve this problem? One very simple method is that you can give some space between Border and ListView like this <ListView Margin="50">, then you can catch this event outside the ListView on emulator, but this will break your original UI design. Another workaround method is like I said in that case, you can use Pointer event. Just tested it, when these events are on ListView's parent, they can still get fired on emulator.

Manipulations on ListView's parent

1 Answers1