CommandBar предоставляет доступ к наиболее часто используемым задачам приложения, своего рода панель управления. Также CommandBar может использоваться для навигации по страницам или разделам приложения.
Для добавления CommandBar
у элемента Page предусмотрены свойства TopAppBar и BottomAppBar для
создания панелей соответственно в верху и внизу страницы.
Основные свойства CommandBar для управления содержимым:
OverflowButtonVisibility: указывает, будет ли оображаться кнопка "Дополнительно" (•••) в правом углу CommandBar. Если в более ранних SDK эта кнопка отображалась по умолчанию, то в последнем SDK она скрывается. И собственно свойство будет работать только для последних SDK. Чтобы отобразить кнопку, надо установить значение Visible
Content: устанавливает содержимое панели, которое располагается в ее левой части
PrimaryCommands: обычно хранит самые главные элементы управления, которые располагаются рядом с кнопкой "Дополнительно" (...)
SecondaryCommands: устанавливает содержимое панели, которое располагается в ее левой части
В PrimaryCommands и SecondaryCommands можно использовать только элементы AppBarButton, AppBarToggleButton и AppBarSeparator.
Например, определим простейшую панель и добавим ее вниз страницы:
<Page x:Class="ControlsApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ControlsApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontSize="20"> <Page.BottomAppBar> <CommandBar x:Name="commandBar"> <AppBarButton Label="Открыть" Icon="OpenFile" /> <AppBarButton Label="Сохранить" Icon="Accept" /> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page>
AppBarButton представляет кнопку, предназначенную специально для CommandBar. Ее внешний вид управляется двумя свойствами Label и
Icon. Свойство Label задает текст кнопки, а свойство Icon
- иконку на кнопке. По умолчанию Universal Windows Platform
предоставляет большой выбор встроенных иконок.
Элемент AppBarToggleButton также представляет кнопку, которая является аналогом ToggleButton, то есть может быть в отмеченном и неотмеченном состоянии. Для разделения кнопок можно использовать элемент AppBarSeparator, который фактически представляет разделяющую черту:
<CommandBar> <AppBarToggleButton Icon="Pause" Label="Пауза" /> <AppBarSeparator/> <AppBarButton Label="Открыть" Icon="OpenFile" /> <AppBarButton Label="Сохранить" Icon="Accept" /> </CommandBar>
При этом и для AppBarButton и AppBarToggleButton, как и для обычных кнопок можно установить обработчик нажатия, который будет выполнять некоторые действия:
В этом случае в файле кода должны быть определены соответствующие обработчики:
private void Pause_Click(object sender, RoutedEventArgs e) { } private void OpenFile_Click(object sender, RoutedEventArgs e) { }
CommandBar - это элемент управления содержимым, поэтому с помощью свойства Content можно установить содержимое этого элемента. Причем это содержимое может использоваться в дополнение к другим вложенным элементам:
<CommandBar> <AppBarToggleButton Icon="Pause" Label="Пауза" /> <AppBarSeparator/> <AppBarButton Label="Открыть" Icon="OpenFile" /> <AppBarButton Label="Сохранить" Icon="Accept" /> <CommandBar.Content> <TextBlock Text="Поиск..." Margin="12,14"/> </CommandBar.Content> </CommandBar>
Однако несмотря на то, что в CommandBar можно определять любое содержимое, предпочтительными элементами являются AppBarButton, AppBarToggleButton и AppBarSeparator
По умолчанию все элементы AppBarButton, AppBarSeparator и AppBarToggleButton размещаются в свойстве PrimaryCommands. Дополнительно также можно задать свойство SecondaryCommands:
<CommandBar> <AppBarButton Label="Открыть" Icon="OpenFile" /> <AppBarButton Label="Сохранить" Icon="Accept" /> <CommandBar.SecondaryCommands> <AppBarButton Icon="Share" Label="Поделиться" /> <AppBarButton Icon="Like" Label="Нравится" /> </CommandBar.SecondaryCommands> </CommandBar>
Для раскрытия панели CommandBar используется свойство IsOpen, если оно равно true
, то панель раскрывается.
Также следует отметить свойство ClosedDisplayMode, которое указывает на состояние панели и может принимать следующие значения:
Minimal
: на панели видна кнопка "Подробнее", остальное содержимое скыто и открывается только по клику на ту кнопку
Hidden
: панель полностью скрыта и раскрывается только программно. Для программного раскрытия надо установить свойство IsOpen
:
commandBar.IsOpen = true;
Compact
: панель имеет компактный вид, но не минимальный, по клику на кнопку "Подробнее" открывается остальная часть