Udostępnij za pośrednictwem

Wyświetlanie menu kontekstowego w aplikacji klasycznej .NET MAUI

  • Artykuł

Menu kontekstowe, często nazywane menu prawym przyciskiem myszy, oferuje kontekstowe polecenia specyficzne dla klikniętej kontrolki. W wieloplatformowym interfejsie użytkownika aplikacji platformy .NET (.NET MAUI) można dodać menu kontekstowe do dowolnej kontrolki pochodzącej z Elementsystemu , na komputerach Mac Catalyst i Windows. Obejmuje to wszystkie strony, układy i widoki.

Menu kontekstowe jest definiowane za pomocą elementu MenuFlyout, które może składać się z następujących elementów podrzędnych:

  • MenuFlyoutItem, który reprezentuje element menu, który można kliknąć.
  • MenuFlyoutSubItem, który reprezentuje element podrzędnego menu, który można kliknąć.
  • MenuFlyoutSeparator, czyli linia pozioma oddzielającą elementy w menu.

MenuFlyoutSubItem pochodzi z MenuFlyoutItemklasy , która z kolei pochodzi z klasy MenuItem. MenuItem Definiuje wiele właściwości, które umożliwiają określenie wyglądu i zachowania elementu menu. Wygląd elementu menu lub elementu podrzędnego można zdefiniować, ustawiając Textwłaściwości i IconImageSource . Odpowiedź na element menu lub element podrzędny można zdefiniować, ustawiając Clickedwłaściwości , Commandi CommandParameter . Aby uzyskać więcej informacji na temat elementów menu, zobacz Wyświetlanie elementów menu.

Ostrzeżenie

Menu kontekstowe na obiekcie Entry jest obecnie nieobsługiwane na komputerze Mac Catalyst.

Tworzenie elementów menu kontekstowego

Obiekt MenuFlyout można dodać do dołączonej FlyoutBase.ContextFlyout właściwości dowolnej kontrolki pochodzącej z Elementklasy . Gdy użytkownik kliknie prawym przyciskiem myszy kontrolkę, menu kontekstowe pojawi się w lokalizacji, w której kliknięto wskaźnik.

W poniższym przykładzie pokazano element WebView , który definiuje menu kontekstowe:

<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>

W tym przykładzie menu kontekstowe definiuje dwa elementy menu:

Screenshot of a context menu on a WebView.

Po kliknięciu OnWebViewGoToRepoClicked elementu menu program obsługi zdarzeń jest wykonywany:

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}" };
}

Procedura OnWebViewGoToRepoClicked obsługi zdarzeń pobiera CommandParameter wartość właściwości dla klikniętego MenuFlyoutItem obiektu i używa jej wartości do skompilowania adresu URL, do którego WebView przechodzi.

Ostrzeżenie

Obecnie nie można dodawać elementów ani usuwać elementów ze MenuFlyout środowiska uruchomieniowego.

Akceleratory klawiatury można dodać do elementów menu kontekstowego, aby element menu kontekstowego mógł być wywoływany za pomocą skrótu klawiaturowego. Aby uzyskać więcej informacji, zobacz Akceleratory klawiatury.

Tworzenie elementów menu podrzędnego

Elementy podrzędnego menu można dodać do menu kontekstowego, dodając jeden lub więcej MenuFlyoutSubItem obiektów do elementu 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>

W tym przykładzie menu kontekstowe definiuje element menu i dwa pod menu zawierające trzy elementy menu:

Screenshot of a context menu with sub-menu items.

Wyświetlanie ikon w elementach menu

MenuFlyoutItem i MenuFlyoutSubItem dziedziczą IconImageSource właściwość z MenuItem, która umożliwia wyświetlanie małej ikony obok tekstu elementu menu kontekstowego. Ta ikona może być obrazem lub ikoną czcionki.

Ostrzeżenie

Narzędzie Mac Catalyst nie obsługuje wyświetlania ikon w elementach menu kontekstowego.

W poniższym przykładzie przedstawiono menu kontekstowe, w którym ikony elementów menu są definiowane przy użyciu ikon czcionek:

<Button Text="&#x25B6;&#xFE0F; Play"
        WidthRequest="80">
    <FlyoutBase.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Pause"
                            Clicked="OnPauseClicked">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="&#x23F8;"
                                     FontFamily="Arial" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
            <MenuFlyoutItem Text="Stop"
                            Clicked="OnStopClicked">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="&#x23F9;"
                                     FontFamily="Arial" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
        </MenuFlyout>
    </FlyoutBase.ContextFlyout>
</Button>

W tym przykładzie menu kontekstowe definiuje dwa elementy menu, które wyświetlają ikonę i tekst w systemie Windows:

Screenshot of a context menu that uses icons.

Aby uzyskać więcej informacji na temat wyświetlania ikon czcionek, zobacz Wyświetlanie ikon czcionek. Aby uzyskać informacje na temat dodawania obrazów do projektów .NET MAUI, zobacz Dodawanie obrazów do projektu aplikacji .NET MAUI.