在 WebView2 中自定義操作功能表
WebView2 控制項提供預設操作功能表,而且您可以在使用 WebView2 控制件時建立自己的操作功能表。 使用 ContextMenuRequested API 自定義操作功能表, (WebView2 應用程式) 按兩下滑鼠右鍵功能表。 例如,您可以執行下列任何動作:
新增自訂操作功能表。
您的主應用程式可以使用從 WebView2 操作功能表傳送的資訊來繪製自己的操作功能表,而不是使用預設操作功能表。 您的應用程式會
ContextMenuRequested
處理事件。 您可以使用 事件自ContextMenuRequested
變數中提供的數據,以顯示自訂操作功能表與您選擇的專案。 在此情況下,您會處理 事件並要求延遲。您可以將預設選單項和/或自訂功能表項新增至自訂操作功能表。
將預設功能表項新增至自訂操作功能表。
將自定義功能表項新增至預設操作功能表。
從預設操作功能表中移除預設或自定義功能表項。
停用操作功能表。
術語:
術語 | 定義 |
---|---|
功能表項 | 廣泛詞彙。 包含複選框、命令、單選按鈕、分隔符和子功能表。 |
命令 | 窄字詞。 五種功能表項類型的其中一種。 |
操作功能表 | 默認操作功能表 (屬於 WebView2 控件的按下滑鼠右鍵功能表) ,或屬於主應用程式) (按兩下滑鼠右鍵選單的自定義操作功能表。 |
新增自訂操作功能表
您的主應用程式可以使用從 WebView2 操作功能表傳送的資訊來繪製自己的操作功能表,而不是使用預設操作功能表。 您的應用程式會 ContextMenuRequested
處理事件。 您可以使用 事件自 ContextMenuRequested
變數中提供的數據,以顯示自訂操作功能表與您選擇的專案。 在此情況下,您會處理 事件並要求延遲。
當使用者從您的自定義操作功能表中選取命令時,您的應用程式必須使用 屬性,告知 WebView2 控制件使用者選取的 SelectedCommandId
命令。
您可以將預設選單項和/或自訂功能表項新增至自訂操作功能表。
若要顯示包含所需功能表項的CoreWebView2
自定義操作功能表,請使用 ContextMenuRequested 事件中所提供CoreWebView2ContextMenuRequestedEventArgs
的數據。 在此情況下,您會將 指定 Handled
為 true
,並要求延遲。
在事件上 CoreWebView2.ContextMenuRequested
,新增具有 CoreWebView2ContextMenuRequestedEventArgs
的事件接聽程式。
的 MenuItems
屬性 CoreWebView2ContextMenuRequestedEventArgs
會針對以滑鼠右鍵單擊的內容,提供 WebView2 操作功能表項目的樹狀結構。 若要在應用程式的操作選單中包含 WebView2 操作選單專案,請逐一CoreWebView2ContextMenuItem
查看 IList<CoreWebView2ContextMenuItem>
,為每個選單項新增 。
.Kind
測試每個選單項目的 ,例如 Command
或 Separator
。
CoreWebView2ContextMenuItemKind 列舉
CoreWebView2ContextMenuItemKind.Command
CoreWebView2ContextMenuItemKind.Separator
CoreWebView2ContextMenuItemKind 列舉
CheckBox
Radio
Separator
Submenu
範例:新增自定義操作功能表
下列範例會以 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 專案。
CoreWebView2ContextMenuItemKind 列舉
Command
CoreWebView2ContextMenuRequestedEventArgs 類別
- ContextMenuTarget 屬性
ContextMenuTarget.PageUri
範例:將自定義功能表項新增至預設操作功能表
下列範例會將 [顯示頁面 Uri] 命令新增至 WebView2 操作功能表。
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 控件才會引發 事件;也就是說,如果 AreDefaultContextMenusEnabled
屬性為 true
,則會引發 ContextMenuRequested
事件。
CoreWebView2ContextMenuRequestedEventArgs 包含下列資訊:
要填入自定義操作功能表的
ContextMenuItem
已排序物件清單。 已排序的清單包含下列專案:- 功能表項的內部名稱。
- 功能表項的 UI 標籤,在 UI 中向用戶顯示。
- 功能表項的種類。
- 鍵盤快捷方式描述,如果有的話,例如 Alt+C。
- 自定義功能表項的任何其他屬性。
要求操作功能表的座標,讓您的應用程式可以偵測使用者以滑鼠右鍵按下哪個 UI 專案。 這些座標是根據 WebView2 控制件的左上角所定義。
選取物件,其中包含選取 的內容類型和適當的操作功能表參數數據。
當使用者在操作功能表上選取自定義功能表項時,WebView2 控件 CustomItemSelected
會引發事件。
當您的主應用程式向 WebView2 指出使用者已在操作選單上選取選單項時,WebView2 會接著執行選取的命令。
偵測使用者何時選取自定義功能表項
您的主應用程式可以處理使用者選取的功能表項,或者您的應用程式可以將功能表項傳回 WebView2 控制件,以處理使用者選取的功能表項。
您的主應用程式應該接 CustomItemSelected
聽事件,當使用者在預設或自定義操作功能表上選取自定義功能表項時,就會引發此事件。
WebView2 控制件會引發此事件,指出使用者已選取應用程式新增至操作功能表的自定義功能表項。
如果使用者選取自定義功能表項, CustomMenuItemSelected
則會在選取的內容選單項對象上引發事件,在這些情況下:
應用程式會新增自定義功能表項,但會將操作功能表 UI 定義到 WebView2 平臺。
應用程式會新增自定義功能表項、顯示自訂UI,並將屬性設定
SelectedCommandId
為自定義功能表項的識別碼。
將選取的命令功能表項報告至 WebView2
當使用者選取 WebView2 操作功能表命令 (自定義操作選單) 中的預設功能表項時,主應用程式可以選擇性地將該選取項目報告至 WebView2,讓 WebView2 叫用命令。
-
CoreWebView2ContextMenuItemKind 列舉
CheckBox
Command
Radio
Separator
Submenu
自定義功能表項
如果您的主應用程式將自定義功能表項報告為選取的功能表項,則 CustomMenuItemSelected
會針對自定義功能表項引發事件。
停用操作功能表
屬性 AreDefaultContextMenusEnabled
會控制是否可以開啟任何操作功能表。 如果 WebView2 AreDefaultContextMenusEnabled
設定設為 False
,則會停用操作功能表,且 ContextMenuRequested
不會引發事件,例如使用者按兩下滑鼠右鍵時。
API 參考概觀
CoreWebView2ContextMenuItemKind 列舉
CheckBox
Command
Radio
Separator
Submenu
CoreWebView2ContextMenuTargetKind 列舉
Audio
Image
Page
SelectedText
Video
另請參閱
- WebView2 功能和 API 概觀中的操作功能表。
- WebView2Samples 存放庫