Всплывающее меню панели командCommand bar flyout

Всплывающее меню панели команд позволяет обеспечить пользователям удобный доступ к распространенным задачам, отображая команды в плавающей панели инструментов, связанной с элементом на холсте пользовательского интерфейса.The command bar flyout lets you provide users with easy access to common tasks by showing commands in a floating toolbar related to an element on your UI canvas.

Развернутое всплывающее меню панели команд для работы с текстом

Как и элемент CommandBar, CommandBarFlyout содержит свойства PrimaryCommands и SecondaryCommands , которые можно использовать для добавления команд.Like CommandBar, CommandBarFlyout has PrimaryCommands and SecondaryCommands properties you can use to add commands. Вы можете разместить команды в одной из коллекций или же в обеих.You can place commands in either collection, or both. Условие и способ отображения основных и второстепенных команд зависит от режима отображения.When and how the primary and secondary commands are displayed depends on the display mode.

Для всплывающего меню панели команд доступно два режима отображения: свернутый и развернутый.The command bar flyout has two display modes: collapsed and expanded.

  • В свернутом режиме отображаются только основные команды.In the collapsed mode, only the primary commands are shown. Если всплывающее меню панели команд содержит основные и второстепенные команды, отображается кнопка "Показать больше" в виде многоточия [***].If your command bar flyout has both primary and secondary commands, a "see more" button, which is represented by an ellipsis [***], is displayed. Нажав ее, пользователь может получить доступ к второстепенным командам путем перехода в развернутый режим.This lets the user get access to the secondary commands by transitioning to expanded mode.
  • В развернутом режиме отображаются как основные, так и второстепенные команды.In the expanded mode, both the primary and secondary commands are shown. (Если элемент управления содержит только второстепенные элементы, они отображаются примерно так же, как в элементе управления MenuFlyout.)(If the control has only secondary items, they are shown in a way similar to the MenuFlyout control.)

Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library

Логотип WinUI

Элемент управления CommandBarFlyout является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений для Windows.The CommandBarFlyout control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.For more info, including installation instructions, see Windows UI Library.

API библиотеки пользовательского интерфейса Windows : класс CommandBarFlyout, класс TextCommandBarFlyout.Windows UI Library APIs : CommandBarFlyout class, TextCommandBarFlyout class

API платформы : класс CommandBarFlyout, класс TextCommandBarFlyout, класс AppBarButton, класс AppBarToggleButton, класс AppBarSeparator.Platform APIs : CommandBarFlyout class, TextCommandBarFlyout class, AppBarButton class, AppBarToggleButton class, AppBarSeparator class

Для использования всплывающего меню панели (CommandBarFlyout) требуется Windows 10, версия 1809 (SDK 17763) или более поздняя, либо библиотека пользовательского интерфейса Windows.CommandBarFlyout requires Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

Выбор правильного элемента управленияIs this the right control?

С помощью элемента управления CommandBarFlyout можно отобразить для пользователя коллекцию команд, таких как кнопки и пункты меню, в контексте элемента на холсте приложения.Use the CommandBarFlyout control to show a collection of commands to the user, such as buttons and menu items, in the context of an element on the app canvas.

TextCommandBarFlyout отображает команды для работы с текстом в элементах управления TextBox, TextBlock, RichEditBox, RichTextBlock и PasswordBox.The TextCommandBarFlyout displays text commands in TextBox, TextBlock, RichEditBox, RichTextBlock, and PasswordBox controls. Команды автоматически настраиваются в соответствии с текущим выделением текста.The commands are automatically configured appropriately to the current text selection. С помощью CommandBarFlyout в элементах управления текстом можно заменять команды для работы с текстом по умолчанию.Use a CommandBarFlyout to replace the default text commands on text controls.

Чтобы отобразить контекстно-зависимые команды в элементах списка, выполните инструкции, приведенные в статье Контекстно-зависимые команды для коллекций и списков.To show contextual commands on list items follow the guidance in Contextual commanding for collections and lists.

CommandBarFlyout и MenuFlyoutCommandBarFlyout vs MenuFlyout

Для отображения команд в контекстном меню вы можете воспользоваться CommandBarFlyout или MenuFlyout.To show commands in a context menu, you can use CommandBarFlyout or MenuFlyout. Рекомендуем использовать элемент управления CommandBarFlyout, потому что он предоставляет больше функциональных возможностей, чем MenuFlyout.We recommend CommandBarFlyout because it provides more functionality than MenuFlyout. Вы можете использовать CommandBarFlyout только со второстепенными командами, что обеспечит поведение и внешний вид MenuFlyout, или же использовать полнофункциональное всплывающее меню панели команд с основными и второстепенными командами.You can use CommandBarFlyout with only secondary commands to get the behavior and look of a MenuFlyout, or use the full command bar flyout with both primary and secondary commands.

Дополнительные сведения см. в следующих статьях: Всплывающие элементы, Меню и контекстные меню, Панель команд.For related info, see Flyouts, Menus and context menus, and Command bars.

ПримерыExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Если у вас установлено приложение коллекции элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть CommandBarFlyout в действии.If you have the XAML Controls Gallery app installed, click here to open the app and see the CommandBarFlyout in action.

Упреждающий и реактивный вызовProactive vs. reactive invocation

Существует два способа вызвать всплывающее меню, связанное с элементом на холсте пользовательского интерфейса: упреждающий вызов и реактивный вызов.There are typically two ways to invoke a flyout or menu that's associated with an element on your UI canvas: proactive invocation and reactive invocation.

При упреждающем вызове команды появляются автоматически, когда пользователь взаимодействует с элементом, с которым связаны команды.In proactive invocation, commands appear automatically when the user interacts with the item that the commands are associated with. Например, команды форматирования текста могут появиться при выборе текста в текстовом поле.For example, text formatting commands might pop up when the user selects text in a text box. В этом случае всплывающее меню панели команд не имеет фокуса.In this case, the command bar flyout does not take focus. Вместо этого в нем содержатся соответствующие команды рядом с элементом, с которым взаимодействует пользователь.Instead, it presents relevant commands close to the item the user is interacting with. Если пользователь не взаимодействует с командами, они отклоняются.If the user doesn't interact with the commands, they are dismissed.

При реактивном вызове команды отображаются в ответ на явное действие пользователя для запроса команд, например щелчок правой кнопкой мыши.In reactive invocation, commands are shown in response to an explicit user action to request the commands; for example, a right-click. Этот способ соответствует традиционной концепции контекстного меню.This corresponds to the traditional concept of a context menu.

Вы можете использовать CommandBarFlyout одним из этих способов или же двумя.You can use the CommandBarFlyout in either way, or even a mixture of the two.

Создание всплывающего меню панели командCreate a command bar flyout

В этом примере показано создание всплывающего меню панели команд и его использование двумя способами: выполнение упреждающего и реактивного вызова.This example shows how to create a command bar flyout and use it both proactively and reactively. При касании изображения всплывающее меню отображается в свернутом режиме.When the image is tapped, the flyout is shown in its collapsed mode. При отображении в виде контекстного меню всплывающий элемент отображается в развернутом режиме.When shown as a context menu, the flyout is shown in its expanded mode. В любом случае пользователь может развернуть или свернуть всплывающее меню после открытия.In either case, the user can expand or collapse the flyout after it's opened.

Пример свернутого всплывающего меню панели команд

Свернутое всплывающее меню панели командA collapsed command bar flyout

Пример развернутого всплывающего меню панели команд

Развернутое всплывающее меню панели командAn expanded command bar flyout

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

Упреждающее отображение командShow commands proactively

При упреждающем отображении контекстно-зависимых команд по умолчанию должны отображаться только основные команды (всплывающее меню панели команд должно быть свернуто).When you show contextual commands proactively, only the primary commands should be shown by default (the command bar flyout should be collapsed). Поместите наиболее важные команды в коллекцию основных команд, а дополнительные команды, которые по умолчанию содержатся в контекстном меню, в коллекцию второстепенных команд.Place the most important commands in the primary commands collection, and additional commands that would traditionally go in a context menu into the secondary commands collection.

Для упреждающего отображения команд обычно необходимо обработать событие Click или Tapped, чтобы отобразить всплывающее меню панели команд.To proactively show commands, you typically handle the Click or Tapped event to show the command bar flyout. Установите для параметра всплывающего меню ShowMode значение Transient или TransientWithDismissOnPointerMoveAway , чтобы открыть всплывающее меню в свернутом режиме без фокуса.Set the flyout's ShowMode to Transient or TransientWithDismissOnPointerMoveAway to open the flyout in its collapsed mode without taking focus.

Начиная с Windows 10 Insider Preview, элементы управления текстом содержат свойство SelectionFlyout.Starting in the Windows 10 Insider Preview, text controls have a SelectionFlyout property. Если назначить всплывающее меню этому свойству, это меню будет автоматически отображаться при выделении текста.When you assign a flyout to this property, it is automatically shown when text is selected.

Реактивное отображение командShow commands reactively

При реактивном отображении контекстно-зависимых команд второстепенные команды отображаются в виде контекстного меню по умолчанию (всплывающее меню панели команд должно быть развернуто).When you show contextual commands reactively, as a context menu, the secondary commands are shown by default (the command bar flyout should be expanded). В этом случае всплывающее меню панели команд может содержать как основные, так и второстепенные команды или же только последние.In this case, the command bar flyout might have both primary and secondary commands, or secondary commands only.

Чтобы отобразить команды в контекстном меню, обычно необходимо назначить всплывающему меню свойство ContextFlyout элемента пользовательского интерфейса.To show commands in a context menu, you typically assign the flyout to the ContextFlyout property of a UI element. Таким образом, открытие всплывающего меню обрабатывается элементом, и вам не нужно выполнять дополнительных действий.This way, opening the flyout is handled by the element, and you don't need to do anything more.

Если вы сами обрабатываете отображение всплывающего меню (например, в случае события RightTapped), укажите для параметра всплывающего элемента ShowMode значение Standard , чтобы открыть всплывающее меню в развернутом режиме и перевести на него фокус.If you handle showing the flyout yourself (for example, on a RightTapped event), set the flyout's ShowMode to Standard to open the flyout in its expanded mode and give it focus.

Совет

Дополнительные сведения о параметрах при отображении всплывающего меню и об управлении размещением всплывающего меню см. в этой статье.For more info about options when showing a flyout and how to control placement of the flyout, see Flyouts.

Команды и содержимоеCommands and content

Элемент управления CommandBarFlyout имеет два свойства, которые можно использовать для добавления команд и содержимого: PrimaryCommands и SecondaryCommands.The CommandBarFlyout control has 2 properties you can use to add commands and content: PrimaryCommands and SecondaryCommands.

По умолчанию элементы панели команд добавляются в коллекцию PrimaryCommands.By default, command bar items are added to the PrimaryCommands collection. Эти команды отображаются на панели команд как в свернутом, так и в развернутом режимах.These commands are shown in the command bar and are visible in both the collapsed and expanded modes. В отличие от CommandBar, в CommandBarFlyout основные команды не переходят к второстепенным автоматически, а также их можно усечь.Unlike CommandBar, primary commands do not automatically overflow to the secondary commands and might be truncated.

Вы можете также добавлять команды в коллекцию SecondaryCommands.You can also add commands to the SecondaryCommands collection. Второстепенные команды отображаются в определенной части меню элемента управления и только в развернутом режиме.Secondary commands are shown in the menu portion of the control and are visible only in the expanded mode.

Кнопки панели приложенияApp bar buttons

Вы можете присвоить свойствам PrimaryCommands и SecondaryCommands значения AppBarButton, AppBarToggleButton и AppBarSeparator, соответствующие элементам управления.You can populate the PrimaryCommands and SecondaryCommands directly with AppBarButton, AppBarToggleButton, and AppBarSeparator controls.

Кнопки панели приложения характеризуются значком и текстовой меткой.The app bar button controls are characterized by an icon and text label. Эти элементы управления оптимизированы для использования на панели команд и меняют свой вид в зависимости от того, отображается ли элемент управления на панели команд или в меню переполнения.These controls are optimized for use in a command bar, and their appearance changes depending on whether the control is shown in the command bar or the overflow menu.

  • Кнопки панели приложения, используемые в качестве основных команд, отображаются на панели команд только со значком — текстовая метка не отображается.App bar buttons used as primary commands are shown in the command bar with only their icon; the text label is not shown. Рекомендуем использовать подсказку для отображения текстового описания команды, как показано ниже.We recommend that you use a tooltip to show a text description of the command, as shown here.
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
    
  • Кнопки панели приложения, используемые в качестве второстепенных команд, отображаются в меню с меткой и значком.App bar buttons used as secondary commands are shown in the menu, with both the label and icon visible.

Другое содержимоеOther content

Вы можете добавить другие элементы управления во всплывающее меню панели команд, поместив их в оболочку AppBarElementContainer.You can add other controls to a command bar flyout by wrapping them in an AppBarElementContainer. Таким образом вы сможете добавлять элементы управления, такие как DropDownButton или SplitButton, или же контейнеры, такие как StackPanel, для создания более сложного пользовательского интерфейса.This lets you add controls like DropDownButton or SplitButton, or add containers like StackPanel to create more complex UI.

Для добавления в коллекцию основных или второстепенных команд всплывающего меню панели команд элемент должен реализовывать интерфейс ICommandBarElement.In order to be added to the primary or secondary command collections of a command bar flyout, an element must implement the ICommandBarElement interface. AppBarElementContainer — это оболочка, реализующая данный интерфейс, которая позволяет добавить элемент на панель команд, даже если он не реализует сам интерфейс.AppBarElementContainer is a wrapper that implements this interface so you can add an element to a command bar even if it doesn't implement the interface itself.

В данном случае AppBarElementContainer используется для добавления дополнительных элементов во всплывающее меню панели команд.Here, an AppBarElementContainer is used to add extra elements to a command bar flyout. Элемент управления SplitButton добавляется к основным командам, что обеспечивает выбор цвета.A SplitButton is added to the primary commands to allow selection of colors. StackPanel добавляется ко второстепенным командам, чтобы обеспечить более сложную структуру для элементов управления масштабом.A StackPanel is added to the secondary commands to allow a more complex layout for zoom controls.

Совет

По умолчанию элементы, разработанные для холста приложения, могут иметь неправильный вид на панели команд.By default, elements designed for the app canvas might not look right in a command bar. При добавлении элементов с помощью AppBarElementContainer вы должны выполнить приведенные ниже шаги, чтобы элемент соответствовал другим элементам на панели команд:When you add an element using AppBarElementContainer, there are some steps you should take to make the element match other command bar elements:

  • Переопределите кисти по умолчанию, задав упрощенный стиль, чтобы фон и граница элемента соответствовали кнопкам на панели приложения.Override the default brushes with lightweight styling to make the element's background and border match the app bar buttons.
  • Скорректируйте размер и положение элемента.Adjust the size and position of the element.
  • Перенесите значки в окно просмотра с шириной и высотой 16 пикселей.Wrap icons in a Viewbox with a Width and Height of 16px.

Примечание

В этом примере показан лишь пользовательский интерфейс всплывающего меню панели задач, а не реализация отображаемых команд.This example shows only the command bar flyout UI, it does not implement any of the commands that are shown. Дополнительные сведения о реализации команд см. в статьях Кнопки и Основы проектирования команд в приложениях UWP.For more info about implementing the commands, see Buttons and Command design basics.

Всплывающее меню панели команд с разворачивающейся кнопкой

Свернутое всплывающее меню панели команд с открытым элементом управления SplitButtonA collapsed command bar flyout with an open SplitButton

Всплывающее меню панели команд со сложным интерфейсом

Развернутое всплывающее меню панели команд с настраиваемым пользовательским интерфейсом масштабирования в менюAn expanded command bar flyout with custom zoom UI in the menu

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

Создание контекстного меню, содержащего лишь второстепенные командыCreate a context menu with secondary commands only

Вы можете использовать элемент CommandBarFlyout, содержащий лишь второстепенные команды, в качестве контекстного меню вместо MenuFlyout.You can use a CommandBarFlyout with only secondary commands as a context menu, in place of a MenuFlyout.

Всплывающее меню панели команд, содержащее лишь второстепенные команды

Всплывающее меню панели команд в виде контекстного менюCommand bar flyout as a context menu

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

Вы также можете использовать CommandBarFlyout с DropDownButton для создания стандартного меню.You can also use a CommandBarFlyout with a DropDownButton to create a standard menu.

Всплывающий элемент панели команд с раскрывающимся меню кнопок

Раскрывающееся меню кнопок во всплывающем элементе панели командA drop down button menu in a command bar flyout

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

Всплывающее меню панели команд для элементов управления текстомCommand bar flyouts for text controls

TextCommandBarFlyout — это специальное всплывающее меню панели команд, содержащее команды для редактирования текста.The TextCommandBarFlyout is a specialized command bar flyout that contains commands for editing text. Каждый элемент управления текстом автоматически (или при выделении текста) отображает TextCommandBarFlyout в виде контекстного меню (щелчок правой кнопкой мыши).Each text control shows the TextCommandBarFlyout automatically as a context menu (right-click), or when text is selected. Всплывающее меню панели команд для работы с текстом адаптируется к выделенному тексту и отображает только соответствующие команды.The text command bar flyout adapts to the text selection to only show relevant commands.

Свернутое всплывающее меню панели команд для работы с текстом

Всплывающее меню панели команд для работы с текстом, отображающееся при выделении текстаA text command bar flyout on text selection

Развернутое всплывающее меню панели команд для работы с текстом

Развернутое всплывающее меню панели команд для работы с текстомAn expanded text command bar flyout

Доступные командыAvailable commands

В приведенной ниже таблице указаны команды, содержащиеся в TextCommandBarFlyout, и условие их отображения.This table shows the commands that are included in a TextCommandBarFlyout, and when they are shown.

КомандаCommand Условие отображенияShown...
Полужирный шрифтBold Элемент управления текстом не является доступным только для чтения (только RichEditBox).when the text control is not read-only (RichEditBox only).
КурсивItalic Элемент управления текстом не является доступным только для чтения (только RichEditBox).when the text control is not read-only (RichEditBox only).
UnderlineUnderline Элемент управления текстом не является доступным только для чтения (только RichEditBox).when the text control is not read-only (RichEditBox only).
Проверка правописанияProofing Для параметра IsSpellCheckEnabled задано значение true , и выбран текст с ошибкой.when IsSpellCheckEnabled is true and misspelled text is selected.
ВырезатьCut Элемент управления текстом не является доступным только для чтения, и текст выделен.when the text control is not read-only and text is selected.
КопироватьCopy Выделен текст.when text is selected.
ВставитьPaste Элемент управления текстом не является доступным только для чтения, и в буфере обмена есть содержимое.when the text control is not read-only and the clipboard has content.
ОтменаUndo Наличие действия, которое можно отменить.when there is an action that can be undone.
Выбрать всеSelect all Текст может быть выбран.when text can be selected.

Настраиваемые всплывающие меню панели команд для работы с текстомCustom text command bar flyouts

Настройка элемента TextCommandBarFlyout невозможна. Он автоматически управляется каждым элементом управления текстом.TextCommandBarFlyout can't be customized, and is managed automatically by each text control. Тем не менее, вы можете заменить TextCommandBarFlyout по умолчанию на настраиваемые команды.However, you can replace the default TextCommandBarFlyout with custom commands.

  • Чтобы заменить элемент TextCommandBarFlyout по умолчанию, отображаемый при выделении текста, вы можете создать настраиваемый элемент CommandBarFlyout (или другой тип всплывающего меню) и назначить его свойству SelectionFlyout.To replace the default TextCommandBarFlyout that's shown on text selection, you can create a custom CommandBarFlyout (or other flyout type) and assign it to the SelectionFlyout property. Если для SelectionFlyout установлено значение null , при выделении команды отображаться не будут.If you set SelectionFlyout to null , no commands are shown on selection.
  • Чтобы заменить элемент TextCommandBarFlyout по умолчанию, отображаемый в виде контекстного меню, назначьте настраиваемый элемент CommandBarFlyout (или другой тип всплывающего меню) свойству ContextFlyout в элементе управления текстом.To replace the default TextCommandBarFlyout that's shown as the context menu, assign a custom CommandBarFlyout (or other flyout type) to the ContextFlyout property on a text control. Если для ContextFlyout установлено значение null , всплывающее меню, отображаемое в предыдущих версиях элемента управления текстом, отображается вместо TextCommandBarFlyout.If you set ContextFlyout to null , the menu flyout shown in previous versions of the text control is shown instead of the TextCommandBarFlyout.

Получение примера кодаGet the sample code