(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Разработка Windows 8.1 приложений на XAML/С#. Часть 5. Всплывающие окна и панели

Источник: habrahabr
MissUFO

image

Сегодня речь пойдет о реализации всплывающих окон, меню и панелей в Windows 8.1 приложении.

Мы рассмотрим, какие возможности предлагает Windows 8.1 разработчику приложений для реализации всплывающих окон, панелей настроек и контекстных меню, а так же добавим все перечисленные возможности в приложение "Каталог товаров", разработанное в прошлых статьях. 

В Windows 8, XAML разработчики использовали элемент управления Popup и самостоятельно описывали его поведение. Теперь для этого есть более простые механизмы.

Итак, всплывающие панели Flyout представляют собой набор элементов управления с уже реализованной логикой работы таких базовых вещей, как открытие, закрытие окна, обработка событий.

Основные сценарии использования всплывающих окон и панелей: 
1. Запрос информации, предупреждения, подтверждения (Flyout).
2. Всплывающие контекстные меню (MenuFlyout).
3. Панель настроек приложения (SettingsFlyout).

Теперь разберем как это реализовать.

Реализуем всплывающее окно


Добавим всплывающее окно в приложение "Каталог товаров", которое будет возникать при нажатии на кнопку "Купить" и уточнять у пользователя количество приобретаемых товаров.

1. Откройте проект приложения "Каталог товаров" в Visual Studio 2013 или создайте новый проект.
2. В Solution Explorer откройте файл HubPage.xaml.
3. Найдите кнопку "Купить" и вставьте в неё следующий код: 

image

<Button Grid.Row="2" Content="купить" Margin="0,10,0,0" HorizontalAlignment="Right" > <Button.Flyout > <Flyout > <Grid Width="300"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Text="Вы выбрали: " Grid.Column="0" /> <TextBlock Text="{Binding Title}" Grid.Column="1" TextWrapping="WrapWholeWords" /> <TextBlock Text="Укажите количество: " Grid.Row="1" Grid.Column="0" TextWrapping="WrapWholeWords"/> <TextBox x:Name="valueTextBox" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="1 999 руб." Grid.Row="2" Grid.Column="1" FontWeight="Bold" /> <StackPanel Grid.Row="3" Grid.Column="1"> <Button x:Name="confirmPurchaseButton" Click="Button_Click" CommandParameter="{Binding UniqueId}">оформить заказ</Button> </StackPanel> </Grid> </Flyout> </Button.Flyout> </Button>
4. Запустите приложение.
При нажатии на кнопку "Купить", произойдет открытие всплывающего окна.

image

Далее вы можете обрабатывать события всплывающего окна и осуществлять какие-то действия в зависимости от состояния объекта: Opening, Opened, Closed.

Реализуем всплывающее меню


Теперь давайте добавим всплывающее меню. Реализуем его в нижней панели инструментов, которая у нас уже присутствует в приложении (см. Часть 3. Панели инструментов).

1. В Solution Explorer откройте файл HubPage.xaml.
2. Найдите Page.BottomAppBar и SettingAppBarButton. Замените её код:

<AppBarButton x:Name="SettingAppBarButton" IsCompact="True" Label="Настройки" Icon="Setting" > <AppBarButton.Flyout> <MenuFlyout > <MenuFlyoutItem x:Name="SettingAppBarButton1" Text="Учетная запись" Click="SettingAppBarButton1_Click" /> <MenuFlyoutItem x:Name="SettingAppBarButton2" Text="Контактная информация" Click="SettingAppBarButton2_Click" /> <MenuFlyoutItem x:Name="SettingAppBarButton3" Text="Предпочтения" Click="SettingAppBarButton3_Click" /> <MenuFlyoutSeparator/> <ToggleMenuFlyoutItem x:Name="SettingAppBarButton4" Text="Запомнить меня" Click="SettingAppBarButton4_Click" /> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton>
3. Запустите приложение.
4. Откройте нижнюю панель инструментов. 
5. Нажмите на кнопку "Настройки". Появится всплывающее меню.

image

Мы использовали элемент управления MenuFlyout, который создал всплывающее меню.
У нас появилось три обычных пункта меню MenuFlyoutItem, разделитель и пункт меню, имеющий два состояния, включен и выключен ToggleMenuFlyoutItem.

image

Для всех их вы можете реализовать обработчик события Click с необходимой функциональностью.

Реализуем панель настроек


В Windows 8.1 появился новый элемент управления SettingsFlyout, который позволяет создавать панели настроек в соответствии с гайдом для разработчиков Windows Store приложений.

Панель настроек есть у каждого приложения и появляется в левой части экрана. По умолчанию, панель выглядит так:

image

Вы можете кастомизировать её, добавив настройки, необходимые вашему приложению. Для примера, мы добавим в настройки страницу авторизации.

1. Создайте новый файл в проекте (Add / New Item).
2. Выберите тип файла Setting Flyout и укажите название LoginSettingsFlyout.xaml.

image

3. В Solution Explorer откройте файл LoginSettingsFlyout.xaml. По умолчанию панель будет выглядеть следующим образом:

image 

Если посмотреть на XAML представление, то вы увидите, что этот элемент управления используется в качестве контейнера для любых других элементов управления и у него есть следующие настройки:

IconSource - иконка.
Title - название панели.
HeaderBackground - цвет фона шапки панели.
HeaderForeground - цвет шрифта шапки панели.

4. Замените код файла LoginSettingsFlyout.xaml на следующий:

<SettingsFlyout x:Class="eShop.LoginSettingsFlyout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:eShop" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" IconSource="Assets/SmallLogo.png" Title="Авторизация" d:DesignWidth="346"> <StackPanel x:Name="FlyoutContent"> <TextBlock x:Name="PleaseSignInTextBlock" Text="Введите логин и пароль." Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" /> <TextBox x:Name="UserNameTextBox" Header="Логин" HorizontalAlignment="Left" Margin="0,25,0,0" Width="250" /> <PasswordBox x:Name="PasswordBox" Header="Пароль" Width="250" Margin="0,25,0,0" HorizontalAlignment="Left" /> <CheckBox x:Name="SaveCredentialsCheckBox" Content="Запомнить меня" HorizontalAlignment="Left" Margin="0,20,0,0" /> <Button x:Name="SubmitButton" Content="Войти" Click="SubmitButton_Click" Width="280" Margin="0,25,0,0" /> <TextBlock x:Name="ErrorTextBox" Margin="0,10,0,0" TextWrapping="Wrap" Foreground="Red" /> </StackPanel> </SettingsFlyout>
5. Откройте LoginSettingsFlyout.xaml.cs.
6. Найдите обработчик события SubmitButton_Click.
7. Добавите в него код для закрытия панели:

private void SubmitButton_Click(object sender, RoutedEventArgs e) { //всякие действия //закрываем панель this.Hide(); }
Если вы сейчас запустите приложение, то обнаружите, что на панели настроек нет перехода на нашу панель авторизации. 

8. Откройте файл App.xaml.cs и добавьте код для добавления перехода на нашу панель со стандартной панели настроек:

protected override void OnWindowCreated(WindowCreatedEventArgs args) { SettingsPane.GetForCurrentView().CommandsRequested += (s, e) => { SettingsCommand defaultsCommand = new SettingsCommand("login", "Авторизация", (handler) => { LoginSettingsFlyout loginFlyout = new LoginSettingsFlyout(); loginFlyout.Show(); }); e.Request.ApplicationCommands.Add(defaultsCommand); }; base.OnWindowCreated(args); }

Метод OnWindowCreated вызывается при открытия приложения единожды, когда создаётся основной экран. В нем мы регистрируем событие CommandsRequested открытия пользователем панели настроек, в котором добавляем ссылку на нашу кастомную панель. 

9. Запустите приложение.
10. Откройте панель настроек

image

11. Нажмите на настройку "Авторизация". Вы увидите добавленную нами панель.

image

Заключение


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

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

Ссылки по теме


 Распечатать »
 Правила публикации »
  Обсудить материал в конференции Microsoft »
Обсудить материал в конференции Дизайн, графика, обработка изображений »
Написать редактору 
 Рекомендовать » Дата публикации: 16.01.2014 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Microsoft System Center Standard Core Sngl License/Software Assurance Pack OLP 2Licenses NoLevel CoreLic Qualified
Microsoft SQL CAL 2017 Sngl OLP 1License NoLevel UsrCAL
Microsoft Office 365 Профессиональный Плюс. Подписка на 1 рабочее место на 1 год
Microsoft Visual Studio Professional w/MSDN AllLng Software Assurance OLP 1 License No Level Qualified
Microsoft SQL Server Standard Core 2017 Sngl OLP 2Licenses NoLevel CoreLic Qualified
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование на Microsoft Access
CASE-технологии
Один день системного администратора
ЕRP-Форум. Творческие дискуссии о системах автоматизации
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Пишу программы на заказ профессионально (2179)
Пишу программы на заказ на языках Pascal (численные методы, списки, деревья, прерывания) под...
 
И я там был (2)
И я там был, мед пиво пил, по усам текло, а в рот не попало.
 
Пишу программы на заказ для студентов (173)
Пишу для студентов на с, с++, паскаль в средах ms visual studio, qt, builder, borland c, delphi....
 
Пишу программы на Lazarus (19)
Предлагаю разработку программ на заказ. Примеры программ: www.itproportal.ru
 
Написание оптимального кода под Delphi (1)
Delphi выполняет все почти именно так, как должен. Это как раз переизбыток "оптимизации" в...
 
 
 



    
rambler's top100 Rambler's Top100