WebView2 でコンテキスト メニューをカスタマイズする

WebView2 コントロールは既定のコンテキスト メニューを提供し、WebView2 コントロールを使用するときに独自のコンテキスト メニューを作成できます。 ContextMenuRequested API を使用して、WebView2 アプリのコンテキスト メニュー (右クリック メニュー) をカスタマイズします。

詳細な内容:

概要

WebView2 コントロールは既定のコンテキスト メニューを提供し、WebView2 コントロールを使用するときに独自のコンテキスト メニューを作成できます。 ContextMenuRequested API を使用して、WebView2 アプリのコンテキスト メニュー (右クリック メニュー) をカスタマイズします。

たとえば、次のいずれかを実行できます。

  • カスタム コンテキスト メニューを追加します。

    既定のコンテキスト メニューを使用する代わりに、ホスト アプリでは、WebView2 コンテキスト メニューから送信された情報を使用して独自のコンテキスト メニューを描画できます。 アプリが ContextMenuRequested イベントを処理する。 ContextMenuRequested のイベント引数で提供されるデータを使用して、任意のエントリを含むカスタム コンテキスト メニューを表示できます。 この場合は、イベントを処理して延期を要求します。

    既定のメニュー項目やカスタム メニュー項目をカスタム コンテキスト メニューに追加できます。

  • カスタム コンテキスト メニューに既定のメニュー項目を追加します。

  • 既定のコンテキスト メニューにカスタム メニュー項目を追加します。

  • 既定のコンテキスト メニューから既定またはカスタムのメニュー項目を削除します。

  • コンテキスト メニューを無効にします。

用語:

用語 定義
メニュー項目 広義の用語です。 チェックボックス、コマンド、ラジオ ボタン、区切り記号、サブメニューが含まれます。
コマンド 狭い用語です。 5種類のメニュー項目の1つ。
コンテキスト メニュー WebView2 コントロールに属する既定のコンテキスト メニュー (右クリック メニュー)、またはホスト アプリに属するカスタム コンテキスト メニュー (右クリック メニュー)。

カスタム コンテキスト メニューの追加

既定のコンテキスト メニューを使用する代わりに、ホスト アプリでは、WebView2 コンテキスト メニューから送信された情報を使用して独自のコンテキスト メニューを描画できます。 アプリが ContextMenuRequested イベントを処理する。 ContextMenuRequested のイベント引数で提供されるデータを使用して、任意のエントリを含むカスタム コンテキスト メニューを表示できます。 この場合は、イベントを処理して延期を要求します。

ユーザーがカスタム コンテキスト メニューからコマンドを選択した場合、アプリは、 SelectedCommandId プロパティを使用して、ユーザーが選択したコマンドを WebView2 コントロールに指示する必要があります。

既定のメニュー項目やカスタム メニュー項目をカスタム コンテキスト メニューに追加できます。

目的のメニュー項目を含むカスタム コンテキスト メニューを表示するには、CoreWebView2ContextMenuRequested イベントのCoreWebView2ContextMenuRequestedEventArgsで提供されるデータを使用します。 この場合は、 Handled を trueするように指定し、延期を要求します。

CoreWebView2.ContextMenuRequested イベントで、CoreWebView2ContextMenuRequestedEventArgsを持つイベント リスナーを追加します。

CoreWebView2ContextMenuRequestedEventArgs の MenuItems プロパティは、右クリックしたコンテキストの WebView2 のコンテキスト メニュー項目のツリーを提供します。 アプリのコンテキスト メニューに WebView2 コンテキスト メニュー項目を含めるには、メニュー項目ごとにCoreWebView2ContextMenuItemを追加して、IList<CoreWebView2ContextMenuItem>を反復処理します。 各メニュー項目 (Command や Separator など) の.Kindをテストします。

例: カスタム コンテキスト メニューの追加

次のサンプルは、Win32/WPF コンテキスト メニュー形式の WebView2 コンテキスト メニューを示しています。

webView.CoreWebView2.ContextMenuRequested += delegate (object sender,
                                    CoreWebView2ContextMenuRequestedEventArgs args)
{
    IList<CoreWebView2ContextMenuItem> menuList = args.MenuItems;
    CoreWebView2Deferral deferral = args.GetDeferral();
    args.Handled = true;
    ContextMenu cm = new ContextMenu();
    cm.Closed += (s, ex) => deferral.Complete();
    PopulateContextMenu(args, menuList, cm);
    cm.IsOpen = true;
};
void PopulateContextMenu(CoreWebView2ContextMenuRequestedEventArgs args,
IList<CoreWebView2ContextMenuItem> menuList, ItemsControl cm)
{
    for (int i = 0; i < menuList.Count; i++)
    {
        CoreWebView2ContextMenuItem current = menuList[i];
        if (current.Kind == CoreWebView2ContextMenuItemKind.Separator)
        {
            Separator sep = new Separator();
            cm.Items.Add(sep);
            continue;
        }
        MenuItem newItem = new MenuItem();
        // The accessibility key is the key after the & in the label
        // Replace with '_' so it is underlined in the label
        newItem.Header = current.Label.Replace('&', '_');
        newItem.InputGestureText = current.ShortcutKeyDescription;
        newItem.IsEnabled = current.IsEnabled;
        if (current.Kind == CoreWebView2ContextMenuItemKind.Submenu)
        {
            PopulateContextMenu(args, current.Children, newItem);
        }
        else
        {
            if (current.Kind == CoreWebView2ContextMenuItemKind.CheckBox
            || current.Kind == CoreWebView2ContextMenuItemKind.Radio)
            {
                newItem.IsCheckable = true;
                newItem.IsChecked = current.IsChecked;
            }

            newItem.Click += (s, ex) =>
            {
                args.SelectedCommandId = current.CommandId;
            };
        }
        cm.Items.Add(newItem);
    }
}

コンテキスト メニューにメニュー項目を追加する

次の操作を行うことができます:

  • 上記の「カスタム コンテキスト メニューの追加」で示したように、カスタム コンテキスト メニューに既定のメニュー項目を追加します。

  • 以下の「既定のコンテキスト メニューへのカスタム メニュー項目の追加」に示すように、既定のコンテキスト メニューにカスタム メニュー項目を追加します。

既定のコンテキスト メニューにカスタム メニュー項目を追加する

既定のコンテキスト メニューにカスタム メニュー項目を追加するには、次の API 項目を使用します。

例: 既定のコンテキスト メニューにカスタム メニュー項目を追加する

次の例では、[WebView2] コンテキスト メニューに [ページ URI の表示 ] コマンドを追加します。

webView.CoreWebView2.ContextMenuRequested += delegate (object sender,
                                    CoreWebView2ContextMenuRequestedEventArgs args)
{
    // add new item to end of collection
    CoreWebView2ContextMenuItem newItem =
                        webView.CoreWebView2.Environment.CreateContextMenuItem(
        "Display Page Uri", null, CoreWebView2ContextMenuItemKind.Command);
        newItem.CustomItemSelected += delegate (object send, Object ex)
        {
            string pageUri = args.ContextMenuTarget.PageUri;
            System.Threading.SynchronizationContext.Current.Post((_) =>
            {
                MessageBox.Show(pageUri, "Page Uri", MessageBoxButton.OK);
            }, null);
        };
    menuList.Insert(menuList.Count, newItem);
};

既定のコンテキスト メニューからメニュー項目を削除する

既定のコンテキスト メニューから既定またはカスタムのメニュー項目を削除できます。

例: 既定のコンテキスト メニューからメニュー項目を削除する

次の例では、WebView2 コンテキスト メニューから [ 名前を付けて画像を保存 ] コマンドを削除します。

webView.CoreWebView2.ContextMenuRequested += delegate (object sender,
                                    CoreWebView2ContextMenuRequestedEventArgs args)
{
    IList<CoreWebView2ContextMenuItem> menuList = args.MenuItems;
    CoreWebView2ContextMenuTargetKind context = args.ContextMenuTarget.Kind;
    if (context == CoreWebView2ContextMenuTargetKind.Image)
    {
        for (int index = 0; index < menuList.Count; index++)
        {
            if (menuList[index].Name == "saveImageAs")
            {
                menuList.RemoveAt(index);
                break;
            }
        }
    }
};

ユーザーがコンテキスト メニューを要求したときの検出

このセクションでは、ユーザーがコンテキスト メニューを開くことを要求したときに検出する方法について説明します。 カスタムまたは既定のコンテキスト メニューでも同じです。

ユーザーがコンテキスト メニューを開くよう要求した場合 (右クリックなど)、アプリは ContextMenuRequested イベントをリッスンする必要があります。

アプリでこのイベントが検出されたら、アプリは次の操作を組み合わせて実行する必要があります。

  • 既定のコンテキスト メニューにカスタム メニュー項目を追加します。
  • 既定のコンテキスト メニューからカスタム メニュー項目を削除します。
  • カスタム コンテキスト メニューを開きます。

ContextMenuRequested イベントは、ユーザーがコンテキスト メニューを開くことを要求したことを示します。

WebView2 コントロールは、ユーザーが右クリックなどして WebView2 コントロールでコンテキスト メニューを開くことを要求したことを示すために、このイベントを発生させます。

WebView2 コントロールは、現在の Web ページでコンテキスト メニューの表示が許可されている場合にのみ、 ContextMenuRequested イベントを発生させます。つまり、 AreDefaultContextMenusEnabled プロパティが trueの場合です。

CoreWebView2ContextMenuRequestedEventArgs には、次の情報が含まれています。

  • カスタム コンテキスト メニューに設定する ContextMenuItem オブジェクトの順序付きリスト。 順序付きリストは次のとおりです。

    • メニュー項目の内部名。
    • UI でユーザーに表示されるメニュー項目の UI ラベル。
    • メニュー項目の種類。
    • キーボード ショートカットの説明 ( Alt+C など)。
    • カスタム メニュー項目のその他のプロパティ。

  • コンテキスト メニューが要求された座標。これにより、アプリはユーザーが右クリックした UI 項目を検出できます。 座標は、WebView2 コントロールの左上隅を基準にして定義されます。

  • 選択されたコンテキストの種類と適切なコンテキスト メニュー パラメーター データを含む選択オブジェクト

ユーザーがコンテキスト メニューでカスタム メニュー項目を選択すると、WebView2 コントロールは CustomItemSelected イベントを発生させます。

ユーザーがコンテキスト メニューでメニュー項目を選択したことをホスト アプリが WebView2 に示すと、WebView2 は選択したコマンドを実行します。

ユーザーがカスタム メニュー項目を選択したときの検出

ホスト アプリはユーザーが選択したメニュー項目を処理するか、アプリはメニュー項目を WebView2 コントロールに返してユーザーが選択したメニュー項目を処理することができます。

ホスト アプリでは、ユーザーが既定のコンテキスト メニューまたはカスタム コンテキスト メニューでカスタム メニュー項目を選択したときに発生する CustomItemSelected イベントをリッスンする必要があります。

WebView2 コントロールは、アプリがコンテキスト メニューに追加したカスタム メニュー項目をユーザーが選択したことを示すために、このイベントを発生させます。

ユーザーがカスタム メニュー項目を選択すると、選択されたコンテキスト メニュー項目オブジェクトで CustomMenuItemSelected イベントが発生します。次に示します。

  • アプリはカスタム メニュー項目を追加しますが、コンテキスト メニュー UI を WebView2 プラットフォームに延期します。

  • アプリは、カスタム メニュー項目を追加し、カスタム UI を表示し、 SelectedCommandId プロパティをカスタム メニュー項目の ID に設定します。

選択したコマンド メニュー項目を WebView2 に報告する

ユーザーが WebView2 コンテキスト メニュー コマンド (カスタム コンテキスト メニューにある既定のメニュー項目) を選択すると、ホスト アプリは必要に応じてその選択を WebView2 に報告して、WebView2 がコマンドを呼び出すことができます。

カスタム メニュー項目

ホスト アプリでカスタム メニュー項目が選択されたメニュー項目として報告された場合は、カスタム メニュー項目に対して CustomMenuItemSelected イベントが発生します。

コンテキスト メニューを無効にする

AreDefaultContextMenusEnabled プロパティは、コンテキスト メニューを開くことができるかどうかを制御します。 WebView2 AreDefaultContextMenusEnabled 設定が False に設定されている場合、コンテキスト メニューが無効になり、ユーザーが右クリックしたときなどに ContextMenuRequested イベントが発生しません。

API リファレンスの概要

関連項目

  • 最終更新: