I want to open the web page by dragging and dropping the web link into UWP's WebView.

Asked 2 years ago, Updated 2 years ago, 115 views

I'd like to drag and drop the web link into UWP's WebView to display the web page.

I implemented it with the following code, but the first time I succeeded, but after the web page appears, I will no longer accept drugs.

I would like to accept drugs and drops after the second time, but what should I do?

<Page
    x —Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns: x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns: mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc —Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <WebView x: Name="WebViewControl" AllowDrop="True" DragOver="WebView_DragOver" Drop="WebView_Drop"/>
    </Grid>

</Page>
using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace test
{
    public sold partial class MainPage:Page 
    {
        publicMainPage()
        {
            This.InitializeComponent();
        }

        private void WebView_DragOver(object sender, DragEventArgse)
        {
            if(e.DataView.Contains(StandardDataFormats.WebLink))
            {
                e.AcceptedOperation=DataPackageOperation.Link;
                e.Handled = true;
            }
        }

        private async void WebView_Drop(object sender, DragEventArgse)
        {
            if(e.DataView.Contains(StandardDataFormats.WebLink))
            {
                varuri=awaite.DataView.GetWebLinkAsync();
                this.WebViewControl.Source=uri;
                e.Handled = true;
            }
        }
    }
}

Target: UWP (Windows 10, version 1809)
Development Environment: Visual Studio 2017

(2019-02-03)

WebView Class|Remarks stated:

Asindicated in the Events table, WebView does not support most of the
user input events inherited from UIElement, such as KeyDown, KeyUp,
and PointerPressed.A common workaround is to use InvokeScriptAsync
with the JavaScript event function to use the HTML event handlers, and
to use window.external.notify from the HTML event handler to notify
The application using WebView.ScriptNotify.

I can read that there is a way to use the event by adding JavaScript for user input, but is drag & drop also possible in this way?
I have little knowledge of JavaScript, so I would appreciate it if you could give me an example.

javascript c# uwp

2022-09-29 22:12

1 Answers

As long as you build for Windows 10 and run it on Windows 10, the behavior of your question is considered a specification.
The WebView class description states that Windows 10 will run on the Edge engine.

WebView Class|Remarks

In apps compiled for Windows 10, WebView uses the Microsoft Edge rendering engine to display HTML content.In apps compiled for Windows 8 or Windows 8.1, WebView uses Internet Explorer 11 in document mode.

If you drag and drop while viewing a web page in an Edge browser, a no-parking mark will appear except for search input fields, bookmark bars, etc., and it will not work.

On the other hand, if you do the same thing in your Internet Explorer 11, Chrome, Firefox browser, you will see the page you dragged and dropped as you expected.

The behavior of your question matches the behavior of the Edge browser above.It's easy to try, so please check it out.
Perhaps this cannot be changed by the operation/operation of the WebView control itself?

You may be able to change your browser's own advanced settings or WebView control properties.

An alternative is to place some control, such as buttons or labels/text boxes, in a separate (or, if possible, transparent and overlapping) area from the WebView control, and indirectly rewrite the WebView control Uri to make it look like it supports drag and drop.
For example, change the grid part of xaml as follows:
In Canvas.ZIndex, specify front or back, or transparency in Opacity.

<Grid>
    <WebView Canvas.ZIndex="1" x:Name="WebViewControl" AllowDrop="True" DragOver="WebView_DragOver" Drop="WebView_Drop" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
    <Button Canvas.ZIndex="2"Opacity="0.01" x:Name="ButtonControl" AllowDrop="True" DragOver="WebView_DragOver" Drop="WebView_Drop" HorizontalAlignment="Stretch"VerticalAlignment=";"
</Grid>

However, if you overlap controls, you should be careful because links to pages displayed in WebView and parts displayed/handled by HTML/CSS will not work.All mouse and touch/keyboard movements/notifications must be captured and notified to the WebView controls.

By the way, there is talk of moving Edge to Chromium base, so it seems that there will be a WebView that may eventually be similar to Chrome.I don't know when yet.
Chromium-based new "Microsoft Edge" enables Chrome extensions - EdgeHTML and ChakraCore support will continue

Existing UWP apps (including store PWA) will still be able to use EdgeHTML/Chakra.Provide a new WebView based on a new rendering engine.

add
I searched JavaScript and found some good ones.
However, I haven't checked it myself, so please try it.

Need to get mouse events inside webview Win10UWP

How to intercept JavaScript alert in WebView in universal Windows apps

How to interoperate JS with native in WebView of Universal Windows Platform (UWP)

JavaScript HTML5drag and drop not working in an embedded WebView

Tried using the WebView control in the UWP app.
Creating your own browser with HTML and JavaScript
Blending apps and sites with the HTML x-ms-webview

More
After some research, it seems that the main focus of JavaScript articles is HTML/JavaScript, and C# has gone somewhere.Even for WebView users, if you move it a little, it will not work due to JavaScript permission errors.Wouldn't it take a long time to deal with it?

There are two short-term options.

  • A text box that makes the window look like an address/search bar and a WebView are divided and not overlapped.Drag and drop should be handled on the text box side.
  • I'm not sure if it's possible, but I'm going to rebuild WinForms/WPF in the .NET Core 3.0 Desktop Pack, and I'm going to override the WndProc and customize the window message processing to make it look like I've been able to drag and drop in WebView.

XAML Island (preview) using UWP controls such as WPF and WinForms
Getting Started with XAML Islands:Hosting a UWP Control in WPF and WinForms Apps

Open Source WPF/WinForms ~ Microsoft Announces ".NET Core 3.0" Preview 1
Try WPF on.NET Core (preview version)


2022-09-29 22:12

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.