Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
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.
Net als CommandBar heeft CommandBarFlyoutde eigenschappen PrimaryCommands en SecondaryCommands 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 een knop 'Meer weergeven', die door beletseltekens [...] wordt weergegeven. 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.
De flyout van 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 op de juiste manier geconfigureerd om automatisch tekstopdrachten 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 niet met de opdrachten interageert, worden deze verwijderd.
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.
Maak een flyout op de opdrachtbalk
De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op
In dit voorbeeld ziet u hoe u een flyout op de opdrachtbalk maakt en deze zowel proactief als reactief gebruikt. Wanneer je op de afbeelding tikt, wordt de flyout weergegeven in de samengevouwen modus. Wanneer hij als contextmenu wordt weergegeven, verschijnt de flyout in uitgevouwen stand. 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 de opdrachtbalkflyout in zijn ingeklapte toestand.
Hier ziet u dezelfde uitgevouwen flyout van de opdrachtbalk met secundaire opdrachten.
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.
Om opdrachten proactief weer te geven, handelt u doorgaans de Klikken of Tikken gebeurtenis af om de flyout van de opdrachtbalk weer te geven. Stel de ShowMode van de flyout in op Tijdelijk of TransientWithDismissOnPointerMoveAway om de flyout in de samengevouwen modus te openen zonder de focus te nemen.
Tekstbesturingselementen hebben een SelectionFlyout-eigenschap . Wanneer u een flyout aan deze eigenschap toewijst, wordt deze automatisch weergegeven wanneer tekst wordt geselecteerd.
Opdrachten reactief weergeven
Wanneer u contextuele opdrachten reactief weergeeft, bijvoorbeeld als een contextmenu, worden de secundaire opdrachten standaard weergegeven (de opdrachtenbalk-flyout moet standaard zijn uitgevouwen). In dit geval heeft de flyout op de opdrachtbalk mogelijk zowel primaire als secundaire opdrachten, of alleen secundaire opdrachten.
Als u opdrachten in een contextmenu wilt weergeven, wijst u de flyout doorgaans toe aan de eigenschap ContextFlyout van een UI-element. Op deze manier wordt het openen van de flyout door het element afgehandeld, en hoeft u verder niets te doen.
Als u de flyout zelf weergeeft (bijvoorbeeld bij een RightTapped-gebeurtenis ), stelt u de ShowMode van de flyout in op Standard om de flyout in de uitgevouwen modus te openen en deze focus te geven.
Aanbeveling
Zie Flyouts voor meer informatie over opties bij het weergeven van een flyout en het beheren van de plaatsing van de flyout.
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 wilt behouden in de uitgevouwen modus en de secundaire opdrachten altijd wilt weergeven, kunt u de CommandBarFlyout.AlwaysExpanded eigenschap gebruiken.
Wanneer de AlwaysExpanded eigenschap is ingesteld op true, wordt de knop "Meer weergeven" niet weergegeven en kan de gebruiker de uitgebreide status van het besturingselement niet wijzigen. 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.
Aanbeveling
U kunt de CommandBarFlyout nog steeds programmatisch samenvouwen en uitvouwen door de eigenschap IsOpen in te stellen, zelfs wanneer de AlwaysExpanded eigenschap 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 de items van de opdrachtbalk 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 kopiëren, knippen, plakken, verwijderen, delen of tekstselectieopdrachten) die belangrijk zijn voor het scenario, is het raadzaam om ze toe te voegen als primaire opdrachten in plaats van secundaire opdrachten.
Knoppen in de app-balk
U kunt de PrimaryCommands en SecondaryCommands rechtstreeks vullen met de knoppen AppBarButton, AppBarToggleButton en AppBarSeparator.
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 op de app-balk die worden gebruikt als primaire opdrachten, 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 op de app-balk die worden gebruikt als primaire opdrachten, worden weergegeven in de opdrachtbalk met alleen hun pictogram; het tekstlabel wordt niet weergegeven. U wordt aangeraden een knopinfo te gebruiken om een tekstbeschrijving van de opdracht weer te geven, zoals hier wordt weergegeven.
<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.
Icons
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.
Aanbeveling
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.
Opmerking
In dit voorbeeld ziet u alleen de flyout van de opdrachtbalk, de opdrachten die worden weergegeven, worden niet geïmplementeerd. Zie Knoppen en De basisbeginselen van commandodesign voor meer informatie over het implementeren van de 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.
Hier ziet u de flyout van de uitgevouwen opdrachtbalk met aangepaste zoomgebruikersinterface in het menu.
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 de flyout van het menu bereikt.
<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 is de flyout van de opdrachtbalk als contextmenu.
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 is een dropdownmenu in een flyout op de opdrachtwerkbalk.
Flyouts op de opdrachtbalk voor tekstbesturingselementen
De TextCommandBarFlyout is een gespecialiseerde flyout op de opdrachtbalk die opdrachten bevat 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 verschijnt een flyout bij tekstselectie op de tekstopdrachtbalk.
Hier volgt een flyout van de uitgebreide tekstopdrachtbalk waarin de secundaire opdrachten worden weergegeven.
Beschikbare opdrachten
In deze tabel ziet u de opdrachten die zijn opgenomen in een TextCommandBarFlyout en wanneer ze worden weergegeven.
| Command | Getoond... |
|---|---|
| Vetgedrukt | wanneer het tekstbesturingselement niet-leesbaar is (alleen voor RichEditBox). |
| Cursief | wanneer het tekstbesturingselement niet alleen-lezen is (alleen RichEditBox). |
| Onderstrepen | wanneer het tekstbesturingselement niet alleen-lezen is (alleen RichEditBox). |
| Proofing | wanneer IsSpellCheckEnabled true is en verkeerd gespelde tekst is geselecteerd. |
| Snijden | wanneer het tekstbesturingselement niet alleen-lezen is en tekst is geselecteerd. |
| Kopiëren | wanneer tekst is geselecteerd. |
| Plakken | wanneer het tekstveld niet alleen-lezend is en het klembord inhoud bevat. |
| Ongedaan | wanneer er een actie is die ongedaan kan worden gemaakt. |
| Alles selecteren | wanneer tekst kan worden geselecteerd. |
Aangepaste tekst flyouts op de opdrachtbalk
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 in 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 in een tekstbesturingselement. Als u ContextFlyout instelt op null, wordt het menu flyout van eerdere versies van het tekstbesturingselement weergegeven in plaats van de TextCommandBarFlyout.
Licht sluiten
Besturingselementen met lichte sluiting, zoals menu's, contextmenu's en andere flyouts, houden de focus van toetsenbord en gamepad binnen de tijdelijke gebruikersinterface gevangen totdat deze worden 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 . Standaard zullen tijdelijke UIs de lichte overlay op Xbox (Auto) tekenen, maar niet op andere apparaatfamilies. U kunt ervoor kiezen om af te dwingen dat de overlay altijd aan of altijd uit is.
<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 2 voor meer informatie, inclusief installatie-instructies. API's voor dit besturingselement zijn beschikbaar in de Windows.UI.Xaml.Controls (UWP) en Microsoft.UI.Xaml.Controls (WinUI) namespaces.
- UWP-API's:Klasse CommandBarFlyout, Klasse TextCommandBarFlyout, AppBarButton-klasse, AppBarToggleButton-klasse, AppBarSeparator-klasse
- WinUI 2 Apis:CommandBarFlyout-klasse, Klasse TextCommandBarFlyout
- Open de App WinUI 2 Gallery en bekijk de CommandBarFlyout in actie. De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.
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 Hoekstraal voor 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 />
Verwante artikelen
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer