Отображение контекстного меню в классическом приложении .NET MAUI
Контекстное меню, которое часто называется меню правой кнопкой мыши, предлагает контекстные команды, относящиеся к элементу управления. В многоплатформенный пользовательский интерфейс приложений .NET (.NET MAUI) контекстное меню можно добавить в любой элемент управления, производный от Element, в Mac Catalyst и Windows. Сюда входят все страницы, макеты и представления.
Контекстное меню определяется с параметром MenuFlyout, который может состоять из следующих дочерних элементов:
MenuFlyoutItem, представляющий элемент меню, который можно щелкнуть.MenuFlyoutSubItem, представляющий элемент вложенного меню, который можно щелкнуть.MenuFlyoutSeparator— горизонтальная линия, разделяющая элементы в меню.
MenuFlyoutSubItem производный от MenuFlyoutItem, от которого, в свою очередь, является производным от MenuItem. MenuItem определяет несколько свойств, позволяющих указывать внешний вид и поведение элемента меню. Внешний вид элемента меню или вложенного элемента можно определить, задав Textсвойства и IconImageSource свойства. Ответ на пункт меню или вложенный элемент можно определить, задав ClickedCommandCommandParameter и свойства. Дополнительные сведения о элементах меню см. в разделе "Отображение элементов меню".
Предупреждение
Контекстное меню в Entry настоящее время не поддерживается в Mac Catalyst.
Создание элементов контекстного меню
Объект MenuFlyout можно добавить в FlyoutBase.ContextFlyout присоединенное свойство любого элемента управления, наследуемого от Element. Когда пользователь щелкает элемент управления правой кнопкой мыши, контекстное меню появится в расположении, где был щелкнут указатель.
В следующем примере показано WebView , что определяет контекстное меню:
<WebView x:Name="webView"
Source="https://learn.microsoft.com/dotnet/maui"
MinimumHeightRequest="400">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Go to docs repo"
Clicked="OnWebViewGoToRepoClicked"
CommandParameter="docs" />
<MenuFlyoutItem Text="Go to engineering repo"
Clicked="OnWebViewGoToRepoClicked"
CommandParameter="eng" />
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</WebView>
В этом примере контекстное меню определяет два пункта меню:
Когда элемент меню щелкается, OnWebViewGoToRepoClicked обработчик событий выполняется:
void OnWebViewGoToRepoClicked(object sender, EventArgs e)
{
MenuFlyoutItem menuItem = sender as MenuFlyoutItem;
string repo = menuItem.CommandParameter as string;
string url = repo == "docs" ? "docs-maui" : "maui";
webView.Source = new UrlWebViewSource { Url = $"https://github.com/dotnet/{url}" };
}
Обработчик OnWebViewGoToRepoClicked событий извлекает CommandParameter значение свойства для объекта, который был щелчком, и использует его значение для MenuFlyoutItem создания URL-адреса, к которому WebView переходит переход.
Предупреждение
В настоящее время невозможно добавлять элементы или удалять элементы из MenuFlyout среды выполнения.
Ускорители клавиатуры можно добавить в контекстное меню, чтобы можно было вызвать элемент контекстного меню с помощью сочетания клавиш. Дополнительные сведения см. в статье об акселераторах клавиатуры.
Создание элементов вложенного меню
Элементы вложенного меню можно добавить в контекстное меню, добавив в него один или несколько MenuFlyoutSubItem объектов MenuFlyout:
<Label x:Name="label"
Text="Right-click to choose color">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Black"
Clicked="OnLabelClicked"
CommandParameter="Black" />
<MenuFlyoutSubItem Text="Light">
<MenuFlyoutItem Text="Blue"
Clicked="OnLabelClicked"
CommandParameter="LightBlue" />
<MenuFlyoutItem Text="Coral"
Clicked="OnLabelClicked"
CommandParameter="LightCoral" />
<MenuFlyoutItem Text="Cyan"
Clicked="OnLabelClicked"
CommandParameter="LightCyan" />
</MenuFlyoutSubItem>
<MenuFlyoutSubItem Text="Dark">
<MenuFlyoutItem Text="Blue"
Clicked="OnLabelClicked"
CommandParameter="DarkBlue" />
<MenuFlyoutItem Text="Cyan"
Clicked="OnLabelClicked"
CommandParameter="DarkCyan" />
<MenuFlyoutItem Text="Magenta"
Clicked="OnLabelClicked"
CommandParameter="DarkMagenta" />
</MenuFlyoutSubItem>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Label>
В этом примере контекстное меню определяет элемент меню и два вложенных меню, которые содержат три пункта меню:
Отображение значков в пунктах меню
MenuFlyoutItem и MenuFlyoutSubItem наследует IconImageSource свойство, MenuItemкоторое позволяет отображать небольшой значок рядом с текстом для элемента контекстного меню. Этот значок может быть изображением или значком шрифта.
Предупреждение
Mac Catalyst не поддерживает отображение значков в контекстном меню.
В следующем примере показано контекстное меню, в котором значки для элементов меню определяются с помощью значков шрифта:
<Button Text="▶️ Play"
WidthRequest="80">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Pause"
Clicked="OnPauseClicked">
<MenuFlyoutItem.IconImageSource>
<FontImageSource Glyph="⏸"
FontFamily="Arial" />
</MenuFlyoutItem.IconImageSource>
</MenuFlyoutItem>
<MenuFlyoutItem Text="Stop"
Clicked="OnStopClicked">
<MenuFlyoutItem.IconImageSource>
<FontImageSource Glyph="⏹"
FontFamily="Arial" />
</MenuFlyoutItem.IconImageSource>
</MenuFlyoutItem>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Button>
В этом примере контекстное меню определяет два пункта меню, отображающие значок и текст в Windows:
Дополнительные сведения о отображении значков шрифтов см. в разделе "Отображение значков шрифта". Сведения о добавлении изображений в проекты MAUI .NET см. в разделе "Добавление образов в проект приложения .NET MAUI".
