Befehlsleiste

Über Befehlsleisten können Benutzer auf häufig verwendete Befehle in Ihrer App komfortabel zugreifen. Befehlsleisten ermöglichen den Zugriff auf Befehle auf App-Ebene oder seitenspezifische Befehle und können bei jedem Navigationsmuster verwendet werden.

Ist dies das richtige Steuerelement?

Das CommandBar-Steuerelement ist ein allgemeines, flexibles und kleines Steuerelement, mit dem komplexe Inhalte wie Bilder oder Textblöcke sowie einfache Befehle wie AppBarButton-, AppBarToggleButton- und AppBarSeparator-Steuerelemente angezeigt werden können.

Hinweis

XAML stellt das AppBar-Steuerelement und das CommandBar-Steuerelement bereit. Sie sollten AppBar nur verwenden, wenn Sie eine universelle Windows 8-App aktualisieren, in der AppBar verwendet wird, und möglichst wenige Änderungen vornehmen möchten. Für neue Apps in Windows 10 sollten Sie stattdessen das CommandBar-Steuerelement verwenden. In diesem Dokument wird davon ausgegangen, dass Sie das CommandBar-Steuerelement verwenden.

Aufbau

Standardmäßig wird auf der Befehlsleiste eine Zeile mit Symbolschaltflächen und eine optionale Schaltfläche "Mehr anzeigen" angezeigt, die durch eine Auslassungspunkte [...] dargestellt wird. Dies ist die Befehlsleiste, die mit dem später gezeigten Beispielcode erstellt wurde. Hier ist der geschlossene, kompakte Zustand zu sehen.

Die Befehlsleiste kann auch im geschlossenen, minimierten Zustand angezeigt werden, die wie folgt aussieht. Weitere Informationen finden Sie im Abschnitt Geöffneter und geschlossener Zustand.

Dies ist die gleiche Befehlsleiste im geöffneten Zustand. Die Beschriftungen zeigen die wichtigsten Elemente des Steuerelements.

Die Befehlsleiste ist in 4 Hauptbereiche unterteilt:

• Der Inhaltsbereich wird an der linken Seite der Leiste ausgerichtet. Er wird angezeigt, wenn die Content-Eigenschaft gefüllt wird.
• Der primäre Befehlsbereich wird an der rechten Seite der Leiste ausgerichtet. Er wird angezeigt, wenn die PrimaryCommands-Eigenschaft gefüllt wird.
• Die Schaltfläche "Mehr anzeigen" [...] wird rechts auf der Leiste angezeigt. Durch Drücken der Schaltfläche "Mehr anzeigen" [...] werden primäre Befehlsbezeichnungen angezeigt und das Überlaufmenü geöffnet, wenn sekundäre Befehle vorhanden sind. Die Schaltfläche wird nicht angezeigt, wenn keine primären oder sekundären Befehlsbezeichnungen vorhanden sind. Dieses Standardverhalten können Sie mit der OverflowButtonVisibility-Eigenschaft ändern.
• Das Überlaufmenü wird nur angezeigt, wenn die Befehlsleiste geöffnet ist und die SecondaryCommands-Eigenschaft gefüllt wird. Wenn der Platz begrenzt ist, werden primäre Befehle in den Bereich „SecondaryCommands“ verschoben. Dieses Standardverhalten können Sie mit der IsDynamicOverflowEnabled-Eigenschaft ändern.

Das Layout wird umgekehrt, wenn FlowDirection auf RightToLeft festgelegt wurde.

Platzierung

Befehlsleisten können am oberen Rand des App-Fensters, am unteren Rand des App-Fensters und inline platziert werden, indem sie in ein Layoutsteuerelement wie Grid.row eingebettet werden.

• Bei kleinen Handheld-Geräten empfiehlt es sich, Befehlsleisten am unteren Bildschirmrand zu platzieren, da sie dort besser erreichbar sind.
• Bei Geräten mit größeren Bildschirmen hat es sich bewährt, Befehlsleisten im oberen Bereich des Fensters zu platzieren.

Die Größe des physischen Bildschirms können Sie mithilfe der DiagonalSizeInInches-API ermitteln.

Befehlsleisten können auf Bildschirmen mit einzelner Ansicht (linkes Beispiel) und auf Bildschirmen mit mehreren Ansichten (rechtes Beispiel) in folgenden Bildschirmbereichen platziert werden: Inlinebefehlsleisten können überall im Aktionsbereich platziert werden.

Toucheingabegeräte: Wenn die Befehlsleiste für den Benutzer sichtbar bleiben muss, während die Bildschirmtastatur (oder ein Soft Input Panel, SIP) angezeigt wird, können Sie die Befehlsleiste der BottomAppBar-Eigenschaft einer Seite zuweisen. Sie wird dann verschoben und bleibt sichtbar, wenn die Bildschirmtastatur eingeblendet ist. Andernfalls müssen Sie die Befehlsleiste inline relativ zum App-Inhalt platzieren.

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

• UWP-APIs:CommandBar-Klasse, AppBarButton-Klasse, AppBarToggleButton-Klasse, AppBarSeparator-Klasse
• Öffnen Sie die WinUI 2-Katalog-App, und sehen Sie sich die Befehlsleiste in Aktion an. Die App WinUI 2-Katalog umfasst interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Rufen Sie die App aus dem Microsoft Store oder den Quellcode auf GitHub ab.

Es wird empfohlen, die neueste WinUI 2 zu verwenden, um die neuesten Stile und Vorlagen für alle Steuerelemente abzurufen. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Das automatische Formatieren eines SplitButton-Elements in einer CommandBar erfordert, dass Sie das SplitButton-Steuerelement von WinUI 2.6 oder höher verwenden.

Erstellen einer Befehlsleiste

• Wichtige APIs:CommandBar-Klasse, AppBarButton-Klasse, AppBarToggleButton-Klasse, AppBarSeparator-Klasse

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich die CommandBar in Aktion an.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

Mit folgendem Beispiel wird die oben gezeigte Befehlsleiste erstellt.

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

Befehle und Inhalt

Das CommandBar-Steuerelement verfügt über 3 Eigenschaften, mit denen Sie Befehle und Inhalt hinzufügen können: PrimaryCommands, SecondaryCommands und Content.

Befehle

Befehlsleistenelemente werden standardmäßig der PrimaryCommands-Sammlung hinzugefügt. Sie sollten Befehle nach ihrer Wichtigkeit hinzufügen, damit die wichtigsten Befehle immer sichtbar sind. Wenn die Breite der Befehlsleiste geändert wird, z.B. wenn Benutzer die Größe des App-Fensters ändern, werden primäre Befehle dynamisch zwischen der Befehlsleiste und dem Überlaufmenü an Haltepunkten verschoben. Dieses Standardverhalten können Sie mit der IsDynamicOverflowEnabled-Eigenschaft ändern.

Auf sehr kleinen Bildschirmen (Breite: 320 epx) passen maximal vier primäre Befehle in die Befehlsleiste.

Sie können der SecondaryCommands-Sammlung auch Befehle hinzufügen, die im Überlaufmenü angezeigt werden.

Befehle können programmgesteuert nach Bedarf zwischen „PrimaryCommands“ und „SecondaryCommands“ verschoben werden.

• Ein Befehl, der einheitlich über mehrere Seiten hinweg angezeigt wird, sollte immer an der gleichen Stelle platziert werden.
• Es wird empfohlen, die Befehle „Akzeptieren“, „Ja“ und „OK“ links von den Befehlen „Ablehnen“, „Nein“ und „Abbrechen“ zu platzieren. Konsistenz trägt dazu bei, dass Benutzern die App vertraut ist und sie ihre App-Navigationskenntnisse von einer App auf andere Apps übertragen können.

App-Leistenschaltflächen

Sowohl primaryCommands als auch SecondaryCommands können nur mit Typen aufgefüllt werden, die die ICommandBarElement-Schnittstelle implementieren, die Die Befehlselemente AppBarButton, AppBarToggleButton und AppBarSeparator enthält.

Wenn Sie einen anderen Elementtyp in PrimaryCommands oder SecondaryCommands einschließen möchten, können Sie die AppBarElementContainer-Klasse verwenden. Dies dient als Wrapper für Ihr Element und ermöglicht die Anzeige des Elements in einer CommandBar.

Die Steuerelemente für die App-Leistenschaltfläche zeichnen sich durch ein Symbol und eine Textbeschriftung aus. Diese Steuerelemente sind für die Verwendung in Befehlsleisten optimiert, und ihr Erscheinungsbild verändert sich abhängig davon, ob das Steuerelement in der Befehlsleiste oder im Überlaufmenü verwendet wird.

Symbole

Die Größe der Symbole, wenn sie im primären Befehlsbereich angezeigt werden, beträgt 20 × 20 Pixel; im Überlaufmenü werden die Symbole mit 16 x 16 Pixel angezeigt. Wenn Sie SymbolIcon, FontIcon oder PathIcon verwenden, wird das Symbol automatisch und ohne Qualitätsverlust auf die richtige Größe skaliert, sobald der Befehl in den Bereich für sekundäre Befehle verschoben wird.

Weitere Informationen und Beispiele zum Festlegen des Symbols finden Sie in der Dokumentation für die AppBarButton-Klasse.

Bezeichnungen

Mithilfe der „AppBarbutton“-Eigenschaft IsCompact wird festgelegt, ob die Bezeichnung angezeigt wird. In einem „CommandBar“-Steuerelement überschreibt die Befehlsleiste automatisch die „IsCompact“-Eigenschaft der Schaltfläche, wenn die Befehlsleiste geöffnet und geschlossen wird.

Verwenden Sie zum Positionieren von App-Leistenschaltflächen die DefaultLabelPosition-Eigenschaft von „CommandBar“.

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

In größeren Fenstern können Sie zur Verbesserung der Lesbarkeit Beschriftungen rechts neben die Symbole der App-Leistenschaltflächen verschieben. Bei Beschriftungen, die sich unten befinden, müssen Benutzer die Befehlsleiste öffnen, um die Beschriftungen anzuzeigen. Beschriftungen auf der rechten Seite werden auch angezeigt, wenn die Befehlsleiste geschlossen ist.

In Überlaufmenüs werden Beschriftungen standardmäßig rechts neben Symbolen positioniert, und LabelPosition wird ignoriert. Sie können das Format anpassen, indem Sie die CommandBarOverflowPresenterStyle-Eigenschaft auf einen „Style“-Wert für CommandBarOverflowPresenterfestlegen.

Schaltflächenbeschriftungen sollten kurz sein (vorzugsweise ein einzelnes Wort). Längere Beschriftungen unter einem Symbol werden auf mehrere Zeilen umbrochen, wodurch die geöffnete Befehlsleiste insgesamt höher wird. Sie können im Text für eine Beschriftung einen bedingten Trennstrich (0x00AD) einfügen, um die Stelle anzugeben, an der der Zeilenumbruch erfolgen soll. In XAML können Sie dies wie folgt mit einer Escapesequenz ausdrücken:

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

Wenn die Beschriftung an der angegebenen Stelle umgebrochen wird, sieht dies wie folgt aus:

SplitButton

Sie können splitButton in einer CommandBar mit der integrierten Klasse und der AppBarElementContainer-KlasseSplitButtonCommandBarStyle anzeigen. SplitButtonCommandBarStyle stellt Visuals bereit, damit ein SplitButton wie ein AppBarButton aussieht und sich anfühlt, während AppBarElementContainer es sich um eine Wrapperklasse handelt, die die Funktionalität bereitstellt, die SplitButton benötigt, um sich wie ein AppBarButton zu verhalten.

Wenn Sie einen SplitButton in ein AppBarElementContainer umschließen und in einer CommandBar platzieren, wird die SplitButtonCommandBarStyle Ressource automatisch angewendet.

Mit diesem Beispielcode wird ein SplitButton innerhalb einer Befehlsleiste erstellt und angezeigt:

<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üs und Flyouts

Ziehen Sie logische Gruppierungen für die Befehle in Erwägung. Platzieren Sie z. B. die Befehle „Antworten“, „Allen antworten“ und „Weiterleiten“ im Menü „Antworten“. Mit einer App-Leistenschaltfläche wird zwar üblicherweise ein einzelner Befehl aktiviert, sie kann jedoch auch zum Anzeigen eines MenuFlyout- oder Flyout-Elements mit benutzerdefiniertem Inhalt verwendet werden.

Andere Inhalte

Sie können dem Inhaltsbereich beliebige XAML-Elemente hinzufügen, indem Sie die Content-Eigenschaft festlegen. Wenn Sie mehrere Elemente hinzufügen möchten, müssen Sie sie in einem Panel-Container platzieren und das Panel als einziges untergeordnetes Element der Content-Eigenschaft festlegen.

Wenn der dynamische Überlauf aktiviert ist, wird der Inhalt nicht abgeschnitten, da die primären Befehle in das Überlaufmenü verschoben werden können. Andernfalls haben primäre Befehle Vorrang und können dazu führen, dass der Inhalt abgeschnitten wird.

Wenn ClosedDisplayMode auf Compact festgelegt wurde, kann der Inhalt abgeschnitten werden, wenn er größer als die kompakte Größe der Befehlsleiste ist. Behandeln Sie das Opening-Ereignis und das Closed-Ereignis, um Teile der Benutzeroberfläche im Inhaltsbereich anzuzeigen oder auszublenden, damit sie nicht beschnitten werden. Weitere Informationen finden Sie im Abschnitt Geöffneter und geschlossener Zustand.

Geöffneter und geschlossener Zustand

Die Befehlsleiste kann geöffnet oder geschlossen sein. Wenn es geöffnet ist, werden primäre Befehlsschaltflächen mit Textbeschriftungen angezeigt und das Überlaufmenü geöffnet (sofern sekundäre Befehle vorhanden sind). Die Befehlsleiste öffnet das Überlaufmenü nach oben (über die primären Befehle) oder nach unten (unter die primären Befehle). Die Standardrichtung ist nach oben, doch wenn der Platz zum Öffnen des Überlaufmenüs nach oben nicht ausreicht, öffnet die Befehlsleiste das Menü nach unten.

Ein Benutzer kann zwischen diesen Zuständen wechseln, indem er die Schaltfläche "Mehr anzeigen" [...] drückt. Sie können programmgesteuert zwischen den Zuständen wechseln, indem Sie einen Wert für die IsOpen-Eigenschaft festlegen.

Mit den Ereignissen Opening, Opened, Closing und Closed können Sie auf das Öffnen oder Schließen der Befehlsleiste reagieren.

• Das Opening-Ereignis und das Closing-Ereignis treten vor Beginn der Übergangsanimation ein.
• Das Opened-Ereignis und das Closed-Ereignis treten nach Abschluss des Übergangs ein.

In diesem Beispiel wird mit dem Opening-Ereignis und dem Closing-Ereignis die Deckkraft der Befehlsleiste geändert. Im geschlossenen Zustand ist die Befehlsleiste halbtransparent, sodass der Hintergrund der App durchscheint. Wenn die Befehlsleiste geöffnet wird, wird sie undurchsichtig, damit der Benutzer sich auf die Befehle konzentrieren kann.

<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

Wenn ein Benutzer bei geöffneter Befehlsleiste mit anderen Teilen einer App interagiert, wird die Befehlsleiste automatisch geschlossen. Dies wird als einfaches Ausblenden bezeichnet. Sie können das Verhalten für einfaches Ausblenden steuern, indem Sie einen Wert für die IsSticky-Eigenschaft festlegen. Wenn IsSticky="true", bleibt der Balken geöffnet, bis der Benutzer die Schaltfläche "Mehr anzeigen" [...] drückt oder ein Element aus dem Überlaufmenü auswählt.

Es wird empfohlen, eingerastete Befehlsleisten zu vermeiden, da sie den Benutzererwartungen an das Verhalten für einfaches Ausblenden und Tastaturfokus nicht entsprechen.

Anzeigemodus

Sie können steuern, wie die Befehlsleiste im geschlossenen Zustand angezeigt wird, indem Sie die ClosedDisplayMode-Eigenschaft festlegen. Sie können aus drei Anzeigemodi für den geschlossenen Zustand auswählen:

• Kompakt: Der Standardmodus. Zeigt Inhalt, primäre Befehlssymbole ohne Bezeichnungen und die Schaltfläche "Mehr anzeigen" [...] an.
• Minimal: Zeigt nur einen dünnen Balken an, der als Schaltfläche "Mehr anzeigen" [...] fungiert. Der Benutzer kann auf eine beliebige Stelle auf der Leiste tippen, um sie zu öffnen.
• Versteckt: Die Befehlsleiste wird nicht angezeigt, wenn sie geschlossen ist. Dies kann hilfreich beim Anzeigen von Kontextbefehlen mit einer Inlinebefehlsleiste sein. In diesem Fall müssen Sie die Befehlsleiste programmgesteuert öffnen, indem Sie die IsOpen-Eigenschaft festlegen oder ClosedDisplayMode auf Minimal oder Compact festlegen.

Hier enthält eine Befehlsleiste einfache Formatierungsbefehle für eine RichEditBox. Wenn das Bearbeitungsfeld nicht den Fokus besitzt, können die Formatierungsbefehle störend sein, daher werden sie ausgeblendet. Wenn das Bearbeitungsfeld verwendet wird, wird ClosedDisplayMode für die Befehlsleiste in „Compact“ geändert, sodass die Formatierungsbefehle angezeigt werden.

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

Hinweis

Die Implementierung der Bearbeitungsbefehle liegt außerhalb des Rahmens dieses Beispiels. Weitere Informationen finden Sie im Artikel zu RichEditBox.

Auch wenn die Modi „Minimal“ und „Hidden“ in einigen Situationen nützlich sind, beachten Sie, dass es für die Benutzer verwirrend sein kann, wenn alle Aktionen ausgeblendet werden.

Das Ändern von ClosedDisplayMode, um mehr oder weniger Informationen für die Benutzer bereitzustellen, hat Auswirkungen auf das Layout der umgebenden Elemente. Das Wechseln zwischen dem geschlossenen und geöffneten Zustand von CommandBar hat hingegen keine Auswirkungen auf das Layout von anderen Elementen.

Beispielcode herunterladen

• WinUI-Katalogbeispiel : Sehen Sie alle XAML-Steuerelemente in einem interaktiven Format.
• Beispiel für XAML-Befehle

Verwandte Artikel

• Grundlagen des Befehlsdesigns für Windows-Apps
• Befehlsleisten-Flyout
• Menü-Flyout und Menüleiste
• MenuFlyout-Klasse
• CommandBar-Klasse