How to route touch events to separate controls UWP C#

Question

I am facing a major problem for custom touch event handling. The goal is to route the touch event to different controls, depending on how many fingers are used.

For example: We have a scrollview with many webviews arranged in it. The zoomfactor is set to present one webview to fullscreen.

Currently I am using the pointer pressed / released functions like this, to configure the controls, so the event will be catched by the right one:

int pointerCount = 0;

private void ScrollView_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        try
        {
            pointerCount++;
            if (pointerCount > 3)
                pointerCount = 0;

            switch (pointerCount)
            {
                case 1:
                    // I don't do anything, so it goes to the webview anyway
                    break;
                case 2:
                    EnableScrolling();
                    break;
                case 3:
                    ZoomInOut();
                    break;
                default:
                    return;
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex.Message);
        }
    }

private void EnableScrolling()
    {
        ScrollViewer.ZoomMode = ZoomMode.Enabled;
        ScrollViewer.VerticalScrollMode = ScrollMode.Enabled;
        ScrollViewer.HorizontalScrollMode = ScrollMode.Enabled;
    }

• 1-finger events should go to the webview // this works
• 2-finger events should go to the ScrollView // this is not working, because the webview grabs the touch event and will not release it again
• 3-finger events should zoom out // this works

The PointerPressed is always called, but the PointerReleased is not called when the PointerPressed was on the webview.

This also results in the effect of not decreasing the pointerCount, so it is possible to do a 1-finger tap 3 times and it results in the 3-finger event and zooms out, that should not happen.

Hopefully you can see the problem and help to resolve it. If you think this is a way too wrong approach, feel free to show an alternative that works out better.

Answer 1

Well, I couldn't find a proper solution, but I was able to remove the unwanted side effect with upcounting the pointers event if they were released.

private void ScrollViewer_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        pointerCount = 0;
    }

So the right direction handling is working fine now, but I still can't do something like:

currentWebView.CapturePointer(e.Pointer);

Because it won't root the pointerEvent into it's content, it will call the pointer events of the WebView, but it won't root it into it's html & js content.

I also tried to use

.... wb.ManipulationStarted += Wb_ManipulationStarted; ....

    private void Wb_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
    {
        // something here
    }

but this also will not arrive in the content.

Any ideas for another approach?

Answer 2

I figured out how to handle that, and it is so simple that I could cry...

I just added this line of code to tell the webviews js that there was a event...

await webView.InvokeScriptAsync("eval", new string[] { "document.elementFromPoint(" + pointX + ", " + pointY + ").click();" });

And the webview handles the rest of it. So there is no custom invoke as I was worried about, it's just the standard function invoked, that is always invoked when a touch/click is performed.