Використання AppBarButton в Windows 8.1

У минулій примітки я писав про те, як можна позбудеться зв'язку зі StandardStyles.xaml в ваших проектах Windows 8.1. Зокрема, я вказував, що одним з найпопулярніших використань цього допоміжного файлу AppBarButton стилі, а також 200 різних символів, використовуваних для кнопок AppBar-а. Я вирішив ненадовго трохи глибше зануриться в ці стилі, так як отримав певну кількість листів з питаннями.

Типовий сценарій — Іконки з символами

Клас AppBarButton є новим класом в Windows 8.1 і в першу чергу передбачається для використання сценарію CommandBar, надаючи UI, поведінку і доступність, необхідну для елемента керування.

Примітка: CommandBar є чимось новим в Windows 8.1 і призначений для того, щоб бути контролом для стандартних тільки командних кнопок. Він надає вбудовану можливість автоматичної зміни розміру (що означає, команди пропадуть, у разі якщо вікно стане меншим) і кращу підтримку клавіатури для навігації по командам всередині AppBar. Якщо ви використовуєте AppBar і у вас тільки стандарнтые кнопки UI, то вам краще використовувати CommandBar замість нього у вашому додатку Windows 8.1

Це дозволить вам швидко створити UI тільки задавши два атрибута Label і Icon. Наприклад так:
<AppBarButton Label="Reply via Email" Icon="MailReply" />

Результатом буде:

І все! По функціональності кнопка залишається колишньою, а API обрамляє тип. Це дає вам можливість швидко встановити текст кнопки і візуальне відображення. Турбота про всіх візуальних станах pressed/hover/і т. д. знята з вас. Ми також просунули задумку, щоб властивість Label стала значенням AutomationProperties.Name кнопки для вас, надаючи цим можливість доступу за замовчуванням. Цей метод властивості Icon це скорочена версія наступного більш багатослівного методу:
<AppBarButton Label="Reply via Email">
<AppBarButton.Icon>
<SymbolIcon Symbol="MailReply" />
</AppBarButton.Icon>
</AppBarButton>

Як ви можете бачити вбудоване властивість для ButtonBase це те місце, де «живе» властивість Icon. Так як у нас є це властивість Icon, то ми можемо використовувати й інші методи. Ми також надаємо властивість IsCompact для типів AppBarButtons, яке зменшить відступи і видалить текст опису автоматично для вас, тим самим зменшуючи область займану кнопкою. Це те, що встановлюється CommandBar у разі, коли розмір вікна стає занадто маленьким для елементів.

Використовуємо інші шрифти в якості значка іконки

Якщо ні одна з 190 включених іконок не підходить під ваші потрібні, то ви можете використовувати AppBarButton з вашими власними іконками. Я ДУЖЕ рекомендую використовувати шрифтовый підхід, так як він надає відмінну можливість масштабування для ваших іконок і також є мейнстрімом для більшості додатків веб. Беручи під увагу, що ви можете зробити свій власний шрифт, є також безліч інших можливостей, які ви можете використовувати.

Примітка: Я не є юристом і ви повинні проконсультуватися з надає шрифт стороною з приводу ліцензії, правила/права/заборони на використання шрифтів, які впроваджені в вашу програму. Не думайте що кожен шрифт доступний для використання тільки тому, що він TTF/OTF — для повної впевненості проконсультуйтеся з приводу ліцензії, якщо ви не є автором шрифту самі.

Припустимо, я хочу додати кілька social media команд в моє додаток. Я можу використовувати популярну бібліотеку Modern UI Icons, яка також надає шрифт для завантаження соціальних іконок. Після розпакування архіву я включив TTF файл в мій проект (я міг би використовувати OTF, але так як є TTF, то я використовую його — також зауважте, що я перейменував файл в моєму проекті Visual Studio) і потім використовую його в моєму додатку:
<AppBarButton Label="Tweet This">
<AppBarButton.Icon>
<FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social"
Margin="0,2,0,0" Glyph="&# xe045;" FontSize="37.333" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Review on Yelp">
<AppBarButton.Icon>
<FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social"
Margin="0,2,0,0" Glyph="&# xe04f;" FontSize="37.333" />
</AppBarButton.Icon>
</AppBarButton>

що дає в результаті:

Досить кльово! Зараз, коли я використовую шрифти, іноді буває досить непросто визначити вірне значення, яке має бути після символу " # " у значенні FontFamily. Трюк, який я використовую на Windows це відкрити TTF/OTF файл і він покаже превью шрифту точно також як і ім'я шрифту. Це буде те саме значення, яке вам потрібно вказати після шляху до файлу. Значення символу знака, який ви хочете відобразити, залежить від шрифту, який ви використовуєте. Більшість авторів використовують значення Unicode символів, але я бачив і таке, що досить було просто узяти і набрати символ «Б». Це те, з приводу чого бажано проконсультуватися з автором шрифту для зіставлень (Modern UI іконки надають симпатичну веб-сторінку з попереднім переглядом всіх значень символів поряд з іконками). Також слід зазначити, що деяка інформація в різних шрифтах може відрізнятися і вам необхідно буде зробити якісь коригування. У моєму випадку, я на свій смак зрушив Modern UI іконки на 2 пікселя вниз, але в теж час збільшив розмір на 2 пікселя.

Інші варіанти іконок

Є ще два варіанти іконок, які ви можете використовувати. Я рекомендую вам використовувати спосіб символів за замовчуванням в першу чергу, так як майже завжди ви зможете знайти те що вам потрібно серед набору з 190 іконок. В другу чергу я б рекомендував скористатися шляхом пошуку іконки в шрифті. Інші два способи потребують особливих роз'яснень, які не такі прості як «обери контрол і перетягни його на макет» і залежать від того яка графіка надана їм.
PathIcon — цей спосіб для того, щоб надати векторні дані використовуючи формат даних XAML. Це векторні дані, а значить вони будуть добре масштабуватися. Проте, вам необхідно надати дані в розмірі 40px щоб розмір підходив під шаблон. Комусь це може здатися важким. Використання таких інструментів як Inkscape або Snycfusion Metro Studio може допомогти.
BitmapIcon — працює якщо необхідно відобразити зображення PNG. Зверніть увагу, що в даному випадку НЕМАЄ автоматичного масштабування. Вам доведеться надати для різних коефіцієнтів масштабування зображення (100,140,180) для кожної картинки, наданої тут. Це може бути досить стомлюючим заняттям і в разі, якщо не буде зроблено, то виглядати на дисплеях з високою роздільною здатністю буде не дуже добре. До того ж BitmapIcon не володіє особливою точністю для непрямоугольных елементів.

Використання Visual Studio

У Visual Studio 2013 надані деякі чудові інструменти для цієї галузі, які надають вам можливість вибирати зовнішній вигляд для ваших кнопок AppBar. На панелі властивостей дизайнера ви можете бачити різні властивості, які ви можете встановити:

Є також інструменти для того, щоб змінювати інші типи іконок про яких ми згадували раніше.

Резюме.

Ми хотіли зробити якісь речі простіше, зменшити наданий шаблонами VS код і підвищити юзабіліті/доступність додатків. Поки ці речі виглядають простими, вони зручні у використанні і допомагають вам сфокусуватися на ядрі вашого додатки, а не на окремих елементах. Якщо ви використовуєте якісь інші стилі кнопок і деякі стандартні іконки, то я рекомендую вам перейти на AppBarButton з типами іконок наданими фреймворком за замовчуванням. Обов'язково перевірте приклади з AppBar Windows SDK Sample для того, щоб пограти з концептами які були озвучені в цьому пості.

Сподіваюся, що кому-небудь це допоможе!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.