Pull to refresh
0
Microsoft
Microsoft — мировой лидер в области ПО и ИТ-услуг

Разработка Windows 8.1 приложений на XAML/С#. Часть 3. Панели инструментов

Reading time 6 min
Views 7.9K
image
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. Нажмите на кнопку «Избранное» и она запомнит своё состояние.

image

Заключение


На этом на сегодня всё. Мы познакомились с новыми возможностями по созданию панелей инструментов, а так же научились реализовывать навигационные панели и панели действий для приложений, используя различные стандартные элементы управления.

В следующих статьях мы продолжим постигать разработку Windows 8.1 приложений на простых примерах.

Скачать получившееся приложение можно на SkyDrive по ссылке: http://sdrv.ms/1hJIudI

Полезные материалы


Элементы управления AppBar
Стандартный набор иконок для AppBar
Краткое руководство: добавление кнопок панели приложения
Tags:
Hubs:
+9
Comments 0
Comments Leave a comment

Articles

Information

Website
www.microsoft.com
Registered
Founded
Employees
Unknown
Location
США