Need to receive mouse events inside webview Win 10 UWP

Question

Need to receive mouse events inside webview Win 10 UWP

I am building a UWP application with a win of 10.

<Grid>
<WebView x:Name="WebViewElm"/>
</Grid>

I added a webview to it, and I need to right-click and drag the drag events for the webview element. But now it accepts events for the browser. How can I handle input events in webview

+1

c # events windows-10 webview win-universal-app

Alias varghese May 11 '16 at 7:33

source share

1 answer

Alexej Sommer · Accepted Answer · 2016-05-11T18:58:45+0000

An example of how to drag an item from XAML to WebView. This is not a complete solution, but may be useful to you.

XAML:

    <StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <WebView DefaultBackgroundColor="LightGray" Source="ms-appx-web:///HTMLPage1.html" PointerReleased="WebViewElm_PointerReleased" Width="300" Height="300" x:Name="WebViewElm"></WebView>
    <TextBlock x:Name="txtZiel" DragOver="txtZiel_DragOver" PointerReleased="txtZiel_PointerReleased" >2</TextBlock>       
    </StackPanel>

C # code:

    private async void WebViewElm_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
      await WebViewElm.InvokeScriptAsync("callFromExternal", new string[] { txtZiel.Text });
    }

    private async void WebViewElm_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
    {
        await WebViewElm.InvokeScriptAsync("LoadingFinished", null);
    }

HTML:

<body>
<p id="txtClick">1</p>
</body>

JavaScript:

    function callFromExternal(somedrag) {    
        document.getElementById("txtClick").innerHTML = somedrag;
    }

The only thing you need to do is check the mouse over the paragraph element in your JavaScript code.

JavaScript, NavigationCompleted = "WebViewElm_NavigationCompleted" ScriptNotify = "WebViewWithJSInjection_ScriptNotify" WebView #

private async void WebViewElm_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
    {
        await WebViewElm.InvokeScriptAsync("LoadingFinished", null);
    }

   private void WebViewWithJSInjection_ScriptNotify(object sender, NotifyEventArgs e)
    {
       // here in e.Value you can get string with document.getElementById("txtClick").innerHTML
    }

JavaScript :

    function LoadingFinished() 
    {
      document.getElementById('txtClick').addEventListener("mousedown", callExternal);
    }

    function callExternal()
    {
      window.external.notify(document.getElementById("txtClick").innerHTML);
    }

Need to receive mouse events inside webview Win 10 UWP

More articles: