Windows 8 Metro, Навігація, спливаючі меню та панелі
WPF --- Периферія WPF --- Windows 8 Metro - Навігація, спливаючі меню та панелі
У цій статті ми продовжимо створення програми AutoShop і додамо до неї інтерактивні елементи навігації, які є стандартними для Metro-програм:панель програми (AppBar) танавігаційна панель (NavBar), які забезпечують засоби, за допомогою яких користувач може взаємодіяти з вашим контентом та переміщатися всередині вашої програми. Я також покажу, як створити спливаючі меню, які є спливаючою міні-вікнами, що використовуються для збору інформації від користувача, зазвичай у відповідь на взаємодію з AppBar.
Панель AppBar з'являється в нижній частині екрана, коли користувач здійснює сенсорне введення вгору або клацає правою кнопкою миші. Ця панель є чудовим інтерактивним засобом для додавання різних кнопок та інших елементів керування, що розширюють можливості програми.
Існує аналогічний елемент керування у верхній частині екрана, який називається навігаційною панеллю (панель навігації), яка використовується для навігації між різними частинами Metro-програми.
Найпростіший спосіб створити AppBar – оголосити його у файлі XAML. Нижче показано доповнену розмітку файлу ListItem.xaml:
Для створення панелі програми я передав елемент керування AppBar у властивості Page.BottomAppBar. Для створення навігаційної панелі, яка з'являється зверху, а не знизу, потрібно буде використовувати властивість Page.TopAppBar (навігацію створимо трохи пізніше).
Панель програми містить елемент компонування Grid, що розбиває її на два стовпці. У лівому, як правило, розміщуються елементи управління, що мають специфічну функціональність.для Metro-програм, тому я помістив сюди кнопку видалення запису з колекції AutoList. У правому стовпці представлені елементи управління, що мають ширшу (app-wide) функціональність - додавання запису, список марок машин, додавання знижки на машину та домашній сайт компанії.
Як бачите, всі стилі кнопок перевизначають стиль AppBarButtonStyle, який визначає стандартний вигляд кнопок панелі AppBars. Тут використовуються три важливі властивості:AutomationProperties.AutomationId - визначає ідентифікатор для кнопки, за допомогою якого її можна буде ідентифікувати в коді,AutomationProperties.Name - визначає текст, що відображається під кнопкою, іContent - задає зображення, яке використовуватиметься.
Значення властивості Content є код символу із символів шрифту Segoe UI. Ви можете побачити значки, задані цим шрифтом – Стандартні стилі та ресурси Metro. На малюнку показана створена панель:
На даний момент кнопки керування на панелі AppBar не мають жодної функціональності. Давайте додамо просту функціональність для кнопок "Видалити" та "Сайт". Для цього додамо обробник події кліка AppBarButtonClick у файлі ListItem.xaml.cs, а також модифікуємо існуючий обробник події PropertyChanged (який реалізований у вигляді делегата у конструкторі ListItem). Цей обробник буде активувати кнопки "Видалити" та "Знижка", коли користувач вибере щось у списку:
У цьому коді є дві речі, на які варто звернути увагу. По-перше, для реагування на дії користувача використовується один обробник подій всім кнопок - AppBarButtonClick, тип кнопки визначається з допомогою властивості OriginalSource. Цей обробник ми пізніше доповнюватимемо для інших кнопок.
По-друге, тутставати видно перевагу використання патерну MVVM для проектування програми - при видаленні запису, представлення автоматично оновлюється, т.к. оновлюється модель-подання, тому нам не потрібно турбуватися про деталі компонування допоміжних сторінок NoItemSelected.xaml та AutoDetail.xaml.
Спливаючі меню
У наведеному вище прикладі, кнопки "Видалити" та "Сайт" мають найпростішу функціональність. Однак, як правило, більшість кнопок на панелі AppBar призначені для взаємодії з користувачем - введенням певної інформації. Для введення цієї інформації ми додамо різні спливаючі меню.
Тепер додайте необхідні стилі для спливаючих вікон у словник ресурсів AutoAppStyles.xaml:
Тепер додамо код C# користувача елемента управління ModelListFlyout. Він включає допоміжний метод Show(), який відкриватиме спливаюче вікно та обробник кліка по кнопці ОК, який закриватиме спливаюче вікно:
Тепер, щоб додати виклик спливаючого вікна ModelListFlyout у нашому додатку, нам потрібно додати цей елемент на сторінку ListItem.xaml та модифікувати обробник подій AppBarButtonClick:
Зверніть увагу, щоб використовувати елемент керування користувача я додав посилання на простір імен AutoShop.Flyouts за допомогою синтаксису:
Це дозволяє використовувати префікс flyouts для виклику елемента керування із простору імен AutoShop.Flyouts у XAML-розмітці.
Отже, ми створили дуже просте спливаюче вікно, що відображає список моделей, які представлені в магазині:
Давайте тепер створимо спливаючі вікна для кнопок "Додати" та "Знижка", але перед цим я пропоную додати до папки Flyouts допоміжний класFlyoutHelper, який буде відповідати за позиціонування елемента Popup - було б логічно, якби вікна, що спливають, відображалися біля кнопок, на яких вони були викликані. Для ModelListFlyout ми цим не спантеличувалися, т.к. це вікно передбачає взаємодії з користувачем.
Додайте до папки Flyouts новий файл класу FlyoutHelper.cs (Project --> Add Class) з наступним кодом:
Цей код позиціонує елемент Popup, який передається у методі ShowRelativeToAppBar, безпосередньо над кнопкою, що знаходиться на панелі AppBar. Тепер додайте новий елемент керування AddItemFlyout.xaml:
Тут немає нічого нового – простий елемент керування з кількома текстовими полями для введення інформації, яка використовується для додавання нової машини до загального списку. Набагато цікавіший код цього елемента, в якому ми використовуємо модифікований метод Show(), а також додаємо обробник для подій Popup.Opened і Button.Click:
Зверніть увагу, що нам потрібно отримати доступ до контексту даних програми в цьому елементі керування, щоб додати новий запис. Є кілька способів зробити це, але найпростіше прочитати значення властивості DataContext , як показано в коді.
При цьому потрібно виявляти обережність, тому що я припускаю, що значенням цієї властивості буде об'єкт ViewModel, який я створюю в конструкторі класу ListItem (в ListItem.xaml.cs) і ставлю як контекст. У додатках вам потрібно чітко стежити за типом контексту даних, т.к. у різних частинах програми можна використовувати відразу кілька блоків даних.
Як тільки я отримую посилання на ViewModel, просто додаю новий елемент в колекцію AutoList. Тепер додайте виклик цього вікна у коді головного вікна ListItem.xaml.cs:
Щоб переконатися у працездатності цього коду, прокрутимо колекцію AutoList вниз та переконаємось у додаванні нового запису:
Тепер давайте додамо аналогічне вікно DiscountFlyout, в якому ми задаватимемо знижку для певної машини, при цьому автоматично змінюючи виставу, зокрема поле Cost:
Панель навігації
Якщо ваш додаток містить окремі станиці з різною функціональністю, необхідно надати панель навігації (NavBar), так щоб користувач міг легко переміщатися між цими сторінками. Найпростіший спосіб забезпечити послідовну навігацію в Метро-додатку - додати елемент Frame всередині оболонки головної сторінки, який підключатиме необхідні вікна при навігації за додатком.
Я створив нове вікно MainPage.xaml у підпапці Pages нашої програми. Це вікно виступає у ролі обгортки інших вікон. Ви можете побачити вміст цього файлу, який я створив за допомогою шаблону порожньої сторінки:
Як бачите, щоб додати навігаційну панель я використовував елемент керування AppBar у властивості Page.TopAppBar (панель навігації буде з'являтися у верхній частині екрана). Вона складається з двох кнопок, які перемикатимуться між сторінками ListItem.xaml та NoItemSelected.xaml. Це не представляє ніякої корисної функціональності для нашої програми, я просто створив цю панель для демонстрації можливості навігації у Metro-додатках.
У коді цієї сторінки я створюю новий екземпляр ViewModel і завантажую у кадр сторінку за замовчуванням - ListItem:
Все що залишилося, це вказати сторінку MainPage як стартову в App.xaml.cs:
Тепер у програмі буде доступна навігація:
На цьому я закінчую розгляд програмиAutoShop. Воно ще далеке від повноцінного Metro-додатка, в ньому немає, наприклад, перевірки достовірності введених даних, немає збереження даних шляхом їхньої серіалізації в XML-файлі та багато іншого. Я описав створення цієї програми як введення в Metro, але ні як повний опис його можливостей.