Delen via

Flyout van opdrachtbalk

  • Artikel

Met de flyout op de opdrachtbalk kunt u gebruikers eenvoudig toegang bieden tot algemene taken door opdrachten weer te geven in een zwevende werkbalk die is gerelateerd aan een element op uw ui-canvas.

Een flyout van de opdrachtbalk voor uitgebreide tekstcontrole

Net als CommandBarheeft CommandBarFlyout PrimaryCommands en SecondaryCommands eigenschappen die u kunt gebruiken om opdrachten toe te voegen. U kunt opdrachten in een verzameling of beide plaatsen. Wanneer en hoe de primaire en secundaire opdrachten worden weergegeven, is afhankelijk van de weergavemodus.

De flyout op de opdrachtbalk heeft twee weergavemodi: samengevouwen en uitgevouwen.

  • In de samengevouwen modus worden alleen de primaire opdrachten weergegeven. Als de flyout van de opdrachtbalk zowel primaire als secundaire opdrachten bevat, wordt er een knop met de tekst "Meer weergeven" weergegeven, aangeduid door een beletselteken [...]. Hierdoor kan de gebruiker toegang krijgen tot de secundaire opdrachten door over te stappen naar de uitgebreide modus.
  • In de uitgevouwen modus worden zowel de primaire als de secundaire opdrachten weergegeven. (Als het besturingselement alleen secundaire items bevat, worden deze op een manier weergegeven die vergelijkbaar is met het besturingselement MenuFlyout.)

Is dit de juiste controle?

Gebruik het flyout-besturingselement van de opdrachtbalk om een verzameling opdrachten weer te geven aan de gebruiker, zoals knoppen en menu-items, in de context van een element op het app-canvas.

Flyout op de opdrachtbalk is het aanbevolen besturingselement voor het maken van contextmenu's. Hierdoor kunnen de algemene opdrachten (zoals kopiëren, knippen, plakken, verwijderen, delen of tekstselectieopdrachten) die het meest contextueel relevant zijn voor het contextmenu worden toegevoegd als primaire opdrachten, zodat ze worden weergegeven als één horizontale rij in de flyout van de opdrachtbalk. De TextCommandBarFlyout is al geconfigureerd om automatisch tekstcommando's weer te geven in TextBox, TextBlock, RichEditBox, RichTextBlock en PasswordBox. Een CommandBarFlyout kan worden gebruikt om de standaardtekstopdrachten op tekstbesturingselementen te vervangen.

Als u contextuele opdrachten voor lijstitems wilt weergeven, volgt u de richtlijnen in Contextuele opdrachten voor verzamelingen en lijsten.

Proactief versus reactief aanroepen

Er zijn meestal twee manieren om een flyout of menu aan te roepen dat is gekoppeld aan een element op uw ui-canvas: proactieve aanroep en reactieve aanroep.

Bij proactieve aanroep worden opdrachten automatisch weergegeven wanneer de gebruiker communiceert met het item waaraan de opdrachten zijn gekoppeld. Opdrachten voor tekstopmaak worden bijvoorbeeld weergegeven wanneer de gebruiker tekst in een tekstvak selecteert. In dit geval krijgt de flyout van de opdrachtbalk geen focus. In plaats daarvan worden relevante opdrachten weergegeven dicht bij het item waarmee de gebruiker communiceert. Als de gebruiker geen interactie heeft met de opdrachten, worden ze genegeerd.

Bij reactieve aanroep worden opdrachten weergegeven als reactie op een expliciete gebruikersactie om de opdrachten aan te vragen; Bijvoorbeeld een klik met de rechtermuisknop. Dit komt overeen met het traditionele concept van een contextmenu.

U kunt de CommandBarFlyout op beide manieren gebruiken, of zelfs een combinatie van de twee.

Een flyout voor de opdrachtbalk maken

Open de App WinUI 3 Gallery en bekijk de CommandBarFlyout in actie

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Download de app uit de Microsoft Store of haal de broncode op GitHub-

In dit voorbeeld ziet u hoe u een flyout op de opdrachtbalk maakt en deze zowel proactief als reactief gebruikt. Wanneer op de afbeelding wordt getikt, wordt de flyout weergegeven in de samengevouwen modus. Wanneer het als contextmenu wordt weergegeven, wordt de flyout in uitgevouwen vorm getoond. In beide gevallen kan de gebruiker de flyout uitvouwen of samenvouwen nadat deze is geopend.

<Grid>
    <Grid.Resources>
        <CommandBarFlyout x:Name="ImageCommandsFlyout">
            <AppBarButton Label="Favorite" Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
            <AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy"/>
            <AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share"/>
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Rotate" Icon="Rotate"/>
                <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 ziet u het uitklapmenu van de opdrachtbalk in de samengevouwen staat.

voorbeeld van een flyout van een samengevouwen opdrachtbalk

Hier ziet u dezelfde flyout van de opdrachtbalk in de uitgevouwen staat die secundaire opdrachten toont.

voorbeeld van een flyout van een uitgevouwen opdrachtbalk

Opdrachten proactief weergeven

Wanneer u contextuele opdrachten proactief weergeeft, moeten alleen de primaire opdrachten standaard worden weergegeven (de flyout van de opdrachtbalk moet worden samengevouwen). Plaats de belangrijkste opdrachten in de verzameling primaire opdrachten en aanvullende opdrachten die traditioneel in een contextmenu in de verzameling secundaire opdrachten worden geplaatst.

Als u opdrachten proactief wilt weergeven, behandelt u meestal de Click- of Tapped-gebeurtenis om de flyout van de opdrachtbalk weer te geven. Stel de ShowMode- van de flyout in op Transient of TransientWithDismissOnPointerMoveAway- om de flyout in de samengevouwen modus te openen zonder de focus in te nemen.

Tekstbesturingselementen hebben een eigenschap SelectionFlyout-. Wanneer u een flyout aan deze eigenschap toewijst, wordt deze automatisch weergegeven wanneer tekst wordt geselecteerd.

Opdrachten reactief weergeven

Wanneer u contextopdrachten reactief weergeeft, als een contextmenu, worden de secundaire opdrachten standaard weergegeven (de flyout van de opdrachtbalk moet worden uitgevouwen). In dit geval kan de flyout op de opdrachtbalk zowel primaire als secundaire opdrachten bevatten, of alleen secundaire opdrachten.

Als u opdrachten in een contextmenu wilt weergeven, wijst u de flyout meestal toe aan de ContextFlyout-eigenschap van een UI-element. Op deze manier wordt het openen van de flyout afgehandeld door het element en hoeft u niets meer te doen.

Als u het uitklapmenu zelf weergeeft (bijvoorbeeld bij een RightTapped-gebeurtenis), stelt u de ShowMode van het uitklapmenu in op Standard om het in de uitgevouwen modus te openen en het focus te geven.

Advies

Zie Flyoutsvoor meer informatie over opties bij het weergeven van een flyout en hoe u de plaatsing van de flyout kunt beheren.

Een altijd uitgevouwen CommandBarFlyout weergeven

Wanneer u primaire en secundaire opdrachten in een CommandBarFlyout hebt, wordt de knop 'meer weergeven' [...] standaard weergegeven en kan worden gebruikt om de secundaire opdrachten uit te vouwen en samen te vouwen. Als u uw CommandBarFlyout in de uitgevouwen modus wilt houden en de secundaire opdrachten altijd wilt weergeven, kunt u de eigenschap CommandBarFlyout.AlwaysExpanded gebruiken.

Wanneer de eigenschap AlwaysExpanded is ingesteld op true, wordt de knop Meer weergeven niet weergegeven en kan de gebruiker de uitgebreide status van het besturingselement niet in- of uitschakelen. De CommandBarFlyout wordt nog steeds zoals gebruikelijk gesloten wanneer op een secundaire opdracht wordt geklikt of wanneer de gebruiker buiten de flyout klikt.

Deze eigenschap heeft alleen een effect als de CommandBarFlyout secundaire opdrachten heeft. Als er geen secundaire opdrachten zijn, bevindt de CommandBarFlyout zich altijd in de samengevouwen modus.

Tip

U kunt commandbarFlyout nog steeds programmatisch samenvouwen en uitvouwen door de eigenschap IsOpen in te stellen, zelfs wanneer de eigenschap AlwaysExpanded is ingesteld op true.

Opdrachten en inhoud

Het besturingselement CommandBarFlyout heeft twee eigenschappen die u kunt gebruiken om opdrachten en inhoud toe te voegen: PrimaryCommands en SecondaryCommands.

Standaard worden opdrachtbalkitems toegevoegd aan de verzameling PrimaryCommands. Deze opdrachten worden weergegeven op de opdrachtbalk en zijn zichtbaar in zowel de samengevouwen als de uitgevouwen modi. In tegenstelling tot CommandBar lopen primaire opdrachten niet automatisch over naar de secundaire opdrachten en worden ze mogelijk afgekapt.

U kunt ook opdrachten toevoegen aan de verzameling SecondaryCommands. Secundaire opdrachten worden weergegeven in het menugedeelte van het besturingselement en zijn alleen zichtbaar in de uitgevouwen modus.

Als er algemene opdrachten zijn (zoals opdrachten kopiëren, knippen, plakken, verwijderen, delen of tekst selecteren) die belangrijk zijn voor het scenario, wordt u aangeraden ze toe te voegen als primaire opdrachten in plaats van secundaire opdrachten.

Knoppen in de app-balk

U kunt PrimaryCommands en SecondaryCommands direct vullen met AppBarButton, AppBarToggleButtonen AppBarSeparator elementen.

De besturingselementen voor de knoppen op de app-balk worden gekenmerkt door een pictogram en tekstlabel. Deze besturingselementen zijn geoptimaliseerd voor gebruik in een opdrachtbalk en hun uiterlijk verandert afhankelijk van of het besturingselement wordt weergegeven op de opdrachtbalk of het overloopmenu.

  • In Windows App SDK 1.5 en hoger: knoppen voor de app-balk die als primaire opdrachten worden gebruikt, worden weergegeven op de opdrachtbalk met zowel het tekstlabel als het pictogram (indien beide zijn ingesteld). 
    <AppBarButton Icon="Copy" Label="Copy"/>
  • In Windows App SDK 1.4 en eerder: knoppen voor de app-balk die als primaire opdrachten worden gebruikt, worden weergegeven in de opdrachtbalk met alleen het bijbehorende pictogram; het tekstlabel wordt niet weergegeven. U wordt aangeraden een tooltip te gebruiken om een tekstbeschrijving van de opdracht weer te geven, zoals hier getoond. 
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
  • Knoppen op de app-balk die als secundaire opdrachten worden gebruikt, worden weergegeven in het menu, waarbij zowel het label als het pictogram zichtbaar zijn.

Pictogrammen

Overweeg pictogrammen voor menu-items op te geven voor:

  • De meest gebruikte items.
  • Menu-items waarvan het pictogram standaard of bekend is.
  • Menu-items waarvan het pictogram goed illustreert wat de opdracht doet.

Het is niet verplicht om pictogrammen te bieden voor opdrachten die geen standaardvisualisatie hebben. Cryptische pictogrammen zijn niet nuttig, zorgen voor visuele rommel en voorkomen dat gebruikers zich op de belangrijke menu-items concentreren.

Andere inhoud

U kunt andere besturingselementen toevoegen aan een flyout op de opdrachtbalk door ze in een AppBarElementContainer te verpakken. Hiermee kunt u besturingselementen toevoegen, zoals DropDownButton of SplitButton, of containers zoals StackPanel- toevoegen om complexere gebruikersinterface te maken.

Om te worden toegevoegd aan de primaire of secundaire opdrachtverzamelingen van een flyout op de opdrachtbalk, moet een element de interface ICommandBarElement implementeren. AppBarElementContainer is een wrapper waarmee deze interface wordt geïmplementeerd, zodat u een element aan een opdrachtbalk kunt toevoegen, zelfs als de interface zelf niet wordt geïmplementeerd.

Hier wordt een AppBarElementContainer gebruikt om extra elementen toe te voegen aan een flyout op de opdrachtbalk. Er wordt een SplitButton toegevoegd aan de primaire opdrachten om tekstuitlijning in te schakelen. Een StackPanel wordt toegevoegd aan de secundaire opdrachten om een complexere indeling voor zoombesturingselementen mogelijk te maken.

Fooi

Standaard zien elementen die zijn ontworpen voor het app-canvas er mogelijk niet goed uit in een opdrachtbalk. Wanneer u een element toevoegt met Behulp van AppBarElementContainer, zijn er enkele stappen die u moet uitvoeren om het element te laten overeenkomen met andere opdrachtbalkelementen:

  • Overschrijf de standaardborstels met lichtgewicht stijl om ervoor te zorgen dat de achtergrond en rand van het element overeenkomen met de knoppen op de app-balk.
  • Pas de grootte en positie van het element aan.
  • Wikkel iconen in een Viewbox met een breedte en hoogte van 16px.

Notitie

In dit voorbeeld ziet u alleen de gebruikersinterface van de flyout van de opdrachtbalk. Er worden geen van de weergegeven opdrachten uitgevoerd. Zie voor meer informatie over het implementeren van de opdrachten knoppen en de basisprincipes van het ontwerpen van opdrachten.

<CommandBarFlyout>
    <AppBarButton Icon="Cut" Label="Cut" ToolTipService.ToolTip="Cut"/>
    <AppBarButton Icon="Copy" Label="Copy" ToolTipService.ToolTip="Copy"/>
    <AppBarButton Icon="Paste" Label="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>

Dit is de flyout van de samengevouwen opdrachtbalk met een open SplitButton.

Een flyout van een taakbalk met een splitsknop

Hier ziet u het uitklapmenu van de uitgevouwen opdrachtbalk met een aangepaste zoominterface in het menu.

de flyout van een opdrachtbalk met complexe UI-

Een contextmenu maken met alleen secundaire opdrachten

U kunt een flyout op de opdrachtbalk gebruiken met alleen secundaire opdrachten om een contextmenu te maken dat hetzelfde uiterlijk en gedrag van menu flyoutbereikt.

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

Dit is het uitklapmenu op de opdrachtbalk als contextmenu.

Een opdrachtbalkflyout met alleen secundaire opdrachten

U kunt ook een CommandBarFlyout met een DropDownButton gebruiken om een standaardmenu te maken.

<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 volgt een vervolgkeuzeknopmenu in een flyout op de opdrachtbalk.

Flyout van een opdrachtbalk met als vervolgkeuzeknopmenu

Flyouts op de opdrachtbalk voor tekstbesturingselementen

De TextCommandBarFlyout- is een gespecialiseerde flyout op de opdrachtbalk met opdrachten voor het bewerken van tekst. Elk tekstbesturingselement toont de TextCommandBarFlyout automatisch als contextmenu (klik met de rechtermuisknop) of wanneer tekst is geselecteerd. De flyout van de tekstopdrachtbalk past zich aan de tekstselectie aan om alleen relevante opdrachten weer te geven.

Hier volgt een flyout op de tekstopdrachtbalk voor tekstselectie.

Een flyout van een samengevouwen tekstcommando balk

Hier volgt een flyout van de uitgebreide tekstopdrachtbalk waarin de secundaire opdrachten worden weergegeven.

Flyout van een uitgevouwen tekstopdrachtbalk

Beschikbare opdrachten

In deze tabel ziet u de opdrachten die zijn opgenomen in een TextCommandBarFlyout en wanneer ze worden weergegeven.

Bevelen Weergegeven...
Vetgedrukt wanneer het tekstbesturingselement niet alleen-lezen is (alleen RichEditBox).
Cursief Wanneer het tekstvak niet op alleen-lezen staat (geldt alleen voor RichEditBox).
Onderstrepen wanneer de tekstcontrole niet in alleen-lezen modus is (alleen RichEditBox).
Proofing wanneer IsSpellCheckEnabled is true en verkeerd gespelde tekst is geselecteerd.
Snijden wanneer het tekstveld niet-leesbaar is en tekst is geselecteerd.
Kopiëren wanneer tekst is geselecteerd.
Plakken wanneer het tekstbesturingselement niet alleen-lezen is en het klembord inhoud heeft.
Ongedaan maken wanneer er een actie is die ongedaan kan worden gemaakt.
Alles selecteren wanneer tekst kan worden geselecteerd.

Aangepaste tekstflyouts voor de werkbalk

TextCommandBarFlyout kan niet worden aangepast en wordt automatisch beheerd door elk tekstbesturingselement. U kunt de standaard TextCommandBarFlyout echter vervangen door aangepaste opdrachten.

  • Als u de standaard TextCommandBarFlyout wilt vervangen die wordt weergegeven in de tekstselectie, kunt u een aangepaste CommandBarFlyout (of een ander flyouttype) maken en deze toewijzen aan de eigenschap SelectionFlyout-. Als u SelectionFlyout instelt op null-, worden er geen opdrachten weergegeven bij de selectie.
  • Als u de standaard TextCommandBarFlyout wilt vervangen die als contextmenu wordt weergegeven, wijst u een aangepaste CommandBarFlyout (of een ander flyouttype) toe aan de eigenschap ContextFlyout op een tekstbesturingselement. Als u ContextFlyout instelt op null, verschijnt het flyoutmenu dat in eerdere versies van het tekstbesturingselement werd gebruikt in plaats van de TextCommandBarFlyout.

Licht sluiten

Licht sluit besturingselementen, zoals menu's, contextmenu's en andere flyouts, traptoetsenbord en gamepadfocus in de tijdelijke gebruikersinterface totdat deze is gesloten. Als visuele aanwijzing voor dit gedrag tekenen 'light dismiss'-besturingselementen op de Xbox een overlay die de zichtbaarheid van de gebruikersinterface buiten het bereik dimt. Dit gedrag kan worden gewijzigd met de eigenschap LightDismissOverlayMode. Tijdelijke UIs tekenen standaard de overlay met lichte verwerping op Xbox (Auto), maar niet op andere apparaatfamilies. U kunt ervoor kiezen om te zorgen dat de overlay altijd Aan of altijd Uitis.

<CommandBarFlyout LightDismissOverlayMode="Off" /> >

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Het CommandBarFlyout-besturingselement voor UWP-apps is opgenomen als onderdeel van WinUI 2. Zie WinUI 2voor meer informatie, inclusief installatie-instructies. API's voor dit besturingselement bestaan zowel in de Windows.UI.Xaml.Controls (UWP) als in de Microsoft.UI.Xaml.Controls (WinUI) namespaces.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie hoekstraalvoor meer informatie.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

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

<muxc:CommandBarFlyout />