CODEWITHSUNDEEP
c#eventswebviewwin-universal-appwindows-10
Alias Varghese
Alias Varghese

Reputation: 2172

Need to get mouse events inside webview Win 10 UWP

I am creating a win 10 UWP application.

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

I have added a webview in it and I need to get the mouse right click and drag drop events for the webview element. But now it is taking the events for the browser. How I can handle the input events in the webview

Upvotes: 3

Views: 2760

Answers (1)

Alexej Sommer
Alexej Sommer

Reputation: 2679

Sample of how to drag element from XAML to WebView. It's not complete solution, but might be helpful for 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 is to check is mouse over paragraph element in your JavaScript code.

If you want to check events inside JavaScript code you can add NavigationCompleted="WebViewElm_NavigationCompleted" and ScriptNotify="WebViewWithJSInjection_ScriptNotify" attributes to your WebView and C# events 

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
    }

In JavaScript add functions:

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

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

Upvotes: 1

Related Questions