Windows 8.1 предлагает разработчику новые возможности для создания панелей инструментов в приложениях. Мы рассмотрим эти возможности и создадим навигационную панель и панель действий для приложения из прошлой статьи.
Панели инструментов (AppBar) в приложениях могут быть размещены в верхней и нижней части экрана. Классическим примером этого может быть Windows Store.
Верхняя навигационная панель содержит список категорий и служит для осуществления навигации по приложению.
Нижняя панель содержит действия, актуальные для данной конкретной страницы или выделенного элемента.
Не будем углубляться в теорию и попробуем просто добавить панели в приложение.
Навигационная панель приложения (TopAppBar)
Простая навигация
Давайте создадим навигационную панель, которая будет располагаться в верхней части экрана приложения и содержать две кнопки:
- Вернуться на главную;
- Перейти в корзину покупок.
Приступим к реализации:
1. Откройте приложение из прошлой статьи в Visual Studio 2012 или создайте новое.
2. В Solution Explorer откройте главный экран приложения HubPage.xaml и добавьте внутрь тэга Page следующий код:
<Page.TopAppBar>
<AppBar>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Label="На главную" Click="HomeAppBarButton_Click" />
<AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="Корзина" Click="ShoppingCartAppBarButton_Click" />
</Grid>
</AppBar>
</Page.TopAppBar>
Наша панель содержит таблицу и две кнопки AppBarButton. AppBarButton — это наследник кнопки, созданный для панелей инструментов.
Например, у этой кнопки есть возможность выбрать в качестве иконки, красивую иконку из стандартного набора:
AppBarButton позволяет использовать не только готовые иконки или нарисованные вами, но и сделать свой собственный неповторимый стиль используя шрифты или нарисовав иконку точками.
3. Добавьте в обработчик события HomeAppBarButton_Click для кнопки перехода на основной экран следующий код:
private void HomeAppBarButton_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(HubPage));
}
4. Запустите приложение.
5. Результат его работы вы можете видеть на картинке.
По умолчанию, навигационная панель находится в свернутом состоянии и вы её не увидите. Чтобы её увидеть, необходимо:
- Нажать правой кнопкой мыши в любом месте экрана (если вы используете мышку).
- Провести пальцем сверху вниз (если вы используете touch устройство).
Навигация по разделам
На самом деле, вам не обязательно использовать только AppBarButton и вы можете использовать любые другие элементы управления на панели инструментов.
Сейчас мы изменим код страницы и организуем навигацию по разделам каталога товаров.
Приступим к реализации:
1. В Solution Explorer откройте главный экран приложения HubPage.xaml и замените содержимое тэга Page.TopAppBar:
<Page.TopAppBar>
<AppBar>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" >
<Grid Background="#3D3D3D" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<AppBarButton x:Name="HomeAppBarButton" Grid.Column="0" Icon="Home" Click="HomeAppBarButton_Click" Margin="0,15,0,0" />
<HyperlinkButton x:Name="CategoryButton" Grid.Column="1" Content="Категории товаров" Click="HomeAppBarButton_Click" Foreground="White" />
</Grid>
<GridView x:Name="NavigationGridView" ItemsSource="{Binding NavigationItems}" Background="#616161" BorderBrush="#3D3D3D" BorderThickness="0,1,0,0">
<GridView.ItemTemplate>
<DataTemplate>
<HyperlinkButton x:Name="NavigationItem" Content="{Binding Title}" Click="NavigationItem_Click" CommandParameter="{Binding UniqueId}" Margin="90,0,26,0" Foreground="White" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
<AppBarButton x:Name="ShoppingCartAppBarButton" Grid.Column="1" Icon="Shop" Label="Корзина" Click="ShoppingCartAppBarButton_Click" HorizontalAlignment="Right" />
</Grid>
</AppBar>
</Page.TopAppBar>
Теперь на странице есть таблица GridView, которая отображает ссылки из источника данных. Наполним источник данных и сделаем навигацию по страницам категорий.
2. В Solution Explorer откройте файл HubPage.xaml.cs и добавите в начало метода navigationHelper_LoadState код для получения разделов каталога товаров и заполнения источника данных:
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
var sampleNavigation = await SampleDataSource.GetGroupsAsync();
this.DefaultViewModel["NavigationItems"] = sampleNavigation;
//…
}
3. В файле HubPage.xaml.cs найдите автоматически сгенерированный метод NavigationItem_Click и замените его на следующий код:
private void NavigationItem_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(SectionPage),
(sender as HyperlinkButton).CommandParameter);
}
4. Запустите приложение и откройте панель инструментов.
Как вы видите, теперь на панели инструментов находится таблица, отображающая ссылки из источника данных и осуществляющая навигацию по разделам.
Панель действий приложения (BottomAppBar)
Теперь мы добавим панель действий для приложения. Она будет находиться в нижней части экрана и содержать несколько кнопок:
- Добавить в корзину;
- Удалить из корзины;
- Настройки;
- Добавить в избранное;
- Закрепить на плитке.
Приступим к реализации:
1. В Solution Explorer откройте файл HubPage.xaml.
2. Добавьте в конец страницы, внутрь тэга Page следующий код:
<Page.BottomAppBar >
<CommandBar >
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="AddAppBarButton" IsCompact="True" Label="В корзину" Icon="Add" />
<AppBarButton x:Name="DeleteAppBarButton" IsCompact="True" Label="Удалить" Icon="Delete" />
<AppBarSeparator IsCompact="True" />
<AppBarButton x:Name="SettingAppBarButton" IsCompact="True" Label="Настройки" Icon="Setting" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarToggleButton x:Name="FavoriteAppBarButton" IsCompact="True" Label="Избранное"
Checked="FavoriteAppBarButton_Checked" Unchecked="FavoriteAppBarButton_Unchecked">
<AppBarToggleButton.Icon>
<SymbolIcon Symbol="Favorite" />
</AppBarToggleButton.Icon>
</AppBarToggleButton>
<AppBarButton x:Name="PinAppBarButton" IsCompact="True" Label="Добавить на плитку" Icon="Pin" />
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
Мы используем CommandBar в качестве контейнера для добавления кнопок.
У нас есть основные и самые важные действия – это добавление товара в корзину и удаление его из корзины, а так же есть дополнительные действия, например добавление товара в избранное.
Важные действия мы добавляем в секцию PrimaryCommands — они будут отображаться в правой части панели.
Второстепенные действия – в секцию SecondaryCommands — они будут отображаться в левой части панели.
Действия могут быть логически разделены разделителем AppBarSeparator.
Помимо обычных кнопок, вы можете использовать кнопки, имеющие два состояния AppBarToggleButton, например, для случая добавления и удаления из избранного.
Свойство IsCompact, которое мы указали для всех элементов, позволяет скрывать лишнее, если оно не помещается на экран, например подписи к кнопкам будут скрыты при маленьком разрешении.
3. Запустите приложение.
4. Нажмите правой кнопкой мыши в любом месте или на любом элементе.
Помимо верхней навигационной панели, на экране появится панель с действиями.
5. Уменьшите окно с приложением и посмотрите, как панель перейдет в компактный режим.
6. Нажмите на кнопку «Избранное» и она запомнит своё состояние.
Заключение
На этом на сегодня всё. Мы познакомились с новыми возможностями по созданию панелей инструментов, а так же научились реализовывать навигационные панели и панели действий для приложений, используя различные стандартные элементы управления.
В следующих статьях мы продолжим постигать разработку Windows 8.1 приложений на простых примерах.
Скачать получившееся приложение можно на SkyDrive по ссылке: http://sdrv.ms/1hJIudI
Полезные материалы
Элементы управления AppBar
Стандартный набор иконок для AppBar
Краткое руководство: добавление кнопок панели приложения
Автор: MissUFO
