CommandBar

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

}

Свойство Content

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

SecondaryCommands

По умолчанию все элементы 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

Для раскрытия панели CommandBar используется свойство IsOpen, если оно равно true, то панель раскрывается.

Также следует отметить свойство ClosedDisplayMode, которое указывает на состояние панели и может принимать следующие значения:

• Minimal: на панели видна кнопка "Подробнее", остальное содержимое скыто и открывается только по клику на ту кнопку

• Hidden: панель полностью скрыта и раскрывается только программно. Для программного раскрытия надо установить свойство IsOpen:

  commandBar.IsOpen = true;

• Compact: панель имеет компактный вид, но не минимальный, по клику на кнопку "Подробнее" открывается остальная часть