

UWPのWebViewにWebリンクをドラッグ＆ドロップしてWebページを表示させたいです。

以下のようなコードで実装したのですが、１回目は成功するのですがWebページが表示されたあとはドラッグを受け付けなくなります。

２回目以降もドラッグ＆ドロップを受け付けるようにしたいのですが、どのようにしたらよいのでしょうか？

[code]

    <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>
    
[/code]

[code]

    using System;
    using Windows.ApplicationModel.DataTransfer;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    namespace Test
    {
        public sealed partial class MainPage : Page 
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void WebView_DragOver(object sender, DragEventArgs e)
            {
                if (e.DataView.Contains(StandardDataFormats.WebLink))
                {
                    e.AcceptedOperation = DataPackageOperation.Link;
                    e.Handled = true;
                }
            }
    
            private async void WebView_Drop(object sender, DragEventArgs e)
            {
                if (e.DataView.Contains(StandardDataFormats.WebLink))
                {
                    var uri = await e.DataView.GetWebLinkAsync();
                    this.WebViewControl.Source = uri;
                    e.Handled = true;
                }
            }
        }
    }
    
[/code]

ターゲット: UWP (Windows10, version 1809)  
開発環境: VisualStudio 2017

* * *

(2019-02-03追記)

## Q. JavaScriptを使えば対応できる？

[WebView Class | Remarks](https://docs.microsoft.com/en-
us/uwp/api/windows.ui.xaml.controls.webview#remarks) に、次のような記述がありました。

> As indicated in the Events table, WebView doesn’t 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 eval 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.

ユーザー入力はJavaScriptを追加してそのイベントを活用する方法があると読めますが、ドラッグ&ドロップもこの方法で実現できるのでしょうか？  
当方JavaScriptの知識がほぼないため、例示していただけるとうれしいです。


CC BY-SA 4.0
2019-01-28T07:17:11.797
52369
2019-02-03T15:29:00.690
2019-02-03T04:28:03.147
14817
14817
question
javascript c# uwp
UWPのWebViewにWebリンクをドラッグ＆ドロップしてWebページを開けるようにしたい


Windows10向けにビルドしてWindows10で動作させる限り、ご質問の動作は仕様と考えられます。  
WebViewクラス説明に以下の記述があり、Windows10ではEdgeのエンジンで動作するとあります。

[WebView Class | Remarks](https://docs.microsoft.com/en-
us/uwp/api/windows.ui.xaml.controls.webview#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.

ここで、EdgeブラウザでWebページを表示している状態で、ドラッグ＆ドロップを行うと、検索用入力フィールドとか、ブックマークバー等以外では駐車禁止マークが表示されて、動作しません。

それに対して、InternetExplorer11, Chrome, Firefox
ブラウザで同じ操作を行うと、期待したようにドラッグ＆ドロップしたページを表示します。

ご質問の動作は上記 Edgeブラウザの動作に合致します。簡単に試せるので確認してみてください。  
おそらく、WebViewコントロール自身の動作/操作では、これを変えることは出来ないのでは？

ブラウザ自身の詳細設定やWebViewコントロールのプロパティ変更で出来るかもしれませんが。

代替案としては、WebViewコントロールとは別の(あるいは可能ならば透明化してオーバーラップした)領域にボタンやラベル/テキストボックス等の何かのコントロールを配置し、そこにドラッグ＆ドロップの処理を組み込んで、間接的にWebViewコントロールのUriを書き換えて、あたかもWebViewコントロールがドラッグ＆ドロップをサポートしているかのように見せる、といった対処が考えられます。  
例えばxamlのgridの部分を以下のように変えます。  
Canvas.ZIndexで手前か奥か、Opacityで透明度、を指定します。

[code]

    <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="Stretch"/>
    </Grid>
    
[/code]

ただし、コントロールをオーバーラップさせてしまうと、WebViewで表示しているページのリンクとかのHTML/CSSで表示/取り扱っている部分の処理が動かなくなるので、注意が必要です。マウスやタッチ動作/キーボードの動き/通知を全てキャプチャしてWebViewコントロールにも通知する必要があります。

ちなみに、EdgeはChromiumベースに移行する話が出ているので、いずれはChromeと同様の動きになるかもしれないWebViewが出てくるようです。時期はまだ不明ですが。  
[Chromiumベースの新生「Microsoft Edge」はChromeの拡張を使用可能に-
EdgeHTMLとChakraCoreサポートも継続](https://www.softantenna.com/wp/windows/microsoft-
edge-chrome-extension/)

>
> 既存のUWPアプリ(ストアのPWAを含む)は引き続きEdgeHTML/Chakraを使用できる。(それとは別に)新しいレンダリングエンジンを元にした新しいWebViewを提供する。

* * *

**追記**  
JavaScript系で検索したら、良さそうなのがいくつか見つかりました。  
ただし自分では確認していないので試してみてください。

[Need to get mouse events inside webview Win 10
UWP](https://stackoverflow.com/q/37155970/9014308)

[How to intercept JavaScript alert in WebView in universal Windows
apps](https://code.msdn.microsoft.com/How-to-intercept-854d33da)

[How to interoperate JS with native in WebView of Universal Windows
Platform(UWP)](https://code.msdn.microsoft.com/windowsapps/How-to-invoke-JS-
at-Native-df3fd459)

[JavaScript HTML5 drag and drop not working in an embedded
WebView](https://social.msdn.microsoft.com/Forums/vstudio/en-
US/44ac6dd3-bb66-4c98-8464-13391c666806/xamluwp-javascript-html5-drag-and-
drop-not-working-in-an-embedded-webview?forum=wpdevelop)

[UWPアプリでWebViewコントロールを使ってみた。](https://www.ka-net.org/blog/?p=6167)  
[Creating your own browser with HTML and
JavaScript](https://blogs.windows.com/msedgedev/2015/08/27/creating-your-own-
browser-with-html-and-javascript/#gaV0oSStpIduLABY.97)  
[Blending apps and sites with the HTML x-ms-
webview](https://blogs.windows.com/buildingapps/2013/10/01/blending-apps-and-
sites-with-the-html-x-ms-webview/#ICi45sBIOAzwBfM4.97)

* * *

**更に**  
多少調べたところでは、JavaScript系の記事はHTML/JavaScriptが主体になってC#はどこかへ行ってしまった感じですね。WebView主体の方でも、少し動かすとJavaScriptのアクセス権エラーとかで動かなくなります。対処しようとすると先は長いのでは？

短期で考えられる案は2つ。

  * ウインドウをアドレス/検索バーのように見せるテキストボックスと、WebViewに分けてオーバーラップさせない。ドラッグアンドドロップはテキストボックス側で対処する。
  * 可能かどうか不明だが、.NET Core 3.0 Desktop PackのWinForms/WPFを主体に組み立て直し、その中でWndProcをオーバライド等してWindowメッセージ処理のカスタマイズによりWebViewでドラッグアンドドロップが出来たように見せる。

[WPF や WinForms などで UWP のコントロールを使う XAML
Island（プレビュー）](https://blog.okazuki.jp/entry/2018/09/26/124825)  
[Getting Started with XAML Islands: Hosting a UWP Control in WPF and WinForms
Apps](https://www.telerik.com/blogs/getting-started-xaml-islands-hosting-uwp-
control-in-wpf-winforms-apps)

[WPF/WinFormsをオープンソース化 ～Microsoft、「.NET Core 3.0」Preview
1を発表](https://forest.watch.impress.co.jp/docs/news/1156678.html)  
[WPF on .NET
Coreをやってみる（プレビュー版）](https://qiita.com/soi/items/e1cf2abf9845164bf439)


CC BY-SA 4.0
2019-02-02T15:54:57.070
52505
2019-02-03T15:29:00.690
2019-02-03T15:29:00.690
26370
26370
52369
answer