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

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źć.

Tworzenie menu wysuwanego

• 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 kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy 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.

<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 dla 'light dismiss' na Xbox narysują nakładkę, która przyciemnia widoczność elementów interfejsu użytkownika znajdujących się poza aktualnym zakresem. To zachowanie można zmodyfikować za pomocą właściwości LightDismissOverlayMode . Domyślnie przejściowe interfejsy użytkownika narysują lekką nakładkę wyłączania na Xbox (Auto), ale nie dla innych rodzin urządzeń. Możesz wymusić, że nakładka będzie zawsze włączona lub zawsze wyłączona.

<MenuFlyout LightDismissOverlayMode="Off" />

Utwórz pasek menu

• 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 kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy 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>

Powiązane artykuły

• Podstawy projektowania poleceń dla aplikacji Windows
• Menu i menu kontekstowe
• Kontekstowe zarządzanie kolekcjami i listami
• Klasa MenuFlyout
• klasa MenuBar