Панель команд

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

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

CommandBar — это гибкий облегченный элемент управления общего назначения, способный отображать как сложное содержимое, такое как изображения и текстовые блоки, так и простые команды, такие как элементы управления AppBarButton, AppBarToggleButton и AppBarSeparator.

Примечание

XAML одновременно поддерживает элементы управления AppBar и CommandBar. Элемент AppBar следует использовать, только если вы выполняете обновление универсального приложения для Windows 8, использующего AppBar, и хотите свести изменения к минимуму. Для новых приложений Windows 10 рекомендуется использовать элемент управления CommandBar. В этом документе предполагается, что вы используете элемент управления CommandBar.

Структура

По умолчанию на панели команд отображается строка кнопок значков и необязательная кнопка "Дополнительно", которая представлена многоточием [...]. Ниже приведена панель команд, созданная в примере кода, показанного ниже. Она отображается в закрытом компактном состоянии.

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

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

Панель команд разделена на четыре основных области:

• Область содержимого находится в левой части панели. Она отображается, если заполнено значение свойства Content.
• Область главных команд выровнена по правому краю панели. Она отображается, если заполнено значение свойства PrimaryCommands.
• Кнопка "просмотреть больше" [...] отображается в правой части панели. При нажатии кнопки "Просмотреть больше" [...] отображаются основные метки команд и открывается меню переполнения при наличии дополнительных команд. Эта кнопка не будет видна при отсутствии меток основных команд или второстепенных меток. Чтобы изменить это поведение по умолчанию, используйте свойство OverflowButtonVisibility.
• Меню переполнения отображается только в том случае, если открыта панель команд и заполнено значение свойства SecondaryCommands. Основные команды будут перемещаться в область SecondaryCommands, если пространство ограничено. Чтобы изменить это поведение по умолчанию, используйте свойство IsDynamicOverflowEnabled.

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

Размещение

Панели команд можно разместить в верхней части окна приложения, в нижней части окна приложения и в строках, встроив их в элемент управления макетом, например Grid.row.

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

Используйте API DiagonalSizeInInches для определения физических размеров экрана.

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

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

UWP и WinUI 2

Важно!

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

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

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

• API UWP:класс CommandBar, класс AppBarButton, класс AppBarToggleButton, класс AppBarSeparator
• Откройте приложение коллекции WinUI 2 и просмотрите CommandBar в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

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

Для автоматического оформления элемента управления SplitButton в CommandBar требуется использовать элемент управления SplitButton из WinUI 2.6 или более поздней версии.

Создание панели команд

• Важные API:класс CommandBar, класс AppBarButton, класс AppBarToggleButton, класс AppBarSeparator

Откройте приложение коллекции WinUI 3 и просмотрите CommandBar в действии.

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

В этом примере создается панель команд, показанная ранее.

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>

    <CommandBar.Content>
        <TextBlock Text="Now playing..." Margin="12,14"/>
    </CommandBar.Content>
</CommandBar>

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

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

Команды

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

На самых маленьких экранах (шириной в 320 эффективных пикселей) на панели команд умещаются не более 4 основных команд.

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

При необходимости можно перемещать команды между областями PrimaryCommands и SecondaryCommands программным путем.

• Если существует команда, которая будет доступна на всех страницах, лучше размещать ее в одном и том же месте.
• Рекомендуется располагать команды "Принять", "Да" и "ОК" слева от команд "Отклонить", "Нет" и "Отмена". Такая последовательность позволяет пользователям уверенно перемещаться по системе и применять полученный опыт навигации в разных приложениях.

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

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

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

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

Значки

Значки в области основных команд отображаются в размере 20х20 пикселей, а в меню переполнения — в размере 16x16 пикселей. При использовании SymbolIcon, FontIcon или PathIcon, когда команда переходит в область второстепенной команды, значок автоматически масштабируется до правильного размера без потери качества.

Дополнительные сведения и примеры установки значка см. в документации по классу AppBarButton.

Метки

Свойство IsCompact элемента AppBarButton определяет, будет ли отображаться метка. В элементе управления CommandBar панель команд автоматически перезаписывает свойство IsCompact кнопки при открытии и закрытии панели команд.

Для размещения подписей кнопок панели приложения используйте свойство DefaultLabelPosition элемента управления CommandBar.

<CommandBar DefaultLabelPosition="Right">
    <AppBarToggleButton Icon="Edit" Label="Edit"/>
    <AppBarToggleButton Icon="Share" Label="Share"/>
</CommandBar>

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

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

Метки кнопок должны быть короткими; желательно не более одного слова. Длинные метки, расположенные под значком, будут переноситься на несколько строк, увеличивая общую высоту открытой панели команд. Вы можете включить в текст метки символ мягкого переноса (0x00AD), чтобы обозначить границу знака, после которой должен происходить разрыв слова. В XAML это выражается с помощью escape-последовательности следующим образом:

<AppBarButton Icon="Back" Label="Areally&#x00AD;longlabel"/>

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

SplitButton

SplitButton можно отобразить в CommandBar с помощью встроенного SplitButtonCommandBarStyle и класса AppBarElementContainer. SplitButtonCommandBarStyle предоставляет визуальные элементы для SplitButton, чтобы выглядеть и чувствовать себя как AppBarButton, в то время как AppBarElementContainer является классом-оболочкой, предоставляющим функции, которые SplitButton должны действовать как AppBarButton.

Когда вы заключите Элемент SplitButton в AppBarElementContainer и поместите его в CommandBar, SplitButtonCommandBarStyle ресурс применяется автоматически.

В этом примере кода создается и отображается элемент SplitButton внутри панели CommandBar:

<CommandBar>
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy" Label="Copy"/>
    <AppBarElementContainer>
        <muxc:SplitButton ToolTipService.ToolTip="Insert" Content="Insert">
            <muxc:SplitButton.Flyout>
                <MenuFlyout Placement="RightEdgeAlignedTop">
                    <MenuFlyoutItem Text="Insert above"/>
                    <MenuFlyoutItem Text="Insert between"/>
                    <MenuFlyoutItem  Text="Insert below"/>
                </MenuFlyout>
            </muxc:SplitButton.Flyout>
        </muxc:SplitButton>
    </AppBarElementContainer>
    <AppBarButton Label="Select all"/>
    <AppBarButton Label="Delete" Icon="Delete"/>
</CommandBar>

Меню и всплывающие элементы

Используйте логическую группировку команд. Например, поместите команды "Ответить", "Ответить всем" и "Переслать" в меню "Ответ". Хотя обычно кнопка панели приложения активирует одну команду, ее можно использовать для отображения элемента MenuFlyout или Flyout с пользовательским содержимым.

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

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

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

Если для свойства ClosedDisplayMode установлено значение Compact, содержимое может обрезаться, при превышении компактного размера панели команд. Вы должны обрабатывать события Opening и Closed, чтобы отображать и скрывать части пользовательского интерфейса в области содержимого так, чтобы они не обрезались. Дополнительную информацию можно найти в разделе Открытое и закрытое состояние.

Открытое и закрытое состояние

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

Пользователь может переключаться между этими состояниями, нажав кнопку "Просмотреть больше" [...]. Вы можете переключаться между ними программным способом, используя свойство IsOpen.

События Opening, Opened, Closing и Closed позволяют реагировать на открытие и закрытие панели команд.

• События Opening и Closing возникают до начала анимации перехода.
• События Opened и Closed возникают после завершения перехода.

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

<CommandBar Opening="CommandBar_Opening"
            Closing="CommandBar_Closing">
    <AppBarButton Icon="Accept" Label="Accept"/>
    <AppBarButton Icon="Edit" Label="Edit"/>
    <AppBarButton Icon="Save" Label="Save"/>
    <AppBarButton Icon="Cancel" Label="Cancel"/>
</CommandBar>

private void CommandBar_Opening(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 1.0;
}

private void CommandBar_Closing(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 0.5;
}

IsSticky

Если пользователь взаимодействует с другими частями приложения, когда открыта панель команд, она автоматически закрывается. Это поведение называется исчезновением. Вы можете управлять исчезновением, установив свойство IsSticky. Если IsSticky="true"задано значение , панель остается открытой, пока пользователь не нажмет кнопку "Дополнительно" [...] или не выберет элемент в меню переполнения.

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

Режим отображения

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

• Компактный. Режим по умолчанию. Отображает содержимое, основные значки команд без меток и кнопку "дополнительно" [...].
• Минимальный: отображает только тонкую полосу, которая выступает в качестве кнопки "просмотреть больше" [...]. Пользователь может открыть панель нажатием в любом месте панели.
• Скрытый. Панель команд в закрытом состоянии не отображается. Это может быть полезно для отображения контекстно-зависимых команд с помощью встроенной панели команд. В этом случае следует открыть панель команд программным способом, установив свойство IsOpen или изменив значение свойства ClosedDisplayMode на Minimal или Compact.

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

<StackPanel Width="300"
            GotFocus="EditStackPanel_GotFocus"
            LostFocus="EditStackPanel_LostFocus">
    <CommandBar x:Name="FormattingCommandBar" ClosedDisplayMode="Hidden">
        <AppBarButton Icon="Bold" Label="Bold" ToolTipService.ToolTip="Bold"/>
        <AppBarButton Icon="Italic" Label="Italic" ToolTipService.ToolTip="Italic"/>
        <AppBarButton Icon="Underline" Label="Underline" ToolTipService.ToolTip="Underline"/>
    </CommandBar>
    <RichEditBox Height="200"/>
</StackPanel>

private void EditStackPanel_GotFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
}

private void EditStackPanel_LostFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;
}

Примечание

Реализация команд редактирования выходит за рамки область этого примера. Дополнительные сведения см. в статье RichEditBox.

Несмотря на то, что режимы Minimal и Hidden могут быть полезны в некоторых ситуациях, необходимо помнить о том, что сокрытие всех действий может поставить пользователя в замешательство.

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

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

• Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.
• Пример команд XAML

Похожие статьи

• Основы проектирования команд в приложениях для Windows
• Всплывающее меню панели команд
• Всплывающий элемент и строка меню
• Класс MenuFlyout
• CommandBar class (Класс CommandBar)