Exibir um menu de contexto em um aplicativo de área de trabalho .NET MAUI
Um menu de contexto, geralmente conhecido como menu do botão direito do mouse, oferece comandos contextuais específicos para o controle que está sendo clicado. No .NET Multi-platform App UI (.NET MAUI), um menu de contexto pode ser adicionado a qualquer controle derivado do Element, no Mac Catalyst e no Windows. Isso inclui todas as páginas, layouts e modos de exibição.
Um menu de contexto é definido com um MenuFlyout, que pode consistir nos seguintes filhos:
MenuFlyoutItem, que representa um item de menu que pode ser clicado.MenuFlyoutSubItem, que representa um item de submenu que pode ser clicado.MenuFlyoutSeparator, que é uma linha horizontal que separa os itens no menu.
MenuFlyoutSubItem deriva de MenuFlyoutItem, que, por sua vez, deriva da interface MenuItem. MenuItem Define várias propriedades que permitem que a aparência e o comportamento de um item de menu sejam especificados. A aparência de um item de menu, ou subitem, pode ser definida definindo as Textpropriedades e IconImageSource . A resposta a um item de menu, ou subitem, clique pode ser definida definindo as Clickedpropriedades , Commande CommandParameter . Para obter mais informações sobre itens de menu, consulte Exibir itens de menu.
Aviso
Um menu de contexto em um Entry não é suportado no Mac Catalyst no momento.
Criar itens de menu de contexto
Um MenuFlyout objeto pode ser adicionado à propriedade anexada FlyoutBase.ContextFlyout de qualquer controle derivado de Element. Quando o usuário clicar com o botão direito do mouse no controle, o menu de contexto aparecerá no local onde o ponteiro foi clicado.
O exemplo a seguir mostra um que define um WebView menu de contexto:
<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>
Neste exemplo, o menu de contexto define dois itens de menu:
Quando um item de menu é clicado, o OnWebViewGoToRepoClicked manipulador de eventos é executado:
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}" };
}
O OnWebViewGoToRepoClicked manipulador de eventos recupera o valor da propriedade do objeto que foi clicado MenuFlyoutItem e usa seu valor para criar a URL para a qual o CommandParameter WebView objeto navega.
Aviso
No momento, não é possível adicionar ou remover itens do MenuFlyout tempo de execução.
Os aceleradores de teclado podem ser adicionados a itens de menu de contexto, para que um item de menu de contexto possa ser chamado por meio de um atalho de teclado. Para obter mais informações, consulte Aceleradores de teclado.
Criar itens de submenu
Os itens de submenu podem ser adicionados a um menu de contexto adicionando um ou mais MenuFlyoutSubItem objetos ao 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>
Neste exemplo, o menu de contexto define um item de menu e dois submenus que contêm três itens de menu:
Exibir ícones em itens de menu
MenuFlyoutItem e MenuFlyoutSubItem herdar a IconImageSource propriedade de , que permite que um pequeno ícone seja exibido ao lado do texto de um item de menu de MenuItemcontexto. Esse ícone pode ser uma imagem ou um ícone de fonte.
Aviso
O Mac Catalyst não suporta a exibição de ícones em itens de menu de contexto.
O exemplo a seguir mostra um menu de contexto, onde os ícones para itens de menu são definidos usando ícones de fonte:
<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>
Neste exemplo, o menu de contexto define dois itens de menu que exibem um ícone e texto no Windows:
Para obter mais informações sobre como exibir ícones de fonte, consulte Exibir ícones de fonte. Para obter informações sobre como adicionar imagens a projetos do .NET MAUI, consulte Adicionar imagens a um projeto de aplicativo .NET MAUI.
