company_banner

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

    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
    Краткое руководство: добавление кнопок панели приложения
    Microsoft
    569,00
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Поделиться публикацией

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое