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

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

• důležitá rozhraní API:Třída MenuFlyout, Vlastnost ContextFlyout, FlyoutBase.AttachedFlyout vlastnost

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

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

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:

• MenuFlyoutItem– provedení okamžité akce.
• MenuFlyoutSubItem – obsahuje kaskádový seznam položek nabídky.
• ToggleMenuFlyoutItem– zapnutí nebo vypnutí možnosti
• RadioMenuFlyoutItem– Přepínání mezi navzájem vylučujícími se položkami nabídky
• MenuFlyoutSeparator– vizuální oddělení položek v nabídce.

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

Ikony

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.

<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. Pokud chcete poskytnout vizuální upozornění pro toto chování, ovládací prvky pro lehké zamknutí na Xboxu vytvoří překryv, který sníží viditelnost uživatelského rozhraní, které není v zorném poli. Toto chování lze upravit pomocí LightDismissOverlayMode vlastnost. Ve výchozím nastavení dočasná uživatelská rozhraní nakreslí světelné překrytí 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

• důležitá rozhraní API: třídaMenuBar. třída MenuBarItem

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

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

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.

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>

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

MenuBar vyžaduje Windows 10 verze 1809 (SDK 17763) nebo novější nebo WinUI 2.

Ovládací prvky MenuFlyout a MenuBar pro aplikace pro UPW jsou součástí WinUI 2. Další informace, včetně pokynů k instalaci, najdete v tématu WinUI 2. Rozhraní API pro tyto ovládací prvky existují v oborech názvů Windows.UI.Xaml.Controls i Microsoft.UI.Xaml.Controls.

• rozhraní API pro UWP:třída MenuFlyout, třída MenuBar, vlastnost ContextFlyout, vlastnost FlyoutBase.AttachedFlyout
• WinUI 2 Apis:Třída MenuBar, Vlastnost ContextFlyout, Vlastnost FlyoutBase.AttachedFlyout
• Otevřete aplikaci WinUI 2 Gallery a podívejte se na MenuBar v akci. Aplikace WinUI 2 Gallery obsahuje interaktivní ukázky většiny ovládacích prvků, funkcí a vlastností WinUI 2. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

K získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky doporučujeme použít nejnovější WinUI 2 . WinUI 2.2 nebo novější obsahuje novou šablonu pro tyto ovládací prvky, které používají zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2 .

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

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

Související články

• Základy návrhu příkazů pro aplikace pro Windows
• Menu a kontextové nabídky
• kontextové příkazy pro kolekce a seznamy
• MenuFlyout – třída
• MenuBar – třída