Not
Åtkomst till denna sida kräver auktorisation. Du kan prova att logga in eller byta katalog.
Åtkomst till denna sida kräver auktorisation. Du kan prova att byta katalog.
Med den utfällbara kommandofältet kan du ge användarna enkel åtkomst till vanliga uppgifter genom att visa kommandon i ett flytande verktygsfält som är relaterat till ett element på användargränssnittets arbetsyta.
Precis som CommandBar har CommandBarFlyout egenskaper för PrimaryCommands och SecondaryCommands som du kan använda för att lägga till kommandon. Du kan placera kommandon i antingen en samling eller båda. När och hur de primära och sekundära kommandona visas beror på visningsläget.
Den utfällbara kommandofältet har två visningslägen: ihopfällt och utvidgat.
- I det komprimerade läget visas endast de primära kommandona. Om den utfällbara kommandoraden har både primära och sekundära kommandon visas en "visa mer"-knapp, som representeras av en ellips [...]. På så sätt kan användaren få åtkomst till de sekundära kommandona genom att övergå till expanderat läge.
- I det expanderade läget visas både de primära och sekundära kommandona. (Om kontrollen bara har sekundära objekt visas de på ett sätt som liknar MenuFlyout-kontrollen.)
Är det här rätt kontroll?
Använd den utfällbara kommandoradskontrollen för att visa en samling kommandon för användaren, till exempel knappar och menyobjekt, i kontexten för ett element på apparbetsytan.
Utfällbar kommandorad är den rekommenderade kontrollen för att skapa snabbmenyer. Detta gör att de vanliga kommandona (till exempel kommandona Kopiera, Klipp ut, Klistra in, Ta bort, Dela eller textval) som är mest sammanhangsberoende för att snabbmenyns scenario ska läggas till som primära kommandon så att de visas som en enda vågrät rad i den utfällbara kommandofältet. TextCommandBarFlyout har redan konfigurerats på lämpligt sätt för att automatiskt visa textkommandon i kontrollerna TextBox, TextBlock, RichEditBox, RichTextBlock och PasswordBox. En CommandBarFlyout kan användas för att ersätta standardtextkommandona i textkontroller.
Om du vill visa kontextuella kommandon för listobjekt följer du vägledningen i Kontextuella kommandon för samlingar och listor.
Proaktivt kontra reaktivt anrop
Det finns vanligtvis två sätt att anropa en utfälld meny eller meny som är associerad med ett element på användargränssnittets arbetsyta: proaktivt anrop och reaktivt anrop.
I proaktivt anrop visas kommandon automatiskt när användaren interagerar med det objekt som kommandona är associerade med. Textformateringskommandon kan till exempel dyka upp när användaren väljer text i en textruta. I detta fall tar inte det utfällbara kommandofältet fokus. I stället visas relevanta kommandon nära det objekt som användaren interagerar med. Om användaren inte interagerar med kommandona avvisas de.
I reaktivt anrop visas kommandon som svar på en explicit användaråtgärd för att begära kommandona. till exempel ett högerklicka. Detta motsvarar det traditionella begreppet en snabbmeny.
Du kan använda CommandBarFlyout på något sätt, eller till och med en blandning av de två.
Skapa en utfällbar kommandomeny
WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub
Det här exemplet visar hur du skapar ett utfällt kommandofält och använder det både proaktivt och reaktivt. När bilden trycks på visas den utfällbara menyn i dess komprimerade läge. När den visas som en snabbmeny visas den utfällbara menyn i det expanderade läget. I båda fallen kan användaren expandera eller komprimera den utfällbara menyn när den har öppnats.
<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);
}
Här är det utfällbara kommandofältet i dess komprimerade tillstånd.
Här är samma utfällbara kommandofält i utökat läge som visar sekundära kommandon.
Visa kommandon proaktivt
När du visar kontextuella kommandon proaktivt bör endast de primära kommandona visas som standard (den utfällbara kommandoraden bör minimeras). Placera de viktigaste kommandona i den primära kommandosamlingen och ytterligare kommandon som traditionellt skulle gå i en snabbmeny i den sekundära kommandosamlingen.
Om du vill visa kommandon proaktivt hanterar du vanligtvis Klick eller Tryck händelse för att visa det utfällbara kommandofältet. Ställ in utfällningsmenyns ShowMode till Transient eller TransientWithDismissOnPointerMoveAway för att öppna menyn i dess ihopvikta läge utan att ta fokus.
Textkontroller har egenskapen SelectionFlyout . När du tilldelar en utfällbar meny till den här egenskapen visas den automatiskt när text väljs.
Visa kommandon på ett reaktivt sätt
När du visar kontextuella kommandon reaktivt, såsom i en snabbmeny, visas de sekundära kommandona som standard (den utfällbara kommandoraden bör expanderas). I det här fallet kan ett utfällbart kommandofält ha både primära och sekundära kommandon eller endast sekundära kommandon.
Om du vill visa kommandon i en snabbmeny tilldelar du vanligtvis utfällbara objekt till egenskapen ContextFlyout för ett gränssnittselement. På så sätt hanteras öppningen av flyouten av elementet, och du behöver inte göra något mer.
Om du hanterar att visa flyout-menyn själv (till exempel på en RightTapped händelse), ställ in flyout-menyns ShowMode till Standard för att öppna flyout-menyn i expanderat läge så att den får fokus.
Tips/Råd
För mer information om alternativ för när du visar en utfällbar meny och hur du styr placeringen av den, se Utfällbara objekt.
Visa alltid en expanderad CommandBarFlyout
När du har primära och sekundära kommandon i en CommandBarFlyout visas knappen "see more" [...] som standard och kan användas för att expandera och komprimera de sekundära kommandona. Om du vill behålla CommandBarFlyout i expanderat läge och visa de sekundära kommandona hela tiden kan du använda CommandBarFlyout.AlwaysExpanded egenskapen .
När egenskapen AlwaysExpanded är inställd truepå visas inte knappen "visa mer" och användaren kan inte växla kontrollens expanderade tillstånd. CommandBarFlyout kommer som vanligt att stängas när ett sekundärt kommando klickas på eller när användaren klickar utanför den utfällbara menyn.
Den här egenskapen har bara en effekt om CommandBarFlyout har sekundära kommandon. Om det inte finns några sekundära kommandon är CommandBarFlyout alltid i komprimerat läge.
Tips/Råd
Du kan fortfarande komprimera och expandera CommandBarFlyout programmatiskt genom att ange egenskapen IsOpen även när AlwaysExpanded egenskapen är inställd på true.
Kommandon och innehåll
Kontrollen CommandBarFlyout har två egenskaper som du kan använda för att lägga till kommandon och innehåll: PrimaryCommands och SecondaryCommands.
Som standard läggs kommandofältobjekt till i samlingen PrimaryCommands. Dessa kommandon visas i kommandofältet och visas i både komprimerade och expanderade lägen. Till skillnad från CommandBar flödar inte primära kommandon automatiskt till de sekundära kommandona och kan bli avkortade.
Du kan också lägga till kommandon i samlingen SecondaryCommands . Sekundära kommandon visas i menydelen av kontrollen och visas endast i expanderat läge.
Om det finns vanliga kommandon (till exempel kommandona Kopiera, Klipp ut, Klistra in, Ta bort, Dela eller textval) som är viktiga för scenariot rekommenderar vi att du lägger till dem som primära kommandon i stället för sekundära kommandon.
Fältknappar för appar
Du kan fylla i kontrollerna PrimaryCommands och SecondaryCommands direkt med Kontrollerna AppBarButton, AppBarToggleButton och AppBarSeparator .
Knappkontrollerna i appfältet kännetecknas av en ikon och en textetikett. Dessa kontroller är optimerade för användning i ett kommandofält och deras utseende ändras beroende på om kontrollen visas i kommandofältet eller spillmenyn.
-
I Windows App SDK 1.5 och senare: Appfältknappar som används som primära kommandon visas i kommandofältet med både textetiketten och ikonen (om båda är inställda).
<AppBarButton Icon="Copy" Label="Copy"/> -
I Windows App SDK 1.4 och tidigare: Appfältknappar som används som primära kommandon visas i kommandofältet med bara deras ikon. textetiketten visas inte. Vi rekommenderar att du använder ett verktygstips för att visa en textbeskrivning av kommandot, så som visas här.
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/> - Appfältknappar som används som sekundära kommandon visas på menyn, med både etiketten och ikonen synliga.
Icons
Överväg att tillhandahålla menyalternativikoner för:
- De vanligaste objekten.
- Menyalternativ vars ikon är standard eller välkänd.
- Menyobjekt vars ikon väl illustrerar vad kommandot gör.
Känn dig inte skyldig att ange ikoner för kommandon som inte har någon standardvisualisering. Kryptiska ikoner är inte användbara, skapar visuell oreda och hindrar användarna från att fokusera på viktiga menyalternativ.
Annat innehåll
Du kan lägga till andra kontroller i en utfällbar kommandorad genom att omsluta dem i en AppBarElementContainer. På så sätt kan du lägga till kontroller som DropDownButton eller SplitButton, eller lägga till containrar som StackPanel för att skapa mer komplext användargränssnitt.
För att kunna läggas till i de primära eller sekundära kommandosamlingarna i en utfällbar kommandorad måste ett element implementera gränssnittet ICommandBarElement . AppBarElementContainer är en omslutning som implementerar det här gränssnittet så att du kan lägga till ett element i ett kommandofält även om det inte implementerar själva gränssnittet.
Här används en AppBarElementContainer för att lägga till extra element i en utfällbar kommandorad. En SplitButton läggs till i de primära kommandona för att aktivera textjustering. En StackPanel läggs till i de sekundära kommandona för att tillåta en mer komplex layout för zoomkontroller.
Tips/Råd
Som standard kanske element som är utformade för apparbetsytan inte ser rätt ut i ett kommandofält. När du lägger till ett element med AppBarElementContainer finns det några steg som du bör vidta för att göra så att elementet matchar andra kommandofältselement:
- Åsidosätt standardpenslar med lättformatering så att elementets bakgrund och kantlinje matchar appfältknapparna.
- Justera elementets storlek och position.
- Omslut ikoner i en vyruta med en bredd och höjd på 16px.
Anmärkning
Det här exemplet visar endast det utfällbara användargränssnittet för kommandofältet. Det implementerar inte något av de kommandon som visas. Mer information om hur du implementerar kommandona finns i Grundläggande om knappar och kommandodesign.
<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>
Här är det komprimerade utfällbara kommandofältet med en öppen "SplitButton".
Här är den expanderade utfällbara kommandoraden med anpassat zoomgränssnitt på menyn.
Skapa en snabbmeny med endast sekundära kommandon
Du kan använda en utfällbar kommandorad med endast sekundära kommandon för att skapa en snabbmeny som får samma utseende och beteende som den utfällbara menyn.
<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>
Här är det utfällbara kommandofältet som snabbmeny.
Du kan också använda en CommandBarFlyout med en DropDownButton för att skapa en standardmeny.
<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>
Här är en nedrullningsbar knappmeny i en utfällbar kommandorad.
Utfällbara kommandofält för textkontroller
TextCommandBarFlyout är en särskild utfällbar kommandorad som innehåller kommandon för att redigera text. Varje textkontroll visar TextCommandBarFlyout automatiskt som en snabbmeny (högerklicka) eller när text har valts. Den utfällbara textkommandoraden anpassas till textmarkeringen så att endast relevanta kommandon visas.
Här är en popup för textkommandon vid textval.
Här är en utökad utfällbar textkommandorad som visar de sekundära kommandona.
Tillgängliga kommandon
Den här tabellen visar kommandona som ingår i en TextCommandBarFlyout och när de visas.
| Command | Visad... |
|---|---|
| Djärv | när textkontrollen inte är skrivskyddad (endast RichEditBox). |
| Kursiv | när textkontrollen inte är skrivskyddad (endast RichEditBox). |
| Understrykning | när textkontrollen inte är skrivskyddad (endast RichEditBox). |
| Korrektur | när IsSpellCheckEnabled är sant och felstavad text har valts. |
| Klipp ut | när textkontrollen inte är skrivskyddad och text är markerad. |
| Kopiera | när text är markerad. |
| Klistra | när textkontrollen inte är skrivskyddad och urklipp har innehåll. |
| Undo | när det finns en åtgärd som kan ångras. |
| Välj alla | när text kan väljas. |
Utfällbara menyer för kommandon i anpassningsbart textfält
TextCommandBarFlyout kan inte anpassas och hanteras automatiskt av varje textkontroll. Du kan dock ersätta standardtextkommandot TextCommandBarFlyout med anpassade kommandon.
- Om du vill ersätta standardtextkommandot TextCommandBarFlyout som visas i textmarkeringen kan du skapa en anpassad CommandBarFlyout (eller annan utfällbar typ) och tilldela den till egenskapen SelectionFlyout . Om du anger SelectionFlyout till nullvisas inga kommandon vid markering.
- Om du vill ersätta standardtextkommandot TextCommandBarFlyout som visas som snabbmeny tilldelar du en anpassad CommandBarFlyout (eller annan utfällbar typ) till egenskapen ContextFlyout i en textkontroll. Om du anger ContextFlyout till null visas den utfällbara menyn i tidigare versioner av textkontrollen i stället för TextCommandBarFlyout.
Snabb avvisning
Lättavslutningskontroller, till exempel menyer, snabbmenyer och andra utfällbara objekt, fångar tangentbords- och handkontrollsfokus i det tillfälliga användargränssnittet tills de stängs. För att ge en visuell indikator för det här beteendet, kommer ljusavaktiveringskontroller på Xbox att rita ett överlägg som minskar synligheten för användargränssnitt som ligger utanför omfånget. Det här beteendet kan ändras med egenskapen LightDismissOverlayMode . Som standardinställning kommer tillfälliga UIs att visa ljusdämpande överlägg på Xbox (Auto) men inte på övriga enhetsfamiljer. Du kan välja att tvinga överlägget att alltid vara på eller alltid av.
<CommandBarFlyout LightDismissOverlayMode="Off" /> >
UWP och WinUI 2
Viktigt!
Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.
Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.
CommandBarFlyout-kontrollen för UWP-appar ingår som en del av WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för den här kontrollen finns i namnrymderna Windows.UI.Xaml.Controls (UWP) och Microsoft.UI.Xaml.Controls (WinUI).
- UWP-API:er:CommandBarFlyout-klass, TextCommandBarFlyout-klass, AppBarButton-klass, AppBarToggleButton-klass, AppBarSeparator-klass
- WinUI 2 Apis:CommandBarFlyout-klass, TextCommandBarFlyout-klass
- Öppna WinUI 2-galleriappen och se CommandBarFlyout i praktiken. WinUI 2-galleriappen innehåller interaktiva exempel på de flesta WinUI 2-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub.
Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. För mer information om hörnradien, se .
Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:CommandBarFlyout />
Relaterade artiklar
Samarbeta med oss på GitHub
Källan till detta innehåll finns på GitHub, där du också kan skapa och granska problem och pull requests. För mer information, se vår guide för bidragsgivare.
Windows developer