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
Краткое руководство: добавление кнопок панели приложения
ссылка на оригинал статьи http://habrahabr.ru/company/microsoft/blog/205466/
Добавить комментарий