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

Панели команд предоставляют пользователям удобный доступ к самым распространенным задачам приложения.Command bars provide users with easy access to your app's most common tasks. Панели команд могут предоставлять доступ к командам приложения или страниц, работая с любым шаблоном навигации.Command bars can provide access to app-level or page-specific commands and can be used with any navigation pattern.

API платформы: класс CommandBar, класс AppBarButton, класс AppBarToggleButton, класс AppBarSeparatorPlatform APIs: CommandBar class, AppBarButton class, AppBarToggleButton class, AppBarSeparator class

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

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

CommandBar — это гибкий облегченный элемент управления общего назначения, способный отображать как сложное содержимое, такое как изображения и текстовые блоки, так и простые команды, такие как элементы управления AppBarButton, AppBarToggleButton и AppBarSeparator.The CommandBar control is a general-purpose, flexible, light-weight control that can display both complex content, such as images or text blocks, as well as simple commands such as AppBarButton, AppBarToggleButton, and AppBarSeparator controls.

Примечание

XAML одновременно поддерживает элементы управления AppBar и CommandBar.XAML provides both the AppBar control and the CommandBar control. Элемент AppBar следует использовать, только если вы выполняете обновление универсального приложения для Windows 8, использующего AppBar, и хотите свести изменения к минимуму.You should use the AppBar only when you are upgrading a Universal Windows 8 app that uses the AppBar, and need to minimize changes. Для новых приложений Windows 10 рекомендуется использовать элемент управления CommandBar.For new apps in Windows 10, we recommend using the CommandBar control instead. В этом документе предполагается, что вы используете элемент управления CommandBar.This document assumes you are using the CommandBar control.

ПримерыExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

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

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

Развернутое меню панели команд

СтруктураAnatomy

По умолчанию панель команд отображает строку кнопок со значками и необязательную кнопку "Дополнительно", на которой отображается символ трех точек [•••].By default, the command bar shows a row of icon buttons and an optional "see more" button, which is represented by an ellipsis [•••]. Так выглядит панель команд, созданная с помощью кода из примера, показанного ниже.Here's the command bar created by the example code shown later. Она отображается в закрытом компактном состоянии.It's shown in its closed compact state.

Снимок экрана: закрытая панель команд.

Панель команд также может отображаться в закрытом минимальном представлении, которое выглядит следующим образом.The command bar can also be shown in a closed minimal state that looks like this. Дополнительную информацию можно найти в разделе Открытое и закрытое состояние.See the Open and closed states section for more info.

Снимок экрана: панель команд в закрытом минимальном состоянии.

Так выглядит эта же панель команд в открытом состоянии.Here's the same command bar in its open state. Подписями обозначены основные компоненты элемента управления.The labels identify the main parts of the control.

Снимок экрана: командная строка в открытом состоянии.

Панель команд разделена на четыре основных области:The command bar is divided into 4 main areas:

  • Область содержимого находится в левой части панели.The content area is aligned to the left side of the bar. Она отображается, если заполнено значение свойства Content.It is shown if the Content property is populated.
  • Область главных команд выровнена по правому краю панели.The primary command area is aligned to the right side of the bar. Она отображается, если заполнено значение свойства PrimaryCommands.It is shown if the PrimaryCommands property is populated.
  • Кнопка "Дополнительно" [•••] отображается в правой части панели.The "see more" [•••] button is shown on the right of the bar. Кнопка "Дополнительно" [•••] отображает метки основных команд и открывает меню переполнения, если присутствуют второстепенные команды.Pressing the "see more" [•••] button reveals primary command labels and opens the overflow menu if there are secondary commands. Эта кнопка не будет видна при отсутствии меток основных команд или второстепенных меток.The button will not be visible when no primary command labels or secondary labels are present. Чтобы изменить это поведение по умолчанию, используйте свойство OverflowButtonVisibility.To change default behavior, use the OverflowButtonVisibility property.
  • Меню переполнения отображается только в том случае, если открыта панель команд и заполнено значение свойства SecondaryCommands.The overflow menu is shown only when the command bar is open and the SecondaryCommands property is populated. Основные команды будут перемещаться в область SecondaryCommands, если пространство ограничено.When space is limited, primary commands will move into the SecondaryCommands area. Чтобы изменить это поведение по умолчанию, используйте свойство IsDynamicOverflowEnabled.To change default behavior, use the IsDynamicOverflowEnabled property.

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

Создание панели командCreate a command bar

В этом примере создается панель команд, показанная ранее.This example creates the command bar shown previously.

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

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

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

КомандыCommands

По умолчанию элементы панели команд добавляются в коллекцию PrimaryCommands.By default, command bar items are added to the PrimaryCommands collection. Команды следует добавлять в порядке их важности, чтобы наиболее важные команды всегда были видимы.You should add commands in order of their importance so that the most important commands are always visible. При изменении ширины панели команд, например, когда пользователь изменяет размер окна приложения, основные команды динамически перемещаются между панелью команд и меню переполнения в точках разрыва.When the command bar width changes, such as when users resize their app window, primary commands dynamically move between the command bar and the overflow menu at breakpoints. Чтобы изменить это поведение по умолчанию, используйте свойство IsDynamicOverflowEnabled.To change this default behavior, use the IsDynamicOverflowEnabled property.

На самых маленьких экранах (шириной в 320 эффективных пикселей) на панели команд умещаются не более 4 основных команд.On the smallest screens (320 epx width), a maximum of 4 primary commands fit in the command bar.

Вы можете также добавлять команды в коллекцию SecondaryCommands, и эти элементы будут отображаться в меню переполнения.You can also add commands to the SecondaryCommands collection, which are shown in the overflow menu.

Пример панели команд с областью "Дополнительно" и значками

При необходимости можно перемещать команды между областями PrimaryCommands и SecondaryCommands программным путем.You can programmatically move commands between the PrimaryCommands and SecondaryCommands as needed.

  • Если существует команда, которая будет доступна на всех страницах, лучше размещать ее в одном и том же месте.If there is a command that would appear consistently across pages, it's best to keep that command in a consistent location.
  • Мы рекомендуем располагать команды "Принять", "Да" и "ОК" слева от команд "Отклонить", "Нет" и "Отмена". Стабильность позволяет пользователям более уверенно перемещаться по системе и применять полученный опыт навигации в разных приложениях.We recommended placing Accept, Yes, and OK commands to the left of Reject, No, and Cancel. Consistency gives users the confidence to move around the system and helps them transfer their knowledge of app navigation from app to app.

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

Свойствам PrimaryCommands и SecondaryCommands можно присвоить только значения AppBarButton, AppBarToggleButton и AppBarSeparator, соответствующие командным элементам.Both the PrimaryCommands and SecondaryCommands can be populated only with AppBarButton, AppBarToggleButton, and AppBarSeparator command elements.

Кнопки панели приложения характеризуются значком и текстовой меткой.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 used in the command bar or the overflow menu.

Размер значков в меню переполнения — 16x16 пикселей, что меньше, чем значки в области основных команд (20х20 пикселей).The size of the icons in the overflow menu is 16x16px, which is smaller than the icons in the primary command area (which are 20x20px). При использовании SymbolIcon, FontIcon или PathIcon, когда команда переходит в область второстепенной команды, значок автоматически масштабируется до правильного размера без потери качества.If you use SymbolIcon, FontIcon, or PathIcon, the icon will automatically scale to the correct size with no loss of fidelity when the command enters the secondary command area.

Метки кнопокButton labels

Свойство IsCompact элемента AppBarButton определяет, будет ли отображаться метка.The AppBarButton IsCompact property determines whether the label is shown. В элементе управления CommandBar панель команд автоматически перезаписывает свойство IsCompact кнопки при открытии и закрытии панели команд.In a CommandBar control, the command bar overwrites the button's IsCompact property automatically as the command bar is opened and closed.

Для размещения подписей кнопок панели приложения используйте свойство DefaultLabelPosition элемента управления CommandBar.To position app bar button labels, use CommandBar's DefaultLabelPosition property.

<CommandBar DefaultLabelPosition="Right">
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle"/>
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat"/>
</CommandBar>

Панель команд с подписями справа

В больших окнах попробуйте переместить метки вправо от значков кнопок на панели приложения, чтобы улучшить восприятие.On larger windows, consider moving labels to the right of app bar button icons to improve legibility. Подписи в нижней части требуют от пользователя открытия панели команд для их отображения, тогда как при расположении справа подписи видны, даже если панель команд закрыта.Labels on the bottom require users to open the command bar to reveal labels, while labels on the right are visible even when command bar is closed.

В меню переполнения метки по умолчанию размещаются справа от значков, а LabelPosition игнорируется.In overflow menus, labels are positioned to the right of icons by default, and LabelPosition is ignored. Вы можете настроить оформление, задав для свойства CommandBarOverflowPresenterStyle значение Style, которое указывает на CommandBarOverflowPresenter.You can adjust the styling by setting the CommandBarOverflowPresenterStyle property to a Style that targets the CommandBarOverflowPresenter.

Метки кнопок должны быть короткими; желательно не более одного слова.Button labels should be short, preferably a single word. Длинные метки, расположенные под значком, будут переноситься на несколько строк, увеличивая общую высоту открытой панели команд.Longer labels below an icon will wrap to multiple lines, increasing the overall height of the opened command bar. Вы можете включить в текст метки символ мягкого переноса (0x00AD), чтобы обозначить границу знака, после которой должен происходить разрыв слова.You can include a soft-hyphen character (0x00AD) in the text for a label to hint at the character boundary where a word break should occur. В XAML это выражается с помощью escape-последовательности следующим образом:In XAML, you express this using an escape sequence, like this:

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

При переносе текста метки в указанном месте она выглядит следующим образом.When the label wraps at the hinted location, it looks like this.

Кнопка панели приложения с перенесенным текстом метки

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

Используйте логическую группировку команд. Например, поместите команды "Ответить", "Ответить всем" и "Переслать" в меню "Ответ".Consider logical groupings for the commands, such as placing Reply, Reply All, and Forward in a Respond menu. Хотя обычно кнопка панели приложения активирует одну команду, ее можно использовать для отображения элемента MenuFlyout или Flyout с пользовательским содержимым.While typically an app bar button activates a single command, an app bar button can be used to show a MenuFlyout or Flyout with custom content.

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

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

Вы можете добавить в область содержимого любые элементы XAML, установив свойство Content.You can add any XAML elements to the content area by setting the Content property. Если необходимо добавить более одного элемента, вам понадобится разместить элементы в контейнере панели и сделать панель единственным дочерним элементом свойства Content.If you want to add more than one element, you need to place them in a panel container and make the panel the single child of the Content property.

Содержимое не обрезается, если включено динамическое переполнение, поскольку основные команды перемещаются в меню переполнения.When dynamic overflow is enabled, content will not clip because primary commands can move into the overflow menu. В противном случае основные команды имеют приоритет и это может привести к обрезке содержимого.Otherwise, primary commands take precedence and may cause the content to be clipped.

Если для свойства ClosedDisplayMode установлено значение Compact, содержимое может обрезаться, при превышении компактного размера панели команд.When the ClosedDisplayMode is Compact, the content can be clipped if it is larger than the compact size of the command bar. Вы должны обрабатывать события Opening и Closed, чтобы отображать и скрывать части пользовательского интерфейса в области содержимого так, чтобы они не обрезались.You should handle the Opening and Closed events to show or hide parts of the UI in the content area so that they aren't clipped. Дополнительную информацию можно найти в разделе Открытое и закрытое состояние.See the Open and closed states section for more info.

Открытое и закрытое состояниеOpen and closed states

Панель команд может быть открыта или закрыта.The command bar can be open or closed. Когда она открыта, здесь отображаются основные кнопки с текстовыми метками, а также она открывает меню переполнения (если имеются дополнительные команды).When it's open, it shows primary command buttons with text labels and it opens the overflow menu (if there are secondary commands). В командной строке меню переполнения открывается вверх (выше основных команд) или вниз (ниже основных команд).The command bar opens the overflow menu upwards (above the primary commands) or downwards (below the primary commands). По умолчанию используется направление вверх, но если для такого открытия меню переполнения места недостаточно, оно открывается вниз.The default direction is up, but if there's not enough space to open the overflow menu upwards, the command bar opens it downwards.

Пользователь может переключиться между этими состояниями, выбрав кнопку "Дополнительно" [•••].A user can switch between these states by pressing the "see more" [•••] button. Вы можете переключаться между ними программным способом, используя свойство IsOpen.You can switch between them programmatically by setting the IsOpen property.

События Opening, Opened, Closing и Closed позволяют реагировать на открытие и закрытие панели команд.You can use the Opening, Opened, Closing, and Closed events to respond to the command bar being opened or closed.

  • События Opening и Closing возникают до начала анимации перехода.The Opening and Closing events occur before the transition animation begins.
  • События Opened и Closed возникают после завершения перехода.The Opened and Closed events occur after the transition completes.

В этом примере событий Opening и Closing используются для изменения уровня прозрачности панели команд.In this example, the Opening and Closing events are used to change the opacity of the command bar. Если панель команд закрыта, она становится полупрозрачной, чтобы был виден фон приложения.When the command bar is closed, it's semi-transparent so the app background shows through. Если панель команд открыта, она становится непрозрачной, чтобы сосредоточить внимание пользователя на командах.When the command bar is opened, the command bar is made opaque so the user can focus on the commands.

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

IsStickyIsSticky

Если пользователь взаимодействует с другими частями приложения, когда открыта панель команд, она автоматически закрывается.If a user interacts with other parts of an app when a command bar is open, then the command bar will automatically close. Это поведение называется исчезновением.This is called light dismiss. Вы можете управлять исчезновением, установив свойство IsSticky.You can control light dismiss behavior by setting the IsSticky property. Если выбран параметр IsSticky="true", панель остается открытой, пока пользователь не нажмет кнопку "Дополнительно" [•••] или не выберет элемент в меню переполнения.When IsSticky="true", the bar remains open until the user presses the "see more" [•••] button or selects an item from the overflow menu.

Мы рекомендуем избегать закрепленных панелей команд, так как они не соответствуют ожиданиям пользователей по поведению исчезновения и фокуса ввода с клавиатуры.We recommend avoiding sticky command bars because they don't conform to users' expectations for light dismiss and keyboard focus behavior.

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

Вы можете управлять отображением панели в закрытом состоянии, установив свойство ClosedDisplayMode.You can control how the command bar is shown in its closed state by setting the ClosedDisplayMode property. Вы можете выбрать один из трех режимов отображения:There are 3 closed display modes to choose from:

  • Компактный. Режим по умолчанию.Compact: The default mode. Отображает содержимое, значки основных команд без меток и кнопку "Дополнительно" [•••].Shows content, primary command icons without labels, and the "see more" [•••] button.
  • Минимальный. Отображает только тонкую панель, которая целиком действует как кнопка "Дополнительно" [•••].Minimal: Shows only a thin bar that acts as the "see more" [•••] button. Пользователь может открыть панель нажатием в любом месте панели.The user can press anywhere on the bar to open it.
  • Скрытый. Панель команд в закрытом состоянии не отображается.Hidden: The command bar is not shown when it's closed. Это может быть полезно для отображения контекстно-зависимых команд с помощью встроенной панели команд.This can be useful for showing contextual commands with an inline command bar. В этом случае следует открыть панель команд программным способом, установив свойство IsOpen или изменив значение свойства ClosedDisplayMode на Minimal или Compact.In this case, you must open the command bar programmatically by setting the IsOpen property or changing the ClosedDisplayMode to Minimal or Compact.

В этом примере панель команд используется для отображения простых команд форматирования для RichEditBox.Here, a command bar is used to hold simple formatting commands for a RichEditBox. Когда поле ввода не имеет фокуса, команды форматирования могут отвлекать, поэтому они скрыты.When the edit box doesn't have focus, the formatting commands can be distracting, so they're hidden. При использовании поля ввода значение свойства панели команд ClosedDisplayMode меняется на Compact, чтобы отобразить команды форматирования.When the edit box is being used, the command bar's ClosedDisplayMode is changed to Compact so the formatting commands are visible.

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

Примечание.   В нашем примере не рассматривается реализация команд редактирования.Note  The implementation of the editing commands is beyond the scope of this example. Дополнительные сведения см. в статье RichEditBox.For more info, see the RichEditBox article.

Несмотря на то, что режимы Minimal и Hidden могут быть полезны в некоторых ситуациях, необходимо помнить о том, что сокрытие всех действий может поставить пользователя в замешательство.Although the Minimal and Hidden modes are useful in some situations, keep in mind that hiding all actions could confuse users.

Изменение значения ClosedDisplayMode для предоставления пользователю подсказки влияет на расположение окружающих элементов.Changing the ClosedDisplayMode to provide more or less of a hint to the user affects the layout of surrounding elements. Смена состояния панели команд с закрытого на открытое и обратно не влияет на расположение других элементов.In contrast, when the CommandBar transitions between closed and open, it does not affect the layout of other elements.

РазмещениеPlacement

Панели команд можно разместить в верхней части окна приложения, в нижней части окна приложения и в строках, встроив их в элемент управления макетом, например Grid.row.Command bars can be placed at the top of the app window, at the bottom of the app window, and inline, by embedding them in a layout control such as Grid.row.

Пример 1 размещения панели приложения

  • Для небольших наладонных устройств мы рекомендуем размещать панели команд в нижней части экрана для удобства доступа.For small handheld devices, we recommend positioning command bars at the bottom of the screen for easy reachability.
  • На устройствах с более крупными экранами панели команд следует размещать ближе к верхней части окна, чтобы сделать их заметнее.For devices with larger screens, placing command bars near the top of the window makes them more noticeable and discoverable.

Используйте API DiagonalSizeInInches для определения физических размеров экрана.Use the DiagonalSizeInInches API to determine physical screen size.

Панели команд можно размещать в следующих областях экранов с одним представлением (пример слева) и с несколькими представлениями (пример справа).Command bars can be placed in the following screen regions on single-view screens (left example) and on multi-view screens (right example). Встроенные панели команд можно размещать в любом месте пространства действий.Inline command bars can be placed anywhere in the action space.

Пример 2 размещения панели приложения

Сенсорные устройства. Если панель команд должна оставаться видимой пользователю при появлении сенсорной клавиатуры или панели функционального ввода (SIP), вы можете присвоить панель команд в качестве значения свойству BottomAppBar объекта Page, и тогда панель будет перемещаться и сохранять видимость при появлении SIP.Touch devices: If the command bar must remain visible to a user when the touch keyboard, or Soft Input Panel (SIP), appears then you can assign the command bar to the BottomAppBar property of a Page and it will move to remain visible when the SIP is present. В противном случае следует встроить панель команд и позиционировать ее относительно содержимого приложения.Otherwise, you should place the command bar inline and positioned relative to your app content.

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