Befehlsleisten-Flyout

  • Artikel

Über das Befehlsleisten-Flyout können Sie Benutzern einfachen Zugriff auf häufig verwendete Aufgaben ermöglichen, indem Befehle in einer unverankerten Symbolleiste angezeigt werden, die mit einem Element in der Benutzeroberflächen-Canvas verbunden sind.

Erweitertes Befehlsleisten-Text-Flyout

Wie CommandBar verfügt auch CommandBarFlyout über die Eigenschaften PrimaryCommands und SecondaryCommands, über die Sie Befehle hinzufügen können. Sie können Befehle in einer oder beiden Sammlungen platzieren. Wann und wie die primären und sekundären Befehle angezeigt werden, hängt vom Anzeigemodus ab.

Das Befehlsleisten-Flyout verfügt über zwei Anzeigemodi: Reduziert und Erweitert.

  • Im reduzierten Modus werden nur die primären Befehle angezeigt. Wenn Ihr Befehlsleisten-Flyout sowohl über primäre als auch über sekundäre Befehle verfügt, wird eine Schaltfläche "Mehr anzeigen" angezeigt, die durch eine Auslassungspunkte [...] dargestellt wird. Über diese erhält der Benutzer durch Wechseln in den erweiterten Modus Zugriff auf die sekundären Befehle.
  • Im erweiterten Modus werden die primären und die sekundären Befehle angezeigt. (Wenn das Steuerelement nur über sekundäre Elemente verfügt, werden diese ähnlich wie beim Steuerelement MenuFlyout angezeigt.)

Ist dies das richtige Steuerelement?

Verwenden Sie das Flyout-Steuerelement der Befehlsleiste, um dem Benutzer eine Auflistung von Befehlen wie Schaltflächen und Menüelementen im Kontext eines Elements auf dem App-Canvas anzuzeigen.

Das Flyout der Befehlsleiste ist das empfohlene Steuerelement zum Erstellen von Kontextmenüs. Dadurch können die allgemeinen Befehle (z. B. Kopieren, Ausschneiden, Einfügen, Löschen, Freigeben oder Textauswahlbefehle), die für das Szenario des Kontextmenüs am meisten kontextrelevant sind, als primäre Befehle hinzugefügt werden, sodass sie als einzelne, horizontale Zeile im Befehlsleisten-Flyout angezeigt werden. TextCommandBarFlyout ist bereits für die automatische Anzeige von Textbefehlen in den Steuerelementen TextBox, TextBlock, RichEditBox, RichTextBlock und PasswordBox konfiguriert. Ein CommandBarFlyout kann verwendet werden, um die Standardtextbefehle für Textsteuerelemente zu ersetzen.

Um Kontextbefehle für Listenelemente anzuzeigen, befolgen Sie die Anweisungen unter Kontextbefehle in Sammlungen und Listen.

Proaktiver und reaktiver Aufruf

Normalerweise gibt es zwei Möglichkeiten zum Aufrufen eines Flyouts oder Menüs, das einem Element in der Benutzeroberflächen-Canvas zugeordnet ist: proaktiver Aufruf und reaktiver Aufruf.

Beim proaktiven Aufruf werden die Befehle automatisch angezeigt, wenn der Benutzer mit dem Element interagiert, dem die Befehle zugeordnet sind. Beispielsweise werden Befehle zur Textformatierung angezeigt, wenn der Benutzer Text in einem Textfeld auswählt. In diesem Fall erhält das Befehlsleisten-Flyout nicht den Fokus. Stattdessen werden relevante Befehle für das Element angezeigt, mit dem der Benutzer interagiert. Wenn der Benutzer die Befehle nicht verwendet, werden sie verworfen.

Beim reaktiven Aufruf werden die Befehle als Reaktion auf eine explizite Aktion des Benutzers zum Anfordern der Befehle angezeigt, z. B. Klicken mit der rechten Maustaste. Dies entspricht dem herkömmlichen Konzept eines Kontextmenüs.

Sie können CommandBarFlyout auf die eine oder andere Weise oder sogar mit einer Kombination aus beiden verwenden.

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.

Das CommandBarFlyout-Steuerelement für UWP-Apps ist als Teil der Windows UI Library 2 enthalten. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). APIs für dieses Steuerelement sind sowohl in den Namespaces Windows.UI.Xaml.Controls (UWP) als auch in Microsoft.UI.Xaml.Controls (WinUI) vorhanden.

Es wird empfohlen, die neueste WinUI 2-Version zu verwenden, um die aktuellsten 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.

Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />

Erstellen eines Befehlsleisten-Flyouts

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich das CommandBarFlyout 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.

Dieses Beispiel zeigt, wie ein Befehlsleisten-Flyout erstellt und wie es proaktiv sowie reaktiv verwendet wird. Wenn Sie auf das Bild tippen, wird das Flyout im reduzierten Modus angezeigt. Als Kontextmenü wird das Flyout im erweiterten Modus angezeigt. In beiden Fällen kann der Benutzer das geöffnete Flyout erweitern oder reduzieren.

<Grid>
    <Grid.Resources>
        <CommandBarFlyout x:Name="ImageCommandsFlyout">
            <AppBarButton Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
            <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
            <AppBarButton Icon="Share" ToolTipService.ToolTip="Share"/>
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Select all"/>
                <AppBarButton Label="Delete" Icon="Delete"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Grid.Resources>

    <Image Source="Assets/image1.png" Width="300"
           Tapped="Image_Tapped" FlyoutBase.AttachedFlyout="{x:Bind ImageCommandsFlyout}"
           ContextFlyout="{x:Bind ImageCommandsFlyout}"/>
</Grid>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)sender);
    var options = new FlyoutShowOptions()
    {
        // Position shows the flyout next to the pointer.
        // "Transient" ShowMode makes the flyout open in its collapsed state.
        Position = e.GetPosition((FrameworkElement)sender),
        ShowMode = FlyoutShowMode.Transient
    };
    flyout?.ShowAt((FrameworkElement)sender, options);
}

Hier sehen Sie das Befehlsleisten-Flyout im reduzierten Zustand.

Beispiel für ein reduziertes Befehlsleisten-Flyout

Hier sehen Sie das gleiche Befehlsleisten-Flyout im erweiterten Zustand mit sekundären Befehlen.

Beispiel für ein erweitertes Befehlsleisten-Flyout

Proaktives Anzeigen von Befehlen

Wenn Sie Kontextbefehle proaktiv anzeigen, sollten standardmäßig nur die primären Befehle angezeigt werden (das Befehlsleisten-Flyout sollte reduziert sein). Platzieren Sie die wichtigsten Befehle in der Sammlung der primären Befehle und zusätzliche Befehle, die herkömmlicherweise in einem Kontextmenü aufgenommen werden, in der Sammlung der sekundären Befehle.

Zum proaktiven Anzeigen von Befehlen wird normalerweise das Click- oder Tapped-Ereignis verarbeitet, um das Befehlsleisten-Flyout anzuzeigen. Legen Sie ShowMode für das Flyout auf Transient oder TransientWithDismissOnPointerMoveAway fest, um das Flyout im reduzierten Modus ohne Fokus zu öffnen.

Textsteuerelemente verfügen über eine SelectionFlyout-Eigenschaft . Wenn Sie dieser Eigenschaft ein Flyout zuweisen, wird es automatisch angezeigt, wenn Text ausgewählt wird.

Reaktives Anzeigen von Befehlen

Wenn Sie Kontextbefehle reaktiv als Kontextmenü anzeigen, werden standardmäßig die sekundären Befehle angezeigt (das Befehlsleisten-Flyout sollte erweitert sein). In diesem Fall können im Befehlsleisten-Flyout primäre und sekundäre Befehle oder nur sekundäre Befehle angezeigt werden.

Zum Anzeigen von Befehlen in einem Kontextmenü weisen Sie das Flyout normalerweise der ContextFlyout-Eigenschaft eines Benutzeroberflächenelements zu. Auf diese Weise erfolgt das Öffnen des Flyouts über das Element, und Sie müssen keine weiteren Schritte ausführen.

Wenn Sie die Anzeige des Flyouts selbst festlegen möchten (z. B. für ein RightTapped-Ereignis), legen Sie ShowMode für das Flyout auf Standard fest, um das Flyout im erweiterten Modus zu öffnen und den Fokus auf das Flyout zu übertragen.

Tipp

Weitere Informationen zu Optionen beim Anzeigen eines Flyouts und zum Steuern der Platzierung des Flyouts finden Sie unter Flyouts.

Anzeigen eines immer erweiterten CommandBarFlyout

Wenn Sie über primäre und sekundäre Befehle in einem CommandBarFlyout verfügen, wird die Schaltfläche "Mehr anzeigen" [...] standardmäßig angezeigt und kann verwendet werden, um die sekundären Befehle zu erweitern und zu reduzieren. Wenn Sie Ihr CommandBarFlyout im erweiterten Modus beibehalten und die sekundären Befehle jederzeit anzeigen möchten, können Sie die CommandBarFlyout.AlwaysExpanded -Eigenschaft verwenden.

Wenn die AlwaysExpanded Eigenschaft auf truefestgelegt ist, wird die Schaltfläche "Mehr anzeigen" nicht angezeigt, und der Benutzer kann den erweiterten Zustand des Steuerelements nicht umschalten. Das CommandBarFlyout wird weiterhin wie gewohnt geschlossen, wenn auf einen sekundären Befehl geklickt wird oder der Benutzer außerhalb des Flyouts klickt.

Diese Eigenschaft hat nur auswirkungen, wenn das CommandBarFlyout über sekundäre Befehle verfügt. Wenn keine sekundären Befehle vorhanden sind, befindet sich das CommandBarFlyout immer im reduzierten Modus.

Tipp

Sie können das CommandBarFlyout programmgesteuert reduzieren und erweitern, indem Sie die IsOpen-Eigenschaft auch dann festlegen, wenn die AlwaysExpanded Eigenschaft auf truefestgelegt ist.

Befehle und Inhalt

Das Steuerelement CommandBarFlyout umfasst 2 Eigenschaften, mit denen Sie Befehle und Inhalte hinzufügen können: PrimaryCommands und SecondaryCommands.

Befehlsleistenelemente werden standardmäßig der PrimaryCommands-Sammlung hinzugefügt. Diese Befehle werden auf der Befehlsleiste angezeigt und sind im reduzierten und im erweiterten Modus sichtbar. Im Unterschied zu CommandBar werden primäre Befehle nicht automatisch bei den sekundären Befehlen übernommen und werden möglicherweise gekürzt.

Sie können Befehle auch der SecondaryCommands-Sammlung hinzufügen. Sekundäre Befehle werden im Menübereich des Steuerelements angezeigt und sind nur im erweiterten Modus sichtbar.

Wenn allgemeine Befehle (z. B. Kopieren, Ausschneiden, Einfügen, Löschen, Freigeben oder Textauswahlbefehle) für das Szenario wichtig sind, empfiehlt es sich, diese als primäre Befehle und nicht als sekundäre Befehle hinzuzufügen.

App-Leistenschaltflächen

Sie können PrimaryCommands und SecondaryCommands direkt mit Steuerelementen vom Typ AppBarButton, AppBarToggleButton und AppBarSeparator füllen.

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

  • Die als primäre Befehle verwendeten App-Leistenschaltflächen werden auf der Befehlsleiste nur mit ihrem Symbol angezeigt, die Textbeschriftung wird nicht angezeigt. Es wird empfohlen, eine QuickInfo zu verwenden, um eine Textbeschreibung des Befehls anzuzeigen, wie hier gezeigt. 
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
  • Die als sekundäre Befehle verwendeten App-Leistenschaltflächen werden mit der Beschriftung und dem Symbol im Menü angezeigt.

Symbole

Erwägen Sie in folgenden Fällen Symbole für die Menüpunkte einzurichten:

  • Am häufigsten verwendete Elemente.
  • Menüpunkte, für die allgemein bekannte oder Standardsymbole vorhanden sind.
  • Menüpunkte, deren Funktion auf einfache Weise mit einem Symbol veranschaulicht werden kann.

Fühlen Sie sich nicht dazu verpflichtet, Befehle mit einem Symbol zu versehen, für die keine Standardsymbole vorhanden sind. Kryptische Symbole sind nicht hilfreich, machen das Menü unübersichtlich und hindern Benutzer daran, wichtige Menüpunkte einfach aufzufinden.

Andere Inhalte

Sie können einem Befehlsleisten-Flyout weitere Befehle hinzufügen, indem Sie diese in einem AppBarElementContainer umschließen. Dadurch können Sie Steuerelemente wie DropDownButton oder SplitButton oder Container wie StackPanel hinzufügen und eine komplexere Benutzeroberfläche erstellen.

Damit ein Element der Sammlung der primären oder der sekundären Befehle eines Befehlsleisten-Flyouts hinzugefügt werden kann, muss es die ICommandBarElement-Schnittstelle implementieren. AppBarElementContainer ist ein Wrapper, der diese Schnittstelle implementiert, sodass Sie einer Befehlsleiste ein Element hinzufügen können, auch wenn die Schnittstelle selbst nicht implementiert wird.

Hier werden mithilfe von AppBarElementContainer einem Befehlsleisten-Flyout zusätzliche Elemente hinzugefügt. Den primären Befehlen wird ein SplitButton hinzugefügt, um die Auswahl von Farben zu ermöglichen. Den sekundären Befehlen wird ein StackPanel hinzugefügt, um ein komplexeres Layout für Zoomsteuerelemente zu ermöglichen.

Tipp

Standardmäßig werden die für die App-Canvas entworfenen Elemente in einer Befehlsleiste möglicherweise nicht richtig dargestellt. Wenn Sie ein Element mithilfe von AppBarElementContainer hinzufügen, müssen Sie einige Schritte ausführen, damit das Element mit anderen Elementen der Befehlsleiste übereinstimmt:

  • Überschreiben Sie die Standardpinsel mit einfacher Formatierung, um den Hintergrund und den Rahmen des Elements an die App-Leistenschaltflächen anzupassen.
  • Passen Sie die Größe und die Position des Elements an.
  • Umschließen Sie Symbole in einer Viewbox mit einer Breite und Höhe von 16 Pixel.

Hinweis

In diesem Beispiel wird nur die Benutzeroberfläche des Befehlsleisten-Flyouts angezeigt, die angezeigten Befehle werden nicht implementiert. Weitere Informationen zum Implementieren der Befehle finden Sie unter Schaltflächen und Befehlsdesigngrundlagen.

<CommandBarFlyout>
    <AppBarButton Icon="Cut" ToolTipService.ToolTip="Cut"/>
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
    <AppBarButton Icon="Paste" ToolTipService.ToolTip="Paste"/>
    <!-- Alignment controls -->
    <AppBarElementContainer>
         <SplitButton ToolTipService.ToolTip="Alignment">
            <SplitButton.Resources>
                <!-- Override default brushes to make the SplitButton 
                     match other command bar elements. -->
                <Style TargetType="SplitButton">
                    <Setter Property="Height" Value="38"/>
                </Style>
                <SolidColorBrush x:Key="SplitButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="SplitButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrush" Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrushChecked"
                                 Color="Transparent"/>
            </SplitButton.Resources>
            <SplitButton.Content>
                <Viewbox Width="16" Height="16" Margin="0,2,0,0">
                    <SymbolIcon Symbol="AlignLeft"/>
                </Viewbox>
            </SplitButton.Content>
            <SplitButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Icon="AlignLeft" Text="Align left"/>
                    <MenuFlyoutItem Icon="AlignCenter" Text="Center"/>
                    <MenuFlyoutItem Icon="AlignRight" Text="Align right"/>
                </MenuFlyout>
            </SplitButton.Flyout>
        </SplitButton>
    </AppBarElementContainer>
    <!-- end Alignment controls -->
    <CommandBarFlyout.SecondaryCommands>
        <!-- Zoom controls -->
        <AppBarElementContainer>
            <AppBarElementContainer.Resources>
                <!-- Override default brushes to make the Buttons
                     match other command bar elements. -->
                <SolidColorBrush x:Key="ButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>
                <SolidColorBrush x:Key="ButtonBorderBrush"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushChecked"
                                 Color="Transparent"/>
                <Style TargetType="TextBlock">
                    <Setter Property="VerticalAlignment" Value="Center"/>
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Height" Value="40"/>
                    <Setter Property="Width" Value="40"/>
                </Style>
            </AppBarElementContainer.Resources>
            <Grid Margin="12,-4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="76"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Viewbox Width="16" Height="16" Margin="0,2,0,0">
                    <SymbolIcon Symbol="Zoom"/>
                </Viewbox>
                <TextBlock Text="Zoom" Margin="10,0,0,0" Grid.Column="1"/>
                <StackPanel Orientation="Horizontal" Grid.Column="2">
                    <Button ToolTipService.ToolTip="Zoom out">
                        <Viewbox Width="16" Height="16">
                            <SymbolIcon Symbol="ZoomOut"/>
                        </Viewbox>
                    </Button>
                    <TextBlock Text="50%" Width="40"
                               HorizontalTextAlignment="Center"/>
                    <Button ToolTipService.ToolTip="Zoom in">
                        <Viewbox Width="16" Height="16">
                            <SymbolIcon Symbol="ZoomIn"/>
                        </Viewbox>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBarElementContainer>
        <!-- end Zoom controls -->
        <AppBarSeparator/>
        <AppBarButton Label="Undo" Icon="Undo"/>
        <AppBarButton Label="Redo" Icon="Redo"/>
        <AppBarButton Label="Select all" Icon="SelectAll"/>
    </CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>

Hier sehen Sie das flyout der reduzierten Befehlsleiste mit einem geöffneten SplitButton.

Befehlsleisten-Flyout mit einer unterteilten Schaltfläche

Hier sehen Sie das erweiterte Befehlsleisten-Flyout mit benutzerdefinierter Zoom-Benutzeroberfläche im Menü.

Befehlsleisten-Flyout mit komplexer Benutzeroberfläche

Erstellen eines Kontextmenüs mit nur sekundären Befehlen

Sie können ein Befehlsleisten-Flyout nur mit sekundären Befehlen verwenden, um ein Kontextmenü zu erstellen, das das gleiche Aussehen und Verhalten des Menüflyouts erreicht.

<Grid>
    <Grid.Resources>
        <!-- A command bar flyout with only secondary commands. -->
        <CommandBarFlyout x:Name="ContextMenu">
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Copy" Icon="Copy"/>
                <AppBarButton Label="Save" Icon="Save"/>
                <AppBarButton Label="Print" Icon="Print"/>
                <AppBarSeparator />
                <AppBarButton Label="Properties"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Grid.Resources>

    <Image Source="Assets/image1.png" Width="300"
           ContextFlyout="{x:Bind ContextMenu}"/>
</Grid>

Hier sehen Sie das Befehlsleisten-Flyout als Kontextmenü.

Befehlsleisten-Flyout mit nur sekundären Befehlen

Sie können ein CommandBarFlyout auch mit DropDownButton verwenden, um ein Standardmenü zu erstellen.

<CommandBarFlyout>
    <AppBarButton Icon="Placeholder"/>
    <AppBarElementContainer>
        <DropDownButton Content="Mail">
            <DropDownButton.Resources>
                <!-- Override default brushes to make the DropDownButton
                     match other command bar elements. -->
                <Style TargetType="DropDownButton">
                    <Setter Property="Height" Value="38"/>
                </Style>
                <SolidColorBrush x:Key="ButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>

                <SolidColorBrush x:Key="ButtonBorderBrush"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushChecked"
                                 Color="Transparent"/>
            </DropDownButton.Resources>
            <DropDownButton.Flyout>
                <CommandBarFlyout Placement="BottomEdgeAlignedLeft">
                    <CommandBarFlyout.SecondaryCommands>
                        <AppBarButton Icon="MailReply" Label="Reply"/>
                        <AppBarButton Icon="MailReplyAll" Label="Reply all"/>
                        <AppBarButton Icon="MailForward" Label="Forward"/>
                    </CommandBarFlyout.SecondaryCommands>
                </CommandBarFlyout>
            </DropDownButton.Flyout>
        </DropDownButton>
    </AppBarElementContainer>
    <AppBarButton Icon="Placeholder"/>
    <AppBarButton Icon="Placeholder"/>
</CommandBarFlyout>

Hier sehen Sie ein Dropdownschaltflächenmenü in einem Befehlsleisten-Flyout.

Befehlsleisten-Flyout mit einem Dropdown-Schaltflächenmenü

Befehlsleisten-Flyouts für Textsteuerelemente

TextCommandBarFlyout ist ein spezielles Befehlsleisten-Flyout, das Befehle zur Bearbeitung von Text enthält. Jedes Textsteuerelement zeigt TextCommandBarFlyout automatisch als Kontextmenü (Klick mit der rechten Maustaste) oder bei Auswahl von Text an. Das Befehlsleisten-Text-Flyout passt sich an die Textauswahl an, sodass nur relevante Befehle angezeigt werden.

Hier sehen Sie ein Textbefehlsleisten-Flyout für die Textauswahl.

Reduziertes Befehlsleisten-Text-Flyout

Hier sehen Sie ein Flyout der erweiterten Textbefehlsleiste, das die sekundären Befehle anzeigt.

Erweitertes Befehlsleisten-Text-Flyout

Verfügbare Befehle

In der folgenden Tabelle sind die in TextCommandBarFlyout enthaltenen Befehle aufgeführt. Zudem ist angegeben, wann sie angezeigt werden.

Befehl Wird angezeigt ...
Fett wenn das Steuerelement nicht schreibgeschützt ist (nur RichEditBox).
Kursiv wenn das Steuerelement nicht schreibgeschützt ist (nur RichEditBox).
Underline wenn das Steuerelement nicht schreibgeschützt ist (nur RichEditBox).
Korrektur wenn IsSpellCheckEnabled auf true festgelegt und Text mit Rechtschreibfehlern ausgewählt ist.
Ausschneiden wenn das Steuerelement nicht schreibgeschützt ist und Text ausgewählt ist.
Kopieren wenn Text ausgewählt ist.
Einfügen wenn das Steuerelement nicht schreibgeschützt ist und die Zwischenablage Inhalte enthält.
Rückgängig machen wenn eine Aktion vorhanden ist, die rückgängig gemacht werden kann.
Alle auswählen wenn Text ausgewählt werden kann.

Benutzerdefinierte Befehlsleisten-Text-Flyouts

TextCommandBarFlyout kann nicht angepasst werden und wird von jedem Textsteuerelement automatisch verwaltet. Sie können jedoch das Standard-TextCommandBarFlyout durch benutzerdefinierte Befehle ersetzen.

  • Um das standardmäßig bei der Textauswahl angezeigte TextCommandBarFlyout zu ersetzen, können Sie ein benutzerdefiniertes CommandBarFlyout (oder einen anderen Flyout-Typ) erstellen und der SelectionFlyout-Eigenschaft zuweisen. Wenn Sie SelectionFlyout auf null festlegen, werden bei der Textauswahl keine Befehle angezeigt.
  • Um das standardmäßig als Kontextmenü angezeigte TextCommandBarFlyout zu ersetzen, weisen Sie der ContextFlyout-Eigenschaft eines Textsteuerelements ein benutzerdefiniertes CommandBarFlyout (oder einen anderen Flyout-Typ) zu. Wenn Sie ContextFlyout auf null festlegen, wird das Menü-Flyout, das in vorherigen Versionen des Textsteuerelements angezeigt wird, anstelle von TextCommandBarFlyout angezeigt.

Einfaches Ausblenden

Steuerelemente mit leichtem Schließen (z. B. Menüs, Kontextmenüs und andere Flyouts) fangen tastatur- und gamepad-Fokus innerhalb der vorübergehenden Benutzeroberfläche auf, bis sie geschlossen werden. Um dieses Verhalten optisch zu kennzeichnen, werden diese Steuerelemente auf der Xbox als Überlagerung gezeichnet, wobei Helligkeit bzw. Sichtbarkeit der umgebenden Benutzeroberfläche reduziert wird. Dieses Verhalten kann mit der LightDismissOverlayMode-Eigenschaft geändert werden. Standardmäßig erhalten kurzlebige Benutzeroberflächen auf der Xbox (Auto), jedoch nicht auf anderen Gerätefamilien eine einfach ausgeblendete Überlagerung. Apps können jedoch durchsetzen, dass die Überlagerung stets On oder stets Off ist.

<CommandBarFlyout LightDismissOverlayMode="Off" /> >

Beispielcode herunterladen