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.

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 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, SplitMenuFlyoutItem, 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.
SplitMenuFlyoutItem – Provedení výchozí akce se souvisejícími akcemi v kaskádovém seznamu Další informace najdete v tématu Přidání položky rozdělené 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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Důležitá rozhraní API:SplitMenuFlyoutItem – třída , vlastnost Items

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

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.

SplitMenuFlyoutItem poskytuje prostředí rozděleného tlačítka v rozbalovací nabídce. Má dvě části:

Primární část provádí výchozí akci, například MenuFlyoutItem. Chcete-li reagovat, když ho uživatel vybere, zpracujte událost Click nebo nastavte vlastnost Command.
Sekundární část otevře podnabídku souvisejících možností, jako je MenuFlyoutSubItem.

Položku rozděleného tlačítka použijte, pokud má příkaz běžnou výchozí akci a několik variant, například uložení souboru v různých formátech. Nabídka zůstane kratší, než by byla, kdybyste každou variantu vypisovala jako samostatnou položku.

Poznámka:

SplitMenuFlyoutItem vyžaduje Windows App SDK 1.8.6 nebo novější.

Tento příklad z aplikace WinUI 3 Gallery přidá dvě položky rozděleného menu do MenuFlyout. Položky podnabídky jsou ve vlastnosti Items . Protože Items je vlastnost obsahu XAML prvku SplitMenuFlyoutItem, můžete přidat položky podnabídky přímo uvnitř prvku SplitMenuFlyoutItem.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

Podnabídka může také obsahovat MenuFlyoutSeparator objekty a další SplitMenuFlyoutItem objekty. Pokud je kolekce Items prázdná, sekundární část je deaktivována.

Pokud chcete podnabídku přizpůsobit, nastavte SubMenuPresenterStyle na styl pro prezenter podnabídky a SubMenuItemStyle na styl pro položky v podnabídce.

Uživatelé pracují se dvěma částmi samostatně, když používají klávesnici:

Pokud má primární část fokus, stiskněte Enter nebo Mezerník, abyste provedli výchozí akci, nebo stisknutím klávesy Šipka vpravo přesuňte fokus na sekundární část.
Pokud má sekundární část fokus, stiskněte klávesu Enter nebo klávesu Šipka vpravo a otevřete podnabídku.
Když je podnabídka otevřená, zavřete ji stisknutím klávesy Esc nebo levé šipky.

Čtečky obrazovky také oznamují dvě části samostatně. Sekundární část je hlášena jako tlačítko, které poskytuje více možností pro položku nabídky.

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

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

Poznámka:

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

<MenuBar>
    <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"/>
    </MenuBarItem>

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

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

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

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

Váš názor

Byla tato stránka užitečná?

Poslední aktualizace v 2026-10-16

Je to správná kontrola?

Vytvořit rozbalovací nabídku

Přidejte položku rozdělené nabídky

Icons

Lehké odmítnutí

Vytvořte panel nabídek

Související články

Váš názor

Další materiály