Pasek poleceń

Paski poleceń zapewniają użytkownikom łatwy dostęp do najbardziej typowych zadań aplikacji. Paski poleceń mogą zapewnić dostęp do poleceń specyficznych dla aplikacji lub strony i mogą być używane z dowolnym wzorcem nawigacji.

Czy jest to właściwa kontrola?

Kontrolka CommandBar to kontrolka ogólnego przeznaczenia, elastyczna, lekka, która może wyświetlać zarówno złożoną zawartość, jak obrazy lub bloki tekstu, jak i proste polecenia, takie jak AppBarButton, AppBarToggleButton i AppBarSeparator .

Uwaga / Notatka

Język XAML udostępnia zarówno kontrolkę AppBar , jak i kontrolkę CommandBar . Pasek aplikacji należy używać tylko wtedy, gdy uaktualniasz aplikację uniwersalną systemu Windows 8 korzystającą z paska aplikacji i musisz zminimalizować zmiany. W przypadku nowych aplikacji w systemie Windows 10 zalecamy zamiast tego użycie kontrolki CommandBar. W tym dokumencie założono, że używasz kontrolki CommandBar.

Anatomia

Domyślnie pasek poleceń wyświetla wiersz przycisków ikon i opcjonalny przycisk "zobacz więcej", który jest reprezentowany przez wielokropek [...]. Oto pasek poleceń utworzony przez przykładowy kod pokazany później. Został pokazany w swoim zamkniętym, kompaktowym stanie.

Pasek poleceń można również wyświetlić w zamkniętym stanie minimalnym, który wygląda następująco. Aby uzyskać więcej informacji, zobacz sekcję Otwieranie i zamykanie stanów .

Oto ten sam pasek poleceń w stanie otwartym. Etykiety identyfikują główne części kontrolki.

Pasek poleceń jest podzielony na 4 główne obszary:

• Obszar treści jest wyrównany do lewej krawędzi paska. Jest on wyświetlany, jeśli właściwość Content jest wypełniona.
• Podstawowy obszar poleceń jest wyrównany po prawej stronie paska. Jest on wyświetlany, jeśli właściwość PrimaryCommands jest wypełniona.
• Przycisk "Zobacz więcej" [...] jest wyświetlany po prawej stronie paska. Naciśnięcie przycisku "Zobacz więcej" powoduje wyświetlenie podstawowych etykiet poleceń i otwarcie menu kontekstowego, jeżeli są dodatkowe polecenia. Przycisk nie będzie widoczny, gdy nie istnieją żadne podstawowe etykiety poleceń ani etykiety pomocnicze. Aby zmienić domyślne zachowanie, użyj właściwości OverflowButtonVisibility .
• Menu przepełnienia jest wyświetlane tylko wtedy, gdy pasek poleceń jest otwarty, a właściwość SecondaryCommands zostanie wypełniona. Gdy miejsce jest ograniczone, podstawowe polecenia zostaną przeniesione do obszaru SecondaryCommands. Aby zmienić zachowanie domyślne, użyj właściwości IsDynamicOverflowEnabled .

Układ jest odwracany, gdy FlowDirection jest RightToLeft.

Umieszczenie

Paski poleceń można umieścić w górnej lub dolnej części okna aplikacji oraz wbudować je, osadzając w kontrolce układu, takiej jak Grid.row.

• W przypadku małych urządzeń przenośnych zalecamy pozycjonowanie pasków poleceń w dolnej części ekranu w celu zapewnienia łatwego zasięgu.
• W przypadku urządzeń z większymi ekranami umieszczenie pasków poleceń w górnej części okna sprawia, że są one bardziej zauważalne i wykrywalne.

Użyj interfejsu API DiagonalSizeInInches w celu określenia fizycznego rozmiaru ekranu.

Paski poleceń można umieścić w następujących regionach ekranu na ekranach jednoekranowych (przykład po lewej stronie) i na ekranach z wieloma widokami (prawy przykład). Wbudowane paski poleceń można umieścić w dowolnym miejscu w przestrzeni akcji.

Urządzenia dotykowe: Jeśli pasek poleceń musi pozostać widoczny dla użytkownika, gdy pojawia się klawiatura dotykowa lub panel wprowadzania nietrwałego (SIP), to można przypisać pasek poleceń do właściwości BottomAppBar strony i zostanie on przeniesiony, aby pozostać widocznym, gdy SIP jest obecny. W przeciwnym razie należy umieścić pasek poleceń w linii i pozycjonować względem zawartości aplikacji.

Tworzenie paska poleceń

• Ważne interfejsy API:klasa CommandBar,klasa AppBarButton,klasa AppBarToggleButton,klasa AppBarSeparator

Otwórz aplikację Galeria WinUI 3 i zobacz polecenie CommandBar w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie zostanie utworzony wcześniej wyświetlony pasek poleceń.

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

Polecenia i treść

Kontrolka CommandBar ma 3 właściwości, których można użyć do dodawania poleceń i zawartości: PrimaryCommands, SecondaryCommands i Content.

Commands

Domyślnie elementy paska poleceń są dodawane do kolekcji PrimaryCommands . Należy dodać polecenia w kolejności ich ważności, aby najważniejsze polecenia zawsze są widoczne. Gdy szerokość paska poleceń zmienia się, na przykład gdy użytkownicy zmieniają rozmiar okna aplikacji, główne polecenia dynamicznie przemieszczają się między paskiem poleceń a menu przepełnienia w określonych punktach przerwania. Aby zmienić to zachowanie domyślne, użyj właściwości IsDynamicOverflowEnabled .

Na najmniejszych ekranach (szerokość 320 epx) maksymalnie 4 podstawowe polecenia mieszczą się na pasku poleceń.

Można również dodać polecenia do kolekcji SecondaryCommands, które są wyświetlane w menu przepełnienia.

W razie potrzeby można programowo przenosić polecenia między polami PrimaryCommands i SecondaryCommands.

• Jeśli istnieje polecenie, które będzie wyświetlane spójnie na stronach, najlepiej zachować to polecenie w spójnej lokalizacji.
• Zalecamy umieszczenie poleceń Accept, Yes i OK z lewej strony pozycji Odrzuć, Nie i Anuluj. Spójność zapewnia użytkownikom pewność poruszania się po systemie i pomaga im przenieść swoją wiedzę na temat nawigacji aplikacji z aplikacji do aplikacji.

Przyciski paska aplikacji

Zarówno primaryCommands, jak i SecondaryCommands można wypełnić tylko typami, które implementują interfejs ICommandBarElement , w tym AppBarButton, AppBarToggleButton i AppBarSeparator .

Jeśli chcesz uwzględnić inny typ elementu w polach PrimaryCommands lub SecondaryCommands, możesz użyć klasy AppBarElementContainer . Będzie to służyć jako opakowanie elementu i umożliwi elementowi wyświetlanie na pasku poleceń.

Kontrolki przycisku paska aplikacji charakteryzują się ikoną i etykietą tekstową. Te elementy sterujące są zoptymalizowane do użycia na pasku poleceń, a ich wygląd zmienia się w zależności od tego, czy są używane na pasku poleceń, czy w menu rozwijanym.

Icons

Rozmiar ikon wyświetlanych w obszarze głównych poleceń to 20x20px; w menu dodatkowym ikony są wyświetlane w rozmiarze 16x16px. Jeśli używasz symbolicon, FontIcon lub PathIcon, ikona zostanie automatycznie skalowana do poprawnego rozmiaru bez utraty wierności, gdy polecenie wprowadzi pomocniczy obszar polecenia.

Aby uzyskać więcej informacji i przykładów ustawiania ikony, zobacz dokumentację klasy AppBarButton .

Etykiety

Właściwość AppBarButton IsCompact określa, czy etykieta jest wyświetlana. W kontrolce CommandBar pasek poleceń zastępuje właściwość IsCompact przycisku automatycznie, gdy pasek poleceń jest otwierany i zamykany.

Aby ustawić etykiety przycisków paska aplikacji, użyj właściwości DefaultLabelPosition paska poleceń.

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

W większych oknach rozważ przeniesienie etykiet po prawej stronie ikon przycisków paska aplikacji, aby zwiększyć czytelność. Etykiety na dole wymagają od użytkowników otwarcia paska poleceń w celu wyświetlenia etykiet, a etykiety po prawej stronie są widoczne nawet po zamknięciu paska poleceń.

W menu rozwijalnym etykiety są domyślnie ustawione po prawej stronie ikon, a LabelPosition jest ignorowane. Styl można dostosować, ustawiając właściwość CommandBarOverflowPresenterStyle na styl, który jest przeznaczony dla kontrolki CommandBarOverflowPresenter.

Etykiety przycisków powinny być krótkie, najlepiej w jednym słowie. Dłuższe etykiety poniżej ikony będą zawijane do wielu wierszy, zwiększając ogólną wysokość otwartego paska poleceń. Znak łącznika miękkiego (0x00AD) można uwzględnić w tekście etykiety, aby wskazywała granicę znaku, w której powinien wystąpić podział wyrazów. W języku XAML wyrażasz to przy użyciu sekwencji ucieczki, w następujący sposób:

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

Gdy etykieta owija się wokół wskazanego miejsca, wygląda następująco.

SplitButton

Można wyświetlić SplitButton na pasku poleceń, używając wbudowanej klasy SplitButtonCommandBarStyle. SplitButtonCommandBarStyle zapewnia wizualizacje dla przycisku SplitButton, aby wyglądały i sprawiały wrażenie jak AppBarButton, a AppBarElementContainer jest klasą opakowującą, która zapewnia funkcjonalności potrzebne, aby SplitButton działał jak AppBarButton.

Gdy owijasz element SplitButton w AppBarElementContainer i umieszczasz go na pasku poleceń, zasób SplitButtonCommandBarStyle jest stosowany automatycznie.

Ten przykładowy kod tworzy i wyświetla element SplitButton wewnątrz paska poleceń:

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

Menu i wysuwane menu

Rozważ grupowanie logiczne dla poleceń, takich jak umieszczenie Odpowiedz, Odpowiedz wszystkim i Prześlij dalej w menu Odpowiadanie. Chociaż zazwyczaj przycisk paska aplikacji aktywuje pojedyncze polecenie, przycisk paska aplikacji może służyć do wyświetlania menuFlyout lub wysuwania z zawartością niestandardową.

Inna zawartość

Możesz dodać dowolne elementy XAML do obszaru zawartości, ustawiając właściwość Content . Jeśli chcesz dodać więcej niż jeden element, musisz umieścić je w kontenerze panelu i uczynić ten panel jedynym elementem podrzędnym właściwości Content.

Po włączeniu dynamicznego przepełnienia zawartość nie będzie przycięta, ponieważ podstawowe polecenia mogą trafić do menu przepełnienia. W przeciwnym razie podstawowe polecenia mają pierwszeństwo i mogą spowodować obcięcie zawartości.

Gdy właściwość ClosedDisplayMode ma wartość Compact, zawartość może zostać obcięta, jeśli jest większa niż kompaktowy rozmiar paska poleceń. Należy obsługiwać zdarzenia Otwieranie i Zamykanie aby pokazać lub ukryć części interfejsu użytkownika w obszarze zawartości, aby nie były one obcięte. Aby uzyskać więcej informacji, zobacz sekcję Otwieranie i zamykanie stanów .

Stany otwarte i zamknięte

Pasek poleceń można otworzyć lub zamknąć. Po otwarciu pokazuje główne przyciski poleceń z etykietami tekstowymi i otwiera menu dodatkowe (jeśli istnieją dodatkowe polecenia). Pasek poleceń otwiera menu rozwijane w górę (powyżej podstawowych poleceń) lub w dół (poniżej podstawowych poleceń). Domyślny kierunek jest w górę, ale jeśli nie ma wystarczającej ilości miejsca, aby otworzyć menu przepełnienia w górę, pasek poleceń otwiera go w dół.

Użytkownik może przełączać się między tymi stanami, naciskając przycisk "Zobacz więcej" [...] . Można przełączać się między nimi programowo, ustawiając właściwość IsOpen .

Możesz użyć zdarzeń Otwieranie, Otwieranie, Zamykanie i Zamknięte , aby reagować na otwarty lub zamknięty pasek poleceń.

• Zdarzenia otwierające i zamykające są wykonywane przed rozpoczęciem animacji przejścia.
• Zdarzenia otwarcia i zamknięcia mają miejsce po zakończeniu przejścia.

W tym przykładzie zdarzenia otwierania i zamykania są używane do zmiany nieprzezroczystości paska poleceń. Gdy pasek poleceń jest zamknięty, jest półprzezroczysty, więc tło aplikacji jest wyświetlane w tle. Po otwarciu paska poleceń pasek poleceń jest nieprzezroczystym, dzięki czemu użytkownik może skupić się na poleceniach.

<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

Jeśli użytkownik wchodzi w interakcję z innymi częściami aplikacji po otwarciu paska poleceń, pasek poleceń zostanie automatycznie zamknięty. Jest to nazywane lekkim odrzuceniem. Zachowanie odrzucania światła można kontrolować, ustawiając właściwość IsSticky . Gdy IsSticky="true", pasek pozostaje otwarty, dopóki użytkownik nie naciśnie przycisku "zobacz więcej" [...] lub wybierze element z menu rozwijanego.

Zalecamy unikanie lepkich pasków poleceń, ponieważ nie są zgodne z oczekiwaniami użytkowników dotyczącymi lekkiego odrzucania i zachowania fokusu klawiatury.

Tryb wyświetlania

Możesz kontrolować sposób wyświetlania paska poleceń w stanie zamkniętym, ustawiając właściwość ClosedDisplayMode . Dostępne są 3 zamknięte tryby wyświetlania do wyboru:

• Kompaktowanie: tryb domyślny. Wyświetla zawartość, podstawowe ikony poleceń bez etykiet i przycisk "zobacz więcej" [...]
• Minimalny: pokazuje tylko cienki pasek, który działa jako przycisk "zobacz więcej" [...] Użytkownik może nacisnąć dowolne miejsce na pasku, aby go otworzyć.
• Ukryte: pasek poleceń nie jest wyświetlany po zamknięciu. Może to być przydatne w przypadku wyświetlania poleceń kontekstowych z wbudowanym paskiem poleceń. W takim przypadku należy programowo otworzyć pasek poleceń, ustawiając właściwość IsOpen lub zmieniając wartość ClosedDisplayMode na Minimal lub Compact.

W tym miejscu pasek poleceń służy do przechowywania prostych poleceń formatowania dla elementu RichEditBox. Gdy pole edycji nie ma fokusu, polecenia formatowania mogą rozpraszać uwagę, więc są ukryte. Gdy pole edycji jest używane, ClosedDisplayMode paska poleceń zostanie zmieniony na tryb Compact, aby polecenia formatowania były widoczne.

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

Uwaga / Notatka

Implementacja poleceń edycji wykracza poza zakres tego przykładu. Aby uzyskać więcej informacji, zobacz artykuł RichEditBox .

Mimo że tryby Minimalne i Ukryte są przydatne w niektórych sytuacjach, należy pamiętać, że ukrywanie wszystkich akcji może mylić użytkowników.

Zmiana elementu ClosedDisplayMode w celu udostępnienia użytkownikowi więcej lub mniej wskazówek wpływa na układ otaczających elementów. Natomiast kiedy pasek poleceń przechodzi pomiędzy stanami zamkniętym i otwartym, nie wpływa to na układ innych elementów.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

• interfejsy API platformy UWP:klasy, AppBarButton, AppBarToggleButton, klasa, klasa AppBarSeparator
• Otwórz aplikację Galeria WinUI 2 i zobacz polecenie CommandBar w akcji. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Automatyczne ustawianie stylu elementu SplitButton na pasku poleceń wymaga użycia kontrolki SplitButton z interfejsu WinUI 2.6 lub nowszego.

Powiązane artykuły

• Podstawy projektowania poleceń dla aplikacji systemu Windows
• Pasek poleceń — menu rozwijane
• menu wysuwane i pasek menu
• Klasa MenuFlyout
• Klasa CommandBar