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

Всплывающее меню панели команд позволяет обеспечить пользователям удобный доступ к распространенным задачам, отображая команды в плавающей панели инструментов, связанной с элементом на холсте пользовательского интерфейса.

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

Как и элемент CommandBar, CommandBarFlyout содержит свойства PrimaryCommands и SecondaryCommands, которые можно использовать для добавления команд. Вы можете разместить команды в одной из коллекций или же в обеих. Условие и способ отображения основных и второстепенных команд зависит от режима отображения.

Для всплывающего меню панели команд доступно два режима отображения: свернутый и развернутый.

  • В свернутом режиме отображаются только основные команды. Если всплывающий элемент панели команд содержит как основные, так и вторичные команды, отображается кнопка "Дополнительно", представленная многоточием [...]. Нажав ее, пользователь может получить доступ к второстепенным командам путем перехода в развернутый режим.
  • В развернутом режиме отображаются как основные, так и второстепенные команды. (Если элемент управления содержит только второстепенные элементы, они отображаются примерно так же, как в элементе управления MenuFlyout.)

Выбор правильного элемента управления

Используйте всплывающий элемент командной строки, чтобы показать пользователю коллекцию команд, например кнопок и пунктов меню, в контексте элемента на холсте приложения.

Всплывающий элемент командной строки — это рекомендуемый элемент управления для создания контекстных меню. Это позволяет добавлять в качестве основных команд общие команды (например, "Копировать", "Вырезать", "Вставить", "Удалить", "Общий доступ" или "Выделение текста"), которые являются наиболее контекстно релевантными для сценария контекстного меню, так что они будут отображаться в виде одной горизонтальной строки во всплывающем элементе панели команд. TextCommandBarFlyout уже настроен соответствующим образом для автоматического отображения текстовых команд в элементах управления TextBox, TextBlock, RichEditBox, RichTextBlock и PasswordBox. CommandBarFlyout можно использовать для замены текстовых команд по умолчанию в текстовых элементах управления.

Чтобы отобразить контекстно-зависимые команды в элементах списка, выполните инструкции, приведенные в статье Контекстно-зависимые команды для коллекций и списков.

Упреждающий и реактивный вызов

Существует два способа вызвать всплывающее меню, связанное с элементом на холсте пользовательского интерфейса: упреждающий вызов и реактивный вызов.

При упреждающем вызове команды появляются автоматически, когда пользователь взаимодействует с элементом, с которым связаны команды. Например, команды форматирования текста могут появиться при выборе текста в текстовом поле. В этом случае всплывающее меню панели команд не имеет фокуса. Вместо этого в нем содержатся соответствующие команды рядом с элементом, с которым взаимодействует пользователь. Если пользователь не взаимодействует с командами, они отклоняются.

При реактивном вызове команды отображаются в ответ на явное действие пользователя для запроса команд, например щелчок правой кнопкой мыши. Этот способ соответствует традиционной концепции контекстного меню.

Вы можете использовать CommandBarFlyout одним из этих способов или же двумя.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

Элемент управления CommandBarFlyout для приложений UWP входит в состав библиотеки пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API для этого элемента управления существуют в пространствах имен Windows.UI.Xaml.Controls (UWP) и Microsoft.UI.Xaml.Controls (WinUI).

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Чтобы использовать код из этой статьи с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2 .

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

<muxc:CommandBarFlyout />

Создание всплывающего меню панели команд

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub

В этом примере показано создание всплывающего меню панели команд и его использование двумя способами: выполнение упреждающего и реактивного вызова. При касании изображения всплывающее меню отображается в свернутом режиме. При отображении в виде контекстного меню всплывающий элемент отображается в развернутом режиме. В любом случае пользователь может развернуть или свернуть всплывающее меню после открытия.

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

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

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

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

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

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

При упреждающем отображении контекстно-зависимых команд по умолчанию должны отображаться только основные команды (всплывающее меню панели команд должно быть свернуто). Поместите наиболее важные команды в коллекцию основных команд, а дополнительные команды, которые по умолчанию содержатся в контекстном меню, в коллекцию второстепенных команд.

Для упреждающего отображения команд обычно необходимо обработать событие Click или Tapped, чтобы отобразить всплывающее меню панели команд. Установите для параметра всплывающего меню ShowMode значение Transient или TransientWithDismissOnPointerMoveAway, чтобы открыть всплывающее меню в свернутом режиме без фокуса.

Элементы управления "Текст" имеют свойство SelectionFlyout . Если назначить всплывающее меню этому свойству, это меню будет автоматически отображаться при выделении текста.

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

При реактивном отображении контекстно-зависимых команд второстепенные команды отображаются в виде контекстного меню по умолчанию (всплывающее меню панели команд должно быть развернуто). В этом случае всплывающее меню панели команд может содержать как основные, так и второстепенные команды или же только последние.

Чтобы отобразить команды в контекстном меню, обычно необходимо назначить всплывающему меню свойство ContextFlyout элемента пользовательского интерфейса. Таким образом, открытие всплывающего меню обрабатывается элементом, и вам не нужно выполнять дополнительных действий.

Если вы сами обрабатываете отображение всплывающего меню (например, в случае события RightTapped), укажите для параметра всплывающего элемента ShowMode значение Standard, чтобы открыть всплывающее меню в развернутом режиме и перевести на него фокус.

Совет

Дополнительные сведения о параметрах при отображении всплывающего меню и об управлении размещением всплывающего меню см. в этой статье.

Отображение постоянно развернутого объекта CommandBarFlyout

Если в commandBarFlyout есть основная и вторичная команды, по умолчанию отображается кнопка "Просмотреть дополнительно" [...] и ее можно использовать для развертывания и свертывания дополнительных команд. Если вы хотите оставить CommandBarFlyout в расширенном режиме и постоянно отображать дополнительные команды, можно использовать CommandBarFlyout.AlwaysExpanded свойство .

Если свойству AlwaysExpanded присвоено значение true, кнопка "Дополнительно" не отображается, и пользователь не может переключить развернутое состояние элемента управления. CommandBarFlyout по-прежнему закрывается, как обычно, при щелчке дополнительной команды или щелчке пользователем за пределами всплывающего элемента.

Это свойство действует только в том случае, если CommandBarFlyout содержит вторичные команды. Если дополнительных команд нет, CommandBarFlyout всегда будет находиться в свернутом режиме.

Совет

Вы по-прежнему можете свернуть и развернуть CommandBarFlyout программным способом, задав свойство IsOpen , даже если свойству AlwaysExpanded присвоено значение true.

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

Элемент управления CommandBarFlyout имеет два свойства, которые можно использовать для добавления команд и содержимого: PrimaryCommands и SecondaryCommands.

По умолчанию элементы панели команд добавляются в коллекцию PrimaryCommands. Эти команды отображаются на панели команд как в свернутом, так и в развернутом режимах. В отличие от CommandBar, в CommandBarFlyout основные команды не переходят к второстепенным автоматически, а также их можно усечь.

Вы можете также добавлять команды в коллекцию SecondaryCommands. Второстепенные команды отображаются в определенной части меню элемента управления и только в развернутом режиме.

Если существуют общие команды (например, команды копирования, вырезанности, вставки, удаления, общего доступа или выбора текста), которые важны для сценария, рекомендуется добавлять их в качестве основных, а не вторичных команд.

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

Вы можете присвоить свойствам PrimaryCommands и SecondaryCommands значения AppBarButton, AppBarToggleButton и AppBarSeparator, соответствующие элементам управления.

Кнопки панели приложения характеризуются значком и текстовой меткой. Эти элементы управления оптимизированы для использования на панели команд и меняют свой вид в зависимости от того, отображается ли элемент управления на панели команд или в меню переполнения.

  • Кнопки панели приложения, используемые в качестве основных команд, отображаются на панели команд только со значком — текстовая метка не отображается. Рекомендуется использовать подсказку для отображения текстового описания команды, как показано ниже.
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
    
  • Кнопки панели приложения, используемые в качестве второстепенных команд, отображаются в меню с меткой и значком.

Значки

Рекомендуем добавлять значки пунктов меню для:

  • наиболее часто используемых пунктов;
  • пунктов меню, значок которых является стандартным или хорошо известным;
  • пунктов меню, значок которых хорошо иллюстрирует предназначение команды.

Вы не обязаны добавлять значки для команд без стандартных зрительных образов. Загадочные значки бесполезны, создают визуальные помехи и не позволяют пользователям сосредоточиться на важных пунктах меню.

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

Вы можете добавить другие элементы управления во всплывающее меню панели команд, поместив их в оболочку AppBarElementContainer. Таким образом вы сможете добавлять элементы управления, такие как DropDownButton или SplitButton, или же контейнеры, такие как StackPanel, для создания более сложного пользовательского интерфейса.

Для добавления в коллекцию основных или второстепенных команд всплывающего меню панели команд элемент должен реализовывать интерфейс ICommandBarElement. AppBarElementContainer — это оболочка, которая реализует этот интерфейс, поэтому вы можете добавить элемент на панель команд, даже если он не реализует сам интерфейс.

В данном случае AppBarElementContainer используется для добавления дополнительных элементов во всплывающее меню панели команд. Элемент управления SplitButton добавляется к основным командам, что обеспечивает выбор цвета. StackPanel добавляется ко второстепенным командам, чтобы обеспечить более сложную структуру для элементов управления масштабом.

Совет

По умолчанию элементы, разработанные для холста приложения, могут иметь неправильный вид на панели команд. При добавлении элементов с помощью AppBarElementContainer вы должны выполнить приведенные ниже шаги, чтобы элемент соответствовал другим элементам на панели команд:

  • Переопределите кисти по умолчанию, задав упрощенный стиль, чтобы фон и граница элемента соответствовали кнопкам на панели приложения.
  • Скорректируйте размер и положение элемента.
  • Перенесите значки в окно просмотра с шириной и высотой 16 пикселей.

Примечание

В этом примере показан лишь пользовательский интерфейс всплывающего меню панели задач, а не реализация отображаемых команд. Дополнительные сведения о реализации команд см. в статьях Кнопки и Основы проектирования команд в приложениях UWP.

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

Ниже приведен всплывающее окно с свернутой панелью команд с открытым элементом SplitButton.

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

Ниже приведен развернутый всплывающий элемент панели команд с пользовательским пользовательским интерфейсом масштабирования в меню.

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

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

Вы можете использовать всплывающий элемент командной строки только с дополнительными командами, чтобы создать контекстное меню, которое обеспечивает тот же внешний вид и поведение всплывающего меню.

<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 для создания стандартного меню.

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

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

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

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

TextCommandBarFlyout — это специальное всплывающее меню панели команд, содержащее команды для редактирования текста. Каждый элемент управления текстом автоматически (или при выделении текста) отображает TextCommandBarFlyout в виде контекстного меню (щелчок правой кнопкой мыши). Всплывающее меню панели команд для работы с текстом адаптируется к выделенному тексту и отображает только соответствующие команды.

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

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

Ниже приведен развернутый текстовый всплывающий элемент панели команд, в которой отображаются дополнительные команды.

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

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

В приведенной ниже таблице указаны команды, содержащиеся в TextCommandBarFlyout, и условие их отображения.

Команда Условие отображения
Полужирный шрифт Элемент управления текстом не является доступным только для чтения (только RichEditBox).
Курсив Элемент управления текстом не является доступным только для чтения (только RichEditBox).
Underline Элемент управления текстом не является доступным только для чтения (только RichEditBox).
Проверка правописания Для параметра IsSpellCheckEnabled задано значение true, и выбран текст с ошибкой.
Вырезать Элемент управления текстом не является доступным только для чтения, и текст выделен.
Копировать Выделен текст.
Вставить Элемент управления текстом не является доступным только для чтения, и в буфере обмена есть содержимое.
Отмена Наличие действия, которое можно отменить.
Выбрать все Текст может быть выбран.

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

Настройка элемента TextCommandBarFlyout невозможна. Он автоматически управляется каждым элементом управления текстом. Тем не менее, вы можете заменить TextCommandBarFlyout по умолчанию на настраиваемые команды.

  • Чтобы заменить элемент TextCommandBarFlyout по умолчанию, отображаемый при выделении текста, вы можете создать настраиваемый элемент CommandBarFlyout (или другой тип всплывающего меню) и назначить его свойству SelectionFlyout. Если для SelectionFlyout установлено значение null, при выделении команды отображаться не будут.
  • Чтобы заменить элемент TextCommandBarFlyout по умолчанию, отображаемый в виде контекстного меню, назначьте настраиваемый элемент CommandBarFlyout (или другой тип всплывающего меню) свойству ContextFlyout в элементе управления текстом. Если для ContextFlyout установлено значение null, всплывающее меню, отображаемое в предыдущих версиях элемента управления текстом, отображается вместо TextCommandBarFlyout.

Исчезновение

Элементы управления , такие как меню, контекстные меню и другие всплывающие элементы, закрывают клавиатуру и фокус геймпада в временном пользовательском интерфейсе, пока не будут закрыты. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на Xbox отображают наложение, затемняющее видимость вне области действия пользовательского интерфейса. Это поведение можно изменить с помощью свойства LightDismissOverlayMode . По умолчанию во временно отображаемых элементах пользовательского интерфейса наложение с исчезновением используется на Xbox (автоматически), но не в других семействах устройств. Вы можете принудительно настроить постоянное включение или отключение наложения.

<CommandBarFlyout LightDismissOverlayMode="Off" /> >

Получение примера кода