Wysuwane menu i pasek menu

Menu wysuwane są używane w scenariuszach menu i menu kontekstowego do wyświetlania listy poleceń lub opcji w przypadku żądania użytkownika. Wyskakujące menu pokazuje pojedyncze wbudowane menu najwyższego poziomu, które może zawierać elementy i podmenu. Aby wyświetlić wiele menu najwyższego poziomu w poziomym rzędzie, użyj paska menu (który zazwyczaj znajduje się u góry okna aplikacji).

Przykład typowego menu kontekstowego

Czy jest to właściwa kontrola?

Zobacz menu i menu kontekstowe, aby uzyskać pomoc w identyfikowaniu scenariuszy menu i menu kontekstowego oraz wskazówek dotyczących tego, kiedy używać menu wysuwane czy wysuwane paska poleceń.

Menu wysuwane mogą służyć jako menu i menu kontekstowe do organizowania poleceń. Aby wyświetlić dowolną zawartość, taką jak powiadomienie lub żądanie potwierdzenia, użyj okna dialogowego lub okna wysuwanego.

Jeśli określone polecenie będzie używane często i masz wystarczającą ilość miejsca, zobacz komendy kolekcji dla przykładów umieszczenia polecenia bezpośrednio w jego własnym elemencie, aby użytkownicy nie musieli przechodzić przez menu, aby je znaleźć.

Ważne interfejsy API:MenuFlyout, właściwość ContextFlyout, Właściwość FlyoutBase.AttachedFlyout

Otwórz aplikację Galeria WinUI 3 i zobacz MenuFlyout w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Aby utworzyć menu wysuwane, użyj klasy MenuFlyout. Zawartość menu można zdefiniować, dodając obiekty MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem i MenuFlyoutSeparator do MenuFlyout.

Te obiekty są przeznaczone dla:

MenuFlyoutItem — wykonuje natychmiastowe działanie.
MenuFlyoutSubItem — zawiera kaskadową listę elementów menu.
PrzełącznikMenuFlyoutItem — włączanie lub wyłączanie opcji.
RadioMenuFlyoutItem — przełączanie między wzajemnie wykluczanymi elementami menu.
MenuFlyoutSeparator — wizualnie oddzielając elementy menu.

W tym przykładzie utworzono menuFlyout i użyto właściwości ContextFlyout , właściwości dostępnej dla większości kontrolek, aby wyświetlić menu MenuFlyout jako menu kontekstowe.

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

Następny przykład jest prawie identyczny, ale zamiast używać właściwości ContextFlyout do wyświetlania klasy MenuFlyout jako menu kontekstowego, w przykładzie użyto właściwości FlyoutBase.ShowAttachedFlyout , aby wyświetlić ją jako menu.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

Icons

Rozważ udostępnienie ikon elementów menu dla:

Najczęściej używane elementy.
Elementy menu, których ikona jest standardowa lub dobrze znana.
Elementy menu, których ikona dobrze ilustruje to, co robi polecenie.

Nie należy udostępniać ikon poleceń, które nie mają standardowej wizualizacji. Ikony tajemnicze nie są przydatne, tworzą bałagan wizualny i uniemożliwiają użytkownikom skupienie się na ważnych elementach menu.

Przykładowe menu kontekstowe z ikonami

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

Wskazówka

Rozmiar ikony w menuFlyoutItem to 16x16px. Jeśli używasz symbolicon, FontIcon lub PathIcon, ikona automatycznie skaluje się do poprawnego rozmiaru bez utraty wierności. Jeśli używasz narzędzia BitmapIcon, upewnij się, że zasób ma rozmiar 16 x 16 pikseli.

Łatwe odrzucenie

Kontrolki zamykane przez kliknięcie poza nie, takie jak menu, menu kontekstowe i inne okienka wysuwane, zatrzymują fokus klawiatury i gamepada w interfejsie tymczasowym do czasu ich zamknięcia. Aby zapewnić wizualną wskazówkę dla tego zachowania, kontrolki wyłączania na konsoli Xbox będą rysować nakładkę, która przyciemnia widoczność elementów interfejsu użytkownika spoza zakresu. To zachowanie można zmodyfikować za pomocą właściwości LightDismissOverlayMode . Domyślnie przejściowe interfejsy użytkownika wyświetlają przezroczystą nakładkę umożliwiającą zamknięcie na konsoli Xbox (Auto), ale nie w innych rodzinach urządzeń. Możesz wymusić, że nakładka będzie zawsze włączona lub zawsze wyłączona.

<MenuFlyout LightDismissOverlayMode="Off" />

Ważne interfejsy API:Klasa MenuBar. klasa MenuBarItem

Otwórz aplikację Galeria WinUI 3 i zobacz MenuBar w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Te same elementy służą do tworzenia menu na pasku menu, co w menu wysuwanym. Jednak zamiast grupowania obiektów MenuFlyoutItem w MenuFlyout, grupujesz je w elemencie MenuBarItem. Każdy MenuBarItem jest dodawany do paska MenuBar jako menu najwyższego poziomu.

Uwaga / Notatka

W tym przykładzie pokazano tylko, jak utworzyć strukturę interfejsu użytkownika, ale nie pokazuje implementacji żadnego z poleceń.

<muxc:MenuBar>
    <muxc:MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <muxc:RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <muxc:RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </muxc:MenuBarItem>
</muxc:MenuBar>

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Pasek menu wymaga systemu Windows 10 w wersji 1809 (SDK 17763) lub nowszej albo WinUI 2.

Kontrolki MenuFlyout i MenuBar dla aplikacji platformy UWP są uwzględniane w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tych kontrolek istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls , jak i Microsoft.UI.Xaml.Controls .

Interfejsy API platformy UWP:MenuFlyout, klasa MenuBar, właściwość ContextFlyout, Właściwość FlyoutBase.AttachedFlyout
WinUI 2 Apis:MenuBar,właściwość ContextFlyout, właściwość FlyoutBase.AttachedFlyout
Otwórz aplikację Galeria WinUI 2 i zobacz MenuBar w akcji. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tych kontrolek korzystających z zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:MenuFlyout />
<muxc:MenuBar />

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-11-25

Udostępnij przez

Czy jest to właściwa kontrola?

Tworzenie menu wysuwanego

Icons

Łatwe odrzucenie

Utwórz pasek menu

UwP i WinUI 2

Powiązane artykuły

Sprzężenie zwrotne

Dodatkowe źródła