Panel příkazů

Panely příkazů poskytují uživatelům snadný přístup k nejběžnějším úkolům vaší aplikace. Příkazové pruhy můžou poskytovat přístup k příkazům na úrovni aplikace nebo stránkovým příkazům a dají se použít s libovolným navigačním vzorem.

Je to správná kontrola?

CommandBar je univerzální, flexibilní, lehký ovládací prvek, který může zobrazit komplexní obsah, jako jsou obrázky nebo textové bloky, a také jednoduché příkazy, jako jsou AppBarButton, AppBarToggleButton a AppBarSeparator ovládací prvky.

Poznámka:

XAML poskytuje ovládací prvek AppBar i ovládací prvek CommandBar . AppBar byste měli používat jenom v případě, že upgradujete univerzální aplikaci pro Windows 8, která používá AppBar, a potřebujete minimalizovat změny. Pro nové aplikace ve Windows 10 doporučujeme místo toho použít ovládací prvek CommandBar. Tento dokument předpokládá, že používáte ovládací prvek CommandBar.

Anatomie

Ve výchozím nastavení se na panelu příkazů zobrazuje řádek tlačítek ikon a volitelné tlačítko Zobrazit více, které je reprezentováno třemi tečkami [...]. Tady je panel příkazů vytvořený ukázkovým kódem zobrazeným později. Zobrazuje se v uzavřeném kompaktním stavu.

Panel příkazů se dá zobrazit také v uzavřeném minimálním stavu, který vypadá takto. Další informace najdete v části o otevřených a uzavřených státech .

Tady je stejný panel příkazů v otevřeném stavu. Popisky identifikují hlavní části ovládacího prvku.

Panel příkazů je rozdělený do 4 hlavních oblastí:

• Oblast obsahu je zarovnaná na levou stranu pruhu. Je zobrazena, pokud je naplněna vlastnost obsahu .
• Primární oblast příkazů je zarovnaná na pravou stranu pruhu. Zobrazí se, pokud je vlastnost PrimaryCommands naplněna.
• Tlačítko "zobrazit více" [...] je zobrazeno na pravé straně panelu. Stiskem tlačítka "zobrazit více" se zobrazují popisky primárních příkazů a otevře se nabídka přetečení, pokud jsou k dispozici sekundární příkazy. Tlačítko se nezobrazí, pokud nejsou k dispozici žádné popisky primárních příkazů ani sekundární popisky. Chcete-li změnit výchozí chování, použijte OverflowButtonVisibility vlastnost.
• Nabídka přetečení se zobrazí pouze v případech, kdy je panel příkazů otevřen a vlastnost SecondaryCommands je naplněna. Když je prostor omezený, primární příkazy se přesunou do oblasti SecondaryCommands. Chcete-li změnit výchozí chování, použijte IsDynamicOverflowEnabled vlastnost.

Rozložení je obrácené, pokud je FlowDirectionRightToLeft.

Umístění

Panely příkazů lze umístit do horní části okna aplikace, do dolní části okna aplikace, nebo inline vložením do ovládacího prvku rozložení, jako je Grid.row.

• U malých ručních zařízení doporučujeme umístit příkazové pruhy v dolní části obrazovky, aby bylo snadné dosažitelnosti.
• U zařízení s většími obrazovkami je umístění panelů příkazů blízko horní části okna dělá viditelnější a snáze zjistitelné.

K určení fyzické velikosti obrazovky použijte rozhraní API DiagonalSizeInInches .

Panely příkazů lze umístit do následujících oblastí obrazovky na obrazovkách s jedním zobrazením (příklad vlevo) a na obrazovkách s více zobrazeními (pravý příklad). Vložené příkazové panely se dají umístit kamkoli do akčního prostoru.

Dotyková zařízení: Pokud panel příkazů musí zůstat viditelný pro uživatele, když se zobrazí dotyková klávesnice nebo siP (Soft Input Panel), můžete panel příkazů přiřadit vlastnosti BottomAppBar stránky, aby zůstal viditelný, když je protokol SIP k dispozici. Jinak byste měli umístit příkazový panel přímo do řádky a zavést ho relativně k obsahu vaší aplikace.

Vytvoření panelu příkazů

• Důležitá rozhraní API:CommandBar – třída, Třída AppBarButton, Třída AppBarToggleButton, AppBarSeparator – třída

Otevřete aplikaci Galerie WinUI 3 a podívejte se na panel příkazů v akci.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Tento příklad vytvoří panel příkazů zobrazený dříve.

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>

    <CommandBar.Content>
        <TextBlock Text="Now playing..." Margin="12,14"/>
    </CommandBar.Content>
</CommandBar>

Příkazy a obsah

Ovládací prvek CommandBar má 3 vlastnosti, které můžete použít k přidání příkazů a obsahu: PrimaryCommands, SecondaryCommands a Content.

Commands

Ve výchozím nastavení se položky panelu příkazů přidávají do kolekce PrimaryCommands . Příkazy byste měli přidat v pořadí podle jejich důležitosti, aby byly nejdůležitější příkazy vždy viditelné. Když se šířka panelu příkazů změní, například když uživatelé změní velikost okna aplikace, primární příkazy se dynamicky přesouvají mezi panel příkazů a nabídkou přetečení v průběžných bodech. Chcete-li změnit toto výchozí chování, použijte IsDynamicOverflowEnabled vlastnost.

Na nejmenších obrazovkách (šířka 320 epx) se do panelu příkazů vejde maximálně 4 primární příkazy.

Do kolekce SecondaryCommands můžete také přidat příkazy, které se zobrazují v nabídce přetečení.

Příkazy mezi PrimaryCommands a SecondaryCommands můžete programově přesouvat podle potřeby.

• Pokud je příkaz, který by se na stránkách zobrazoval konzistentně, je nejlepší tento příkaz zachovat v konzistentním umístění.
• Doporučujeme umístit příkazy Přijmout, Ano a OK nalevo od možnosti Odmítnout, Ne a Zrušit. Konzistence dává uživatelům jistotu, že se pohybují v systému a pomáhají jim přenášet znalosti navigace v aplikacích z aplikace do aplikace.

Tlačítka panelu aplikací

PrimaryCommands i SecondaryCommands lze naplnit pouze typy, které implementují ICommandBarElement rozhraní, které zahrnuje AppBarButton, AppBarToggleButton a AppBarSeparator command elementy.

Pokud chcete do třídy PrimaryCommands nebo SecondaryCommands zahrnout jiný typ elementu, můžete použít třídu AppBarElementContainer . To bude sloužit jako obálka prvku a umožní, aby se prvek zobrazil v CommandBar.

Ovládací prvky tlačítek na panelu aplikace jsou charakterizovány ikonou a textovým popiskem. Tyto ovládací prvky jsou optimalizované pro použití na panelu příkazů a jejich vzhled se mění v závislosti na tom, jestli se ovládací prvek používá na panelu příkazů nebo v nabídce přetečení.

Icons

Velikost ikon při zobrazení v primární oblasti příkazů je 20x20px; v nabídce přetečení se ikony zobrazují na 16x16px. Pokud použijete symbolIcon, FontIcon nebo PathIcon, ikona se automaticky škáluje na správnou velikost bez ztráty přesnosti, když příkaz přejde do sekundární oblasti příkazu.

Další informace a příklady nastavení ikony naleznete v dokumentaci pro třídu AppBarButton .

Štítky

AppBarButton IsCompact vlastnost určuje, zda je popisek zobrazen. V ovládacím prvku CommandBar přepíše panel příkazů vlastnost IsCompact tlačítka automaticky při otevření a zavření panelu příkazů.

Chcete-li umístit popisky tlačítek panelu aplikace, použijte vlastnost DefaultLabelPosition CommandBar.

<CommandBar DefaultLabelPosition="Right">
    <AppBarToggleButton Icon="Edit" Label="Edit"/>
    <AppBarToggleButton Icon="Share" Label="Share"/>
</CommandBar>

Ve větších oknech zvažte přesunutí popisků napravo od ikon tlačítek na panelu aplikací, abyste zlepšili čitelnost. Popisky dole vyžadují, aby uživatelé otevřeli panel příkazů, aby zobrazili popisky, zatímco popisky na pravé straně jsou viditelné i v případě, že je panel příkazů zavřený.

V přetečení nabídek jsou popisky standardně umístěny napravo od ikon a LabelPosition se ignoruje. Styly můžete upravit nastavením vlastnosti CommandBarOverflowPresenterStyle na styl, který cílí na CommandBarOverflowPresenter.

Popisky tlačítek by měly být krátké, nejlépe jediné slovo. Delší popisky pod ikonou se zalomí na více řádků a zvětší celkovou výšku otevřeného panelu příkazů. Do textu můžete zahrnout znak měkkého spojovníku (0x00AD), aby popisek naznačoval hranici znaku, kde má dojít k přerušení slova. V jazyce XAML to vyjadřujete pomocí escape sekvence, například takto:

<AppBarButton Icon="Back" Label="Areally&#x00AD;longlabel"/>

Když se štítek zabalí na naznačeném místě, vypadá to takto.

tlačítko panelu aplikace s obtékajícím štítkem

Rozdělovací tlačítko

SplitButton můžete zobrazit v CommandBar pomocí integrované SplitButtonCommandBarStyle a AppBarElementContainer třídy. SplitButtonCommandBarStyle poskytuje vizuály pro SplitButton, aby vypadaly a působily jako AppBarButton, zatímco AppBarElementContainer je obálková třída, která poskytuje funkce, potřebné pro to, aby SplitButton fungoval jako AppBarButton.

Když zabalíte SplitButton do AppBarElementContainer a umístíte ho do CommandBar, použije se SplitButtonCommandBarStyle zdroj automaticky.

Tento ukázkový kód vytvoří a zobrazí SplitButton uvnitř CommandBar:

<CommandBar>
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy" Label="Copy"/>
    <AppBarElementContainer>
        <muxc:SplitButton ToolTipService.ToolTip="Insert" Content="Insert">
            <muxc:SplitButton.Flyout>
                <MenuFlyout Placement="RightEdgeAlignedTop">
                    <MenuFlyoutItem Text="Insert above"/>
                    <MenuFlyoutItem Text="Insert between"/>
                    <MenuFlyoutItem  Text="Insert below"/>
                </MenuFlyout>
            </muxc:SplitButton.Flyout>
        </muxc:SplitButton>
    </AppBarElementContainer>
    <AppBarButton Label="Select all"/>
    <AppBarButton Label="Delete" Icon="Delete"/>
</CommandBar>

Nabídky a rozbalovací nabídky

Zvažte logické seskupení příkazů, jako je umístění Odpovědět, Odpovědět všem a Předat dál do nabídky Reakce. I když tlačítko panelu aplikace obvykle aktivuje jeden příkaz, může být použito také ke zobrazení MenuFlyout nebo informačního rámečku s vlastním obsahem.

Další obsah

Do oblasti obsahu můžete přidat libovolné elementy XAML nastavením vlastnosti Content . Pokud chcete přidat více než jeden prvek, musíte je umístit do kontejneru panelu a nastavit tento panel jako jediný podřízený prvek vlastnosti Content.

Pokud je povolený dynamický přetečení, obsah se nevystřihne, protože primární příkazy se můžou přesunout do nabídky přetečení. Jinak mají přednost primární příkazy a můžou způsobit oříznutí obsahu.

Pokud je ClosedDisplayMode nastaven na kompaktní, může být obsah oříznut, pokud je větší než kompaktní velikost panelu příkazů. Události otevírání a zavírání byste měli zpracovat tak, aby se části uživatelského rozhraní v oblasti obsahu zobrazovaly nebo skrývaly a nebyly tak ořezány. Další informace najdete v části o otevřených a uzavřených státech .

Otevřené a uzavřené stavy

Panel příkazů je možné otevřít nebo zavřít. Když je otevřeno, zobrazí primární příkazová tlačítka s textovými popisky a otevře doplňkovou nabídku (pokud jsou sekundární příkazy). Příkazová lišta otevře rozbalovací nabídku nahoru (nad primárními příkazy) nebo dolů (pod primárními příkazy). Výchozí směr je nahoru, ale pokud není dostatek místa pro otevření nabídky přetečení nahoru, otevře se panel příkazů směrem dolů.

Uživatel může přepínat mezi těmito stavy stisknutím tlačítka "zobrazit více" [...] . Mezi nimi můžete přepínat programově nastavením vlastnosti IsOpen .

Události Otevření, Otevření, Zavření a Zavřené můžete použít k odpovídání na panel příkazů, který se otevírá nebo zavře.

• Události Otevření a Zavření nastávají před zahájením animace přechodu.
• Po dokončení přechodu dojde k událostem Otevřeno a Uzavřeno.

V tomto příkladu se události Otevření a uzavření používají ke změně neprůhlednosti panelu příkazů. Když je panel příkazů zavřený, je poloprůhledný, aby se pozadí aplikace zobrazovalo. Po otevření panelu příkazů je panel příkazů neprůžný, aby se uživatel mohl soustředit na příkazy.

<CommandBar Opening="CommandBar_Opening"
            Closing="CommandBar_Closing">
    <AppBarButton Icon="Accept" Label="Accept"/>
    <AppBarButton Icon="Edit" Label="Edit"/>
    <AppBarButton Icon="Save" Label="Save"/>
    <AppBarButton Icon="Cancel" Label="Cancel"/>
</CommandBar>

private void CommandBar_Opening(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 1.0;
}

private void CommandBar_Closing(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 0.5;
}

IsSticky

Pokud uživatel pracuje s ostatními částmi aplikace při otevření panelu příkazů, panel příkazů se automaticky zavře. Tomu se říká light dismiss. Chování při zavření světla můžete řídit nastavením vlastnosti IsSticky . Když IsSticky="true", lišta zůstane otevřená, dokud uživatel nestiskne tlačítko "zobrazit více" [...] nebo nevybere položku z rozbalovací nabídky.

Doporučujeme vyhnout se přilnavým příkazovým lištám, protože nevyhovují očekáváním uživatelů, pokud jde o lehké zavření a chování zaměření klávesnice.

Režim zobrazení

Způsob zobrazení panelu příkazů v zavřeném stavu můžete řídit nastavením ClosedDisplayMode vlastnost. Můžete si vybrat ze 3 uzavřených režimů zobrazení:

• Kompaktní: Výchozí režim. Zobrazuje obsah, primární ikony příkazů bez popisků a tlačítko "zobrazit více" [...] .
• Minimum: Zobrazuje pouze tenkou lištu, která funguje jako tlačítko "zobrazit více" [...] . Uživatel může stisknout libovolné místo na panelu a otevřít ho.
• Skryté: Panel příkazů se po zavření nezobrazí. To může být užitečné pro zobrazení kontextových příkazů s vloženým panelem příkazů. V tomto případě je nutné otevřít panel příkazů programově nastavením IsOpen vlastnost nebo změnou ClosedDisplayMode na Minimal nebo Compact.

Tady se panel příkazů používá k ukládání jednoduchých příkazů formátování pro RichEditBox. Pokud textové pole nemá fokus, příkazy formátování můžou být rušivé, takže jsou skryté. Při použití textového pole se panel příkazů ClosedDisplayMode změní na Kompaktní, aby byly příkazy formátování viditelné.

<StackPanel Width="300"
            GotFocus="EditStackPanel_GotFocus"
            LostFocus="EditStackPanel_LostFocus">
    <CommandBar x:Name="FormattingCommandBar" ClosedDisplayMode="Hidden">
        <AppBarButton Icon="Bold" Label="Bold" ToolTipService.ToolTip="Bold"/>
        <AppBarButton Icon="Italic" Label="Italic" ToolTipService.ToolTip="Italic"/>
        <AppBarButton Icon="Underline" Label="Underline" ToolTipService.ToolTip="Underline"/>
    </CommandBar>
    <RichEditBox Height="200"/>
</StackPanel>

private void EditStackPanel_GotFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
}

private void EditStackPanel_LostFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;
}

Poznámka:

Implementace příkazů pro úpravy je nad rámec tohoto příkladu. Další informace najdete v článku RichEditBox .

I když jsou režimy Minimum a Skryté užitečné v některých situacích, mějte na paměti, že skrytí všech akcí by mohlo uživatele zmást.

Změna ClosedDisplayMode tak, aby poskytovala více nebo méně nápovědy uživateli, ovlivňuje rozložení okolních prvků. Naproti tomu když CommandBar přejde mezi zavřeným a otevřeným, neovlivní rozložení jiných prvků.

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.

Rozhraní API pro tento ovládací prvek existují v jmenném prostoru Windows.UI.Xaml.Controls.

• rozhraní API pro UPW: třída CommandBar, třída AppBarButton , třída AppBarToggleButton , třída AppBarSeparator
• Otevřete aplikaci Galerie WinUI 2 a podívejte se na panel příkazů 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 tento ovládací prvek, který používá zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

Automatický styl SplitButton v CommandBar vyžaduje, abyste použili ovládací prvek SplitButton z WinUI 2.6 nebo novější.

Související články

• Základy návrhu příkazů pro aplikace pro Windows
• Vyskakovací panel příkazů
• Rozevírací nabídka a panel nabídek
• MenuFlyout – třída
• třída CommandBar