Sdílet prostřednictvím

Rozbalovací nabídka a nabídková lišta

Rozevírací nabídky se používají ve scénářích nabídek a kontextových nabídek k zobrazení seznamu příkazů nebo možností, když je to uživatelem požadováno. Rozbalovací nabídka zobrazuje jednu vestavěnou nabídku nejvyšší úrovně, která může mít položky nabídky a podnabídky. Pokud chcete zobrazit sadu více nabídek nejvyšší úrovně na vodorovném řádku, použijte řádek nabídek (který obvykle umístíte v horní části okna aplikace).

Příklad typické kontextové nabídky

Je to správná kontrola?

Pro pomoc s identifikací rozdílů mezi nabídkami a kontextovými nabídkami se podívejte na nabídky a kontextové nabídky, kde naleznete pokyny, kdy použít rozbalovací nabídku místo panelu příkazů.

Rozevírací nabídky lze použít jako nabídky a kontextové nabídky k uspořádání příkazů. Pokud chcete zobrazit libovolný obsah, například oznámení nebo žádost o potvrzení, použijte dialogové okno nebo vyskakovací okno.

Pokud se konkrétní příkaz bude často používat a máte na to místo, podívejte se na příklady v sekci řízení kolekce, jak umístit příkaz přímo do vlastního prvku, takže uživatelé nemusí procházet nabídkou, aby se k němu dostali.

Vytvořit rozbalovací nabídku

Otevřete aplikaci Galerie WinUI 3 a podívejte se na menuFlyout v akci.

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

K vytvoření rozevírací nabídky použijte třídu MenuFlyout. Obsah nabídky definujete přidáním objektů MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem a MenuFlyoutSeparator do MenuFlyout.

Tyto objekty jsou určené pro:

Tento příklad vytvoří MenuFlyout a používá vlastnost ContextFlyout, která je k dispozici pro většinu ovládacích prvků, k zobrazení MenuFlyout jako kontextové nabídky.

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

Další příklad je téměř identický, ale místo použití vlastnosti ContextFlyout k zobrazení třídy MenuFlyout jako kontextové nabídky, příklad používá vlastnost FlyoutBase.ShowAttachedFlyout ke zobrazení jako nabídky.

<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

Zvažte možnost poskytnutí ikon položek nabídky pro:

  • Nejčastěji používané položky.
  • Položky nabídky, jejichž ikona je standardní nebo dobře známá.
  • Položky nabídky, jejichž ikona dobře ilustruje, co příkaz dělá.

Nemusíte mít povinnost poskytovat ikony pro příkazy, které nemají standardní vizualizaci. Kryptické ikony nejsou užitečné, vytváří vizuální nepořádek a brání uživatelům soustředit se na důležité položky nabídky.

Příklad místní nabídky s 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>

Návod

Velikost ikony v MenuFlyoutItem je 16x16px. Pokud použijete symbolIcon, FontIcon nebo PathIcon, ikona se automaticky škáluje na správnou velikost bez ztráty přesnosti. Pokud používáte BitmapIcon, ujistěte se, že je váš zdroj 16x16px.

Lehké odmítnutí

Ovládací prvky, jako jsou nabídky, kontextové nabídky a další vyskakovací okna, uzamknou fokus klávesnice a herního ovladače v přechodném uživatelském rozhraní, dokud nejsou zavřeny. Chcete-li poskytnout vizuální upozornění pro toto chování, kontrolka zavření ovládacích prvků na Xbox nakreslí překryv, který ztlumí viditelnost uživatelského rozhraní mimo rozsah. Toto chování lze upravit pomocí LightDismissOverlayMode vlastnost. Ve výchozím nastavení se dočasné uživatelské rozhraní zobrazí překrytí pro světelné odmítnutí na Xboxu (Auto), ale ne na jiných rodinách zařízení. Můžete se rozhodnout, že bude překrytí vždy zapnuté nebo vždy vypnuté.

<MenuFlyout LightDismissOverlayMode="Off" />

Vytvořte panel nabídek

Otevřete aplikaci Galerie WinUI 3 a podívejte se, jak MenuBar funguje v praxi.

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Stejné prvky slouží k vytvoření nabídek v řádku nabídek jako v informačním rámečku nabídky. Místo toho, abyste seskupili objekty MenuFlyoutItem v MenuFlyout, je seskupíte v elementu MenuBarItem. Každá položka nabídky je přidána do lišty nabídky jako hlavní menu.

Příklad menu

Poznámka:

Tento příklad ukazuje, jak vytvořit strukturu uživatelského rozhraní, ale nezobrazuje implementaci žádného z příkazů.

<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>
  • Last updated on