Expression Blend, Шаблони елементів керування
Навіть найпростіший стиль насправді служить лише контейнером для установок загальних властивостей елемента управління певного типу. Незважаючи на всю користь, яку стилі приносять для спрощення налаштування багатьох властивостей (кольору, розміру шрифту тощо) елементів керування цільового типу, загальний порядок візуаліції елементів керування залишається тим самим. Тому, незалежно від характеру стильового оформлення елемента керування типу Button, він все одно має форму прямокутної, а можливо, квадратної кнопки.
Іноді виникає потреба створити стиль, який змінює ряд уставок загальних властивостей цільового елемента управління, а й перевизначає форму самого елемента управління. Так, у конкретному проекті може бути потрібна кругла форма кнопки або довільна багатокутна форма, намальована інструментом Pen або Pencil.
Коли потрібно створити стиль, здатний змінити геометричну форму елемента управління, що візуалізується, цей стиль доводиться визначати таким чином, щоб він містив вбудований шаблон елемента управління, що описується в розмітці XAML елементом . А в цьому елементі розмітки можна визначити зовнішній вигляд нового елемента керування, скористатися диспетчерами компонування для доступу до їхнього вмісту та виконати ряд інших типових операцій.
Незважаючи на те, що шаблон є найбільш часто використовуваною складовою більшого стилю, є все ж таки можливість визначити автономний ресурс об'єкта в елементі розмітки . Налаштування властивостей Template (Шаблон) елементів керування можна призначати для них задані шаблони. У прикладі проекту буде показано, як це робиться.
За замовчуванням зовнішній вигляд кожного елемента керування на платформах WPF таSilverlight візуалізується за допомогою пов'язаного з ними шаблону, який використовується за замовчуванням. Наприклад, шаблон, який використовується за умовчанням для елемента керування типу Button, містить інструкції з візуалізації так добре знайомої вам прямокутної форми кнопки. За цим принципом візуалізуються всі інші елементи управління на платформах WPF і Silverlight.
За замовчуванням шаблони входять до складу бібліотек на платформах WPF і Silverlight як вбудовані XAML-ресурси, і тому не можуть бути змінені безпосередньо. Але, як буде показано далі, в середовищі Expression Blend надається ряд механізмів для вилучення копії шаблону, що використовується за умовчанням, з метою його подальшої редагування.
Крім визначення різних інструкцій щодо візуалізації загального зовнішнього елемента керування, шаблон містить також інструкції щодо реагування елемента керування на дії користувача та інші зміни стану. Наприклад, у шаблоні, що використовується за умовчанням для елемента керування типу Button, описується, яким чином має виглядати кнопка, коли вона отримує логічний фокус, коли проводиться клацання в межах її меж, коли вона стає неактивною, та в інших станах.
Диспетчер VSM був вперше введений до складу прикладного інтерфейсу Silverlight API та служить для впровадження візуальних підказок у шаблон на платформі Silverlight. Історично склалося так, що програмуючі на платформі WPF застосовували аналогічний підхід за допомогою тригерів. Але після випуску версії .NET 4.0 платформа WPF була оновлена, щоб підтримувати диспетчер VSM, а відтак програмуючі на цій платформі отримали можливість користуватися двома різними засобами (тригерами та диспетчером VSM) для реалізації візуальних підказок.Застосування обох цих засобів демонструється в прикладах, що розглядаються далі.
Побудова спеціального шаблону елемента керування вручну
Перш ніж переходити до розгляду різних способів та засобів Expression Blend, які спрощують побудову спеціальних шаблонів, покажемо, яким чином простий шаблон створюється вручну. Адже кращого способу, ніж цей, з'ясувати особливості створення шаблонів важко придумати. Коли ви засвоїте ці особливості на прикладі побудови шаблону вручну, вам буде легко створювати інші шаблони в середовищі Expression Blend IDE.
Отже, створіть новий проект програми WPF, надавши йому ім'я WpfTemplatesByHand. Після цього додайте одну кнопку (об'єкт типу Button) на монтажному столі у вікні типу Window. На даний момент кнопка візуалізується за допомогою пов'язаного з нею шаблону, який використовується за умовчанням. Як згадувалося раніше, цей шаблон є ресурсом, який вбудовується у відповідну бібліотеку на платформі WPF або Silverlight. Визначаючи свій шаблон, ви по суті замінюєте набір інструкцій з шаблону, що використовується за замовчуванням, власним набором інструкцій.
Наприклад, використовуйте наступний шаблон для кнопки в розмітці XAML:
У наведеній вище розмітці визначено шаблон, що складається з іменованого елемента керування типу Grid, що містить, своєю чергою, елементи керування типу Ellipse і Label. А оскільки рядки або стовпці сітки не визначені, то кожен наступний нащадок об'єкта типу Grid розташовується над попереднім, що дає змогу легко відцентрувати вміст даного об'єкта за допомогою його властивостей VerticalAligment (Вирівнювання по вертикалі) та HorizontalAligment (Вирівнювання по горизонталі). Зверніть також увагу на те, що весь вміст злементу розміткиприсвоюється властивості Template елемента керування типу Button в елементі розмітки.
Для подальшої перевірки свого шаблону організуйте на панелі Properties обробку події Click, що настає після натискання на кнопці, представленої об'єктом типу Button.
Збереження шаблонів у вигляді ресурсів
На даний момент ваш шаблон вбудований у конкретний злемент управління типу Button, що, безумовно, обмежує його повторне застосування. В ідеальному випадку можете помістити свій шаблон круглої кнопки в словник ресурсом, щоб неодноразово використовувати його в різних проектах, або хотіли б перенести його в контейнер ресурсів програми, щоб ще раз скористатися ним у рамках поточного проекту.
Отже, перемістіть ресурс локального звичаю типу Button на рівень програми. Для цього спочатку знайдіть властивість Template цього об'єкта на панелі Properties. Потім відкрийте меню додаткових параметрів, клацнувши на білому квадратику праворуч від текстового поля цієї властивості. Виберіть із цього меню командуConvert to New Resource :
Визначте у діалоговому вікні новий шаблон, що зберігається під ім'ям RoundButtonTemplate (Шаблон круглої кнопки) як ресурс програми.
Зверніть увагу, що розмітка, що описує вихідний об'єкт типу Button, видозмінена. Як показано нижче, як Template цього об'єкта ваш шаблон встановлений як спеціальний іменований ресурс:
Цей ресурс тепер доступний для всієї програми, а отже, в цій програмі можна визначити скільки завгодно круглих кнопок. Додайте ще два елементи керування типу Button на монтажному столі вихідного вікна типу Window. Потім перейдіть до панелі Properties і встановіть у властивості Template кожного з цихелементів управління ресурсом RoundButtonTemplate:
Впровадження візуальних підказок за допомогою тригерів на платформі WPF
Коли ви визначаєте спеціальний шаблон, видаляються також усі візуальні підказки, визначені у шаблоні, що використовується за замовчуванням. Нагадаємо, що шаблон, що використовується за замовчуванням, містить інструкції по розмітці, в яких повідомляється, яким чином повинен виглядати елемент управління при настанні в інтерфейсі певних подій, наприклад, коли цей елемент отримує логічний фокус, коли на ньому проводиться клацання кнопкою миші, коли він активізується (або робиться неактивним) тощо. Користувачі вже звикли до подібних візуальних підказок, оскільки вони створюють хоч якусь ілюзію реакції елемента інтерфейсу користувача на його дотик.
У шаблоні RoundButtonTemplate, що розглядається тут, подібна розмітка не визначена, а отже, незалежно від дій користувача по відношенню до елемента управління, що оформляється за цим шаблоном, зовнішній вигляд самого елемента змінюється. В ідеальному випадку зовнішній вигляд елемента управління повинен хоч трохи змінюватися, коли на ньому проводиться клацання кнопкою миші.
Наприклад, він може змінювати свій колір або зменшуватися в розмірах, щоб дати користувачеві наочно знати про зміну свого стану.
Після першого випуску платформи WPF для реалізації подібних візуальних підказок шаблон вводилося будь-яку кількість тригерів, які зазвичай повинні були змінювати значення властивостей об'єкта або починати анімацію по розкадрування або робити те й інше, коли ставало істинним умова спрацьовування тригера.
Як вправу з реалізації такого підходу на практиці оновіть шаблонRoundButtonTemplate, як показано в наведеній нижче розмітці. Після внесення наведених нижче змін колір фону елемента керування ставатиме блакитним, а колір переднього плану жовтим при наведенні курсору миші на цей елемент.
Якщо ви ще раз запустите свою програму на виконання, то виявите зміну кольору кнопки, коли курсор миші опиняється в межах її меж. Зверніть також увагу на те, що даний конкретний елемент
Наведена вище розмітка не повинна вас особливо бентежити. Адже більшість програмуючих на платформі WPF погоджуються з тим, що встановлювати тригери вручну — заняття малопривабливе. Тому далі буде показано, як панель Triggers використовується в Expression Blend для автоматичного формування логіки роботи тригерів.
Отже, у вас є спеціальний шаблон з кількома візуальними підказками, впровадженими за допомогою тригерів на платформі WPF.