Parancssáv

A parancssávok egyszerű access biztosítanak a felhasználóknak az alkalmazás leggyakoribb feladataihoz. A parancssávok hozzáférést biztosíthatnak alkalmazásszintű vagy lapspecifikus parancsokhoz, és bármilyen navigációs mintával használhatók.

Ez a megfelelő vezérlő?

A CommandBar vezérlő egy általános célú, rugalmas, könnyű vezérlőelem, amely képes megjeleníteni összetett tartalmakat, például képeket vagy szövegblokkokat, valamint egyszerű parancsokat, például AppBarButton, AppBarToggleButton és AppBarSeparator vezérlőket.

Anatómia

Alapértelmezés szerint a parancssávon ikongombok sora és opcionális "továbbiak megjelenítése" gomb látható, amelyet három pont [...]jelöl. Itt látható a később megjelenő példakód által létrehozott parancssáv. Zárt kompakt állapotban jelenik meg.

A parancssáv az alábbihoz hasonló zárt minimális állapotban is megjeleníthető. További információért tekintse meg a Megnyitás és a Bezárt állapotok szakaszt.

Itt található ugyanaz a parancssáv a megnyitott állapotában. A címkék a vezérlő fő részeit azonosítják.

A parancssáv 4 fő területre oszlik:

• A tartalomterület a sáv bal oldalához van igazítva. Akkor jelenik meg, ha a Content tulajdonság ki van töltve.
• Az elsődleges parancsterület a sáv jobb oldalához van igazítva. Akkor jelenik meg, ha a PrimaryCommands tulajdonság fel van töltve.
• A sáv jobb oldalán megjelenik a "továbbiak megtekintése" [...] gomb. A "továbbiak megtekintése" [...] gomb megnyomásával megjelennek az elsődleges parancscímkék, és megnyitja a túlcsordulás menüt, ha vannak másodlagos parancsok. A gomb nem lesz látható, ha nincsenek elsődleges parancsfeliratok vagy másodlagos címkék. Az alapértelmezett viselkedés módosításához használja a OverflowButtonVisibility tulajdonságot.
• A túlcsordulás menü csak akkor jelenik meg, ha a parancssáv meg van nyitva, és a SecondaryCommands tulajdonság ki van töltve. Ha a hely korlátozott, az elsődleges parancsok a SecondaryCommands területre kerülnek. Az alapértelmezett viselkedés módosításához használja az IsDynamicOverflowEnabled tulajdonságot .

Az elrendezés megfordul, amikor a FlowDirection értéke RightToLeft.

Elhelyezés

A parancssávok elhelyezhetők az alkalmazásablak tetején, alján, és inline módon, oly módon, hogy beágyazódnak egy elrendezésvezérlőbe, például Grid.row.

• Kis kézi eszközök esetén javasoljuk, hogy a parancssávokat a képernyő alján helyezze el a könnyű kezelhetőség érdekében.
• A nagyobb képernyővel rendelkező eszközök esetében a parancssávok az ablak tetejének közelében helyezve észrevehetőbbé és felderíthetőbbé teszik őket.

A Fizikai képernyő méretének meghatározásához használja a DiagonalSizeInInches API-t.

A parancssávok az alábbi képernyőterületeken helyezhetők el egynézetes képernyőkön (bal oldali példa) és többnézetes képernyőkön (jobb oldali példa). A beágyazott parancssávok bárhol elhelyezhetők a művelettérben.

Érintéses eszközök: Ha a parancssávnak láthatónak kell maradnia a felhasználó számára, amikor megjelenik az érintőbillentyűzet vagy a Soft Input Panel (SIP), akkor hozzárendelheti a parancssávot egy lap BottomAppBar tulajdonságához, és a SIP megjelenésekor látható marad. Ellenkező esetben a parancssávot az alkalmazás tartalmával egy vonalban és relatív pozícióban kell elhelyeznie.

Parancssáv létrehozása

• Fontos API-k:CommandBar osztály, AppBarButton osztály, AppBarToggleButton osztály, AppBarSeparator osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a parancssávot működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Ez a példa létrehozza a korábban bemutatott parancssávot.

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

Parancsok és tartalom

A parancssáv vezérlőelem 3 tulajdonsággal rendelkezik, amelyek parancsok és tartalmak hozzáadására használhatók: PrimaryCommands, SecondaryCommands és Content.

Commands

Alapértelmezés szerint a parancssáv elemei bekerülnek a PrimaryCommands gyűjteménybe. A parancsokat fontossági sorrendben kell hozzáadnia, hogy a legfontosabb parancsok mindig láthatók legyenek. Amikor a parancssáv szélessége megváltozik, például amikor a felhasználók átméretezik az alkalmazásablakot, az elsődleges parancsok dinamikusan mozognak a parancssáv és az átbillenő menü között, a töréspontoknál. Az alapértelmezett viselkedés módosításához használja az IsDynamicOverflowEnabled tulajdonságot .

A legkisebb képernyőkön (320 epx szélesség) legfeljebb 4 elsődleges parancs fér el a parancssávon.

Parancsokat is hozzáadhat a SecondaryCommands gyűjteményhez, amelyek a lenyíló menüben jelennek meg.

Szükség szerint programozott módon áthelyezheti a parancsokat a PrimaryCommands és a SecondaryCommands között.

• Ha van olyan parancs, amely egységesen jelenik meg a lapok között, a legjobb, ha a parancsot egységes helyen tartja.
• Javasoljuk, hogy az Elfogadás, az Igen és az OK parancsokat az Elutasítás, a Nem és a Mégse beállítástól balra helyezze el. A konzisztenciával a felhasználók magabiztosan mozoghatnak a rendszerben, és segítenek nekik átadni az alkalmazásnavigációval kapcsolatos tudásukat alkalmazásról alkalmazásra.

Alkalmazássáv gombjai

Mind a PrimaryCommands, mind a SecondaryCommands csak az ICommandBarElement felületet implementáló típusokkal tölthető fel, amelyek tartalmazzák az AppBarButton, az AppBarToggleButton és az AppBarSeparator parancselemeket.

Ha más típusú elemet szeretne belefoglalni a PrimaryCommands vagy a SecondaryCommands szolgáltatásba, használhatja az AppBarElementContainer osztályt . Ez burkolóként szolgál az elemhez, és lehetővé teszi az elem megjelenítését egy parancssávon.

Az alkalmazássáv gombvezérlőire ikon és szövegcímke jellemző. Ezek a vezérlők parancssávban való használatra vannak optimalizálva, és megjelenésük attól függően változik, hogy a vezérlőt a parancssávban vagy a túlcsordulás menüben használják.

Icons

Az elsődleges parancsterületen megjelenő ikonok mérete 20x20px; a túlcsordulás menüben az ikonok 16x16px-en jelennek meg. Ha SymbolIcont, FontIcont vagy PathIcont használ, az ikon automatikusan a megfelelő méretre skálázódik, és nem veszít megbízhatóságából, amikor a parancs belép a másodlagos parancsterületre.

Az ikon beállításával kapcsolatos további információkért és példákért tekintse meg az AppBarButton osztály dokumentációját.

Címkék

Az AppBarButton IsCompact tulajdonság határozza meg, hogy megjelenik-e a címke. A parancssáv vezérlőelemben a parancssáv automatikusan felülírja a gomb IsCompact tulajdonságát a parancssáv megnyitásakor és bezárásakor.

Az alkalmazássáv gombfeliratainak elhelyezéséhez használja a CommandBar DefaultLabelPosition tulajdonságát.

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

Nagyobb ablakokban érdemes lehet az alkalmazássáv gomb ikonjaitól jobbra áthelyezni a címkéket az olvashatóság javítása érdekében. Az alsó címkék használatához a felhasználóknak meg kell nyitniuk a parancssávot a címkék megjelenítéséhez, míg a jobb oldali címkék akkor is láthatók, ha a parancssáv bezárult.

A túlcsordulási menükben alapértelmezés szerint a címkék az ikonok jobb oldalán vannak elhelyezve, és a LabelPosition figyelmen kívül van hagyva. Úgy módosíthatja a stílust, hogy a CommandBarOverflowPresenterStyle tulajdonságot olyan stílusra állítja, amely a CommandBarOverflowPresentercélozza meg.

A gombcímkéknek rövidnek, lehetőleg egyetlen szónak kell lenniük. Az ikon alatti hosszabb címkék több sorba tördelnek, ezzel növelve a megnyitott parancssáv teljes magasságát. A felirat szövegében egy kötőjeljel (0x00AD) is szerepelhet, amely arra a karakterhatárra utal, ahol szótörésnek kell történnie. Az XAML-ben ezt egy menekülési sorozattal fejezi ki, például a következővel:

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

Amikor a címke a jelzett helyen tördel, az így néz ki.

Osztott gomb

Egy SplitButton megjeleníthető egy parancssorban a beépített SplitButtonCommandBarStyle és az AppBarElementContainer osztály segítségével. SplitButtonCommandBarStyle Vizualizációkat biztosít a SplitButton számára, hogy AppBarButtonként nézzen ki és érezhesse magát, míg AppBarElementContainer egy burkolóosztály, amely biztosítja a SplitButton által az AppBarButtonhoz hasonló működéshez szükséges funkciókat.

Amikor egy SplitButtont egy AppBarElementContainer-ba beilleszt, és egy parancssávba helyezi, a SplitButtonCommandBarStyle erőforrás automatikusan alkalmazásra kerül.

Ez a mintakód létrehoz és megjelenít egy SplitButtont egy parancssávon belül:

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

Menük és legördülő menük

Fontolja meg a parancsok logikai csoportosítását, például a Válasz, a Válasz mindenkinek és a Továbbítás parancsokat a Válasz menüben. Bár az alkalmazássáv gomb általában egyetlen parancsot aktivál, az alkalmazássáv gombjával megjeleníthető egy MenuFlyout vagy Flyout egyéni tartalommal.

Egyéb tartalom

A Tartalom tulajdonság beállításával bármilyen XAML-elemet hozzáadhat a tartalomterülethez. Ha egynél több elemet szeretne hozzáadni, egy paneltárolóba kell helyeznie őket, és a panelt a Content tulajdonság egyetlen gyermekének kell beállítania.

Ha a dinamikus túlcsordulás engedélyezve van, a tartalom nem fog kivágni, mert az elsődleges parancsok át tudnak lépni a túlcsordulás menübe. Ellenkező esetben az elsődleges parancsok elsőbbséget élveznek, és a tartalom kivágását okozhatják.

Ha a ClosedDisplayModeCompactszűk kijelző üzemmódban van, a tartalmat levághatják, ha nagyobb, mint a parancssávnak a kompakt mérete. A felhasználói felület egyes részeinek a tartalomterületen való megjelenítéséhez vagy elrejtéséhez kezelnie kell a Megnyitás és Lezárt eseményeket, hogy azok ne legyenek kivágva. További információért tekintse meg a Megnyitás és a Bezárt állapotok szakaszt.

Nyitott és lezárt állapotok

A parancssáv megnyitható vagy bezárható. Amikor meg van nyitva, az elsődleges parancsgombokat jeleníti meg szövegfeliratokkal, és megnyitja a túlcsordulás menüt (ha vannak másodlagos parancsok). A parancssáv felfelé (az elsődleges parancsok felett) vagy lefelé (az elsődleges parancsok alatt) nyitja meg a túlcsordulási menüt. Az alapértelmezett irány felfelé van állítva, de ha nincs elegendő hely a túlcsordulási menü felfelé való megnyitásához, a parancssáv lefelé nyitja meg.

A felhasználó a "továbbiak megtekintése" [...] gomb megnyomásával válthat ezek között az állapotok között. Az IsOpen tulajdonság beállításával programozott módon válthat közöttük.

A Megnyitás, a Megnyitás, a Lezárás és a Bezárt események használatával válaszolhat a megnyitott vagy bezárt parancssávra.

• A nyitó és záró események az áttűnés animációjának megkezdése előtt következnek be.
• Megnyitási és bezárási események az áttűnés befejeződése után következnek be.

Ebben a példában a nyitó és a záró események a parancssáv átlátszatlanságát módosítják. Ha a parancssáv bezárul, az félig átlátszó, így az alkalmazás háttere is megjelenik. A parancssáv megnyitásakor a parancssáv átlátszatlan lesz, így a felhasználó a parancsokra összpontosíthat.

<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

Ha egy felhasználó egy parancssáv megnyitásakor az alkalmazás más részeivel kommunikál, a parancssáv automatikusan bezárul. Ezt egyszerűsített elbocsátásinevezik. A IsSticky tulajdonság beállításával szabályozhatja a „light dismiss” viselkedését. Amikor IsSticky="true"a sáv nyitva marad, amíg a felhasználó meg nem nyomja a "továbbiak megjelenítése" [...] gombot, vagy kiválaszt egy elemet a túlcsordulás menüből.

Javasoljuk, hogy kerülje a ragadós parancssávokat, mert nem felelnek meg a felhasználók elvárásainak könnyű elbocsátás és a billentyűzetfókusz viselkedése.

Megjelenítési mód

A ClosedDisplayMode tulajdonság beállításával szabályozhatja, hogy a parancssáv hogyan jelenik meg a zárt állapotában. Három zárt megjelenítési mód közül választhat:

• Kompakt: Az alapértelmezett mód. Megjeleníti a tartalmat, az elsődleges parancsikonokat címkék nélkül, és a "továbbiak megjelenítése" [...] gombot.
• Minimális: Csak egy vékony sávot jelenít meg, amely a "továbbiak megtekintése" [...] gombként működik. A felhasználó a sáv bármely pontjára lenyomva nyithatja meg.
• Rejtett: A parancssáv nem jelenik meg a bezárt állapotban. Ez hasznos lehet a környezetfüggő parancsok beágyazott parancssávon való megjelenítéséhez. Ebben az esetben programozott módon kell megnyitnia a parancssávot az IsOpen tulajdonság beállításával, vagy a ClosedDisplayMode minimális vagy kompakt értékre való módosításával.

Itt egy parancssávot használ a RichEditBox egyszerű formázási parancsainak tárolására. Ha a szerkesztési mező nincs fókuszban, a formázási parancsok zavaróak lehetnek, ezért rejtve vannak. A szerkesztési mező használatakor a parancssáv ClosedDisplayMode értéke Kompaktra változik, így a formázási parancsok láthatóvá válnak.

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

Megjegyzés:

A szerkesztési parancsok megvalósítása meghaladja a példa hatókörét. További információért lásd a RichEditBox cikket.

Bár a Minimális és a Rejtett mód bizonyos helyzetekben hasznos, ne feledje, hogy az összes művelet elrejtése összezavarhatja a felhasználókat.

Ha úgy módosítja a ClosedDisplayMode-t, hogy többé-kevésbé a felhasználónak adjon egy tippet, hatással van a környező elemek elrendezésére. Ezzel szemben, amikor a parancssáv zárt és nyitott állapot között vált, ez nem befolyásolja a többi elem elrendezését.

Kapcsolódó cikkek

• A Windows alkalmazások tervezésének alapjai
• parancssáv felugró
• Legördülő menü és menüsáv
• MenuFlyout osztály
• Parancssáv osztály