Елементи управління стилем (Styling Controls) у Silverlight - все про IT та програмування
Written on 17 Березень 2009 . Posted in WPF та Silverlight
ЗМІСТ
Скінінг елемента управління
Давайте створимо повноцінний шаблон із нуля і побачимо, що станеться. Зрозуміти сам спосіб роботи і повна реалізація - це не те саме. Повернімося до проекту, з яким ми працювали, і зробимо деякі зміни, перш ніж ми почнемо скінінг кнопки. Перетягніть стиль підказки на п'ять елементів, якщо ви ще не зробили цього (останні два вийдуть за межі, але це нормально). Як тільки ви зробите це, клацніть двічі по елементу керування (UserControl) в Objects and TimeLine і, захопивши праворуч елемент управління, змініть його ширину до 500. Тепер вам знадобиться змінити розмір у лівої колонки, і щоб це було легко - перейдіть в режим Split і просто налаштуйте максимальну ширину (Max) з 150 на 250. Ваш елемент управління тепер має виглядати приблизно так
Малюнок 6-15. Готовність до скінінгу кнопки зміни книги
Створення круглої кнопки
Ми хочемо змінити вигляд кнопки з нормальної форми на більш привабливу круглу форму зі словом Change в ній. Кнопка розпізнаватиме курсор тоді, коли він буде над нею і повертатиметься при натисканні. Також текст буде затемнений у тих випадках, коли вона не буде доступною. Для того, щоб почати, знайдіть кнопку в закладці Objects and Timeline (і назвіть Change) і клацніть правою кнопкою миші. Виберіть Edit Control Parts > Create Empty, як показано малюнку 6-16.
Малюнок 6-16. Створення порожній шаблон для кнопки
У діалоговому вікні назвіть новий шаблон RoundButon і розташуйте його у програмі (що створить новий ресурс у App.xaml). Blendперейде в режим редагування шаблону (Template), який відрізняється від усіх тим, що має закладки у верхній частині екрана. Ваш порожній візерунок буде мати табличну сітку. Наша кнопка складатиметься з еліпса (Ellipse), який також має текст і буде заповнений лінійним градієнтом.
Почніть з розташування еліпса в табличній сітці так само, як ви б зробили це в нормальному режимі дизайнера. Встановіть ширину та висоту для початку в 75 і встановіть вирівнювання в розтягуюче значення (Stretch). Ми хочемо заповнити еліпс радіальним градієнтом (на відміну стандартного лінійного). Клацніть по кнопці пензля заповнення, клацніть по кнопці пензля з градієнтом, а потім у нижній лівій частині закладки кистей (Brushes) натисніть на опцію Radial gradient, як це показано на малюнку 6-17
Малюнок 6-17. Вибір градієнтного пензля
Залежно від того, наскільки вам зручно використовувати інструмент, ви можете встановити зупинки градієнта та його орієнтацію у віконці кистей (Brushes) або, якщо вам так буде легше, зробити це явно у Xaml. Ось як це має виглядати у Xaml:
Ваш еліпс має виглядати так
Малюнок 6-18. Еліпс з радіальним градієнтом
Далі ми хочемо додати текст (зокрема слово Change!) до кнопки. Для цього перетягніть текстовий блок кудись над еліпсом і потім перейдіть у вікно властивостей, де ви зможете змінити його розмір і позицію, як це показано на малюнку 6-19.
Малюнок 6-19. Властивості, встановлені для кнопки
Малюнок 6-19 був зменшений для того, щоб зміг поміститися - були прибрані частини, які не були змінені. На даному етапі ваша кнопка має виглядати приблизно так
Малюнок 6-20. Кнопка здоданим текстом
Керування станом кнопки
Як вже обговорювалося вище, кнопка має чотири стандартні стани ("Common states") і два стани фокусу ("Focus states"). Тепер нам треба налаштувати зовнішній вигляд для кожного з цих станів, і за бажання налаштувати час переходу між цими станами.
Стан MouseOver
Давайте почнемо з додавання кнопки дії при наведенні курсору на неї. Це простий перехід, але нам необхідно оформити його для еліпса, тому натисніть на еліпс в панелі Objects and Timeline, а потім в закладці переходів (Transform) на кнопку масштабування, як показано далі
Малюнок 6-21. Перетворення масштабу еліпса
При натисканні на кнопку масштабування значення x і y змінюються в 1. Натиснувши MouseOver і ввівши 1.2 в X і Y ви вказуєте Blend те що, що може MouseOver кнопка розпливається на 20%.
Щоб перевірити, натисніть Page.xaml в закладках і поверніться в режим редагування. Видаліть існуючу змінену кнопку, натисніть на закладку ресурсів і перетягніть нову кнопку на полотно. Перейдіть до властивостей, назвіть вашу кнопку Change (існує код, який залежить від кнопки, названої Change) і запустіть програму.
Не натискаючи кнопку, пересуньте курсор на неї і назад. Вона змінює розміри, але виглядає це все по-мультяшному. Зміни з'являються раптово (виглядають раптовими) – клацніть правою кнопкою миші по кнопці та виберіть Edit Control Parts> Edit Template, тим самим повернувшись до режиму редагування шаблону. Зверніть увагу, що стандартний перехід дорівнює 0 секунд. Давайте змінимо цей на 0.2 секунди і знову запустимо - ви побачите величезну різницю.
Стан Pressed
Напевно, найцікавішимДизайн є той, що відбувається при натисканні кнопки. У нашому випадку все буде досить просто – кнопка просто повернеться та впаде. Натисніть Pressed, тим самим вказуючи, що це саме той стан, який ви хочете налаштувати. Натисніть на Ellipse для того, щоб вказати, що ви хочете змінити властивості еліпса. У вікні властивостей натисніть на другу кнопку (rotate) у вікні Render Transforms (обробити переходи) і встановіть кут повороту 25 градусів. Далі натисніть першу кнопку (transition) і змініть з 0 на 5.
Перехід відбувається нормально, але чомусь не виконується поворот. Звичайно, як ми можемо побачити поворот круглої кнопки? Ви можете повернутися до редагування шаблону і зробити коло більш еліптичним (тобто встановити ширину, що дорівнює 90), що зробить поворот видимим, але не дуже красивим.
Як альтернативу ми можемо повернути текст замість еліпса. У цьому випадку ми матимемо більш елегантну реакцію, як це показано на малюнку 6-22.
Малюнок 6-22. Повертання тексту при натисканні кнопки
Ви можете виконати це, перейшовши назад до шаблону. На цей раз зробіть це, переключившись до закладки ресурсів (Resources), розгорнувши App.xaml і двічі клацнувши по RoundButton. Тепер ви можете натиснути на ButtonEllipse і повернути поворот, а потім натиснути на ButtonText і встановити кут повороту. Гарно, правда?
Стан Disabled
Останній стан, який необхідно встановити, є Disabled. Натисніть на ButtonText - і давайте змінимо її колір з білого на сірий, щоб вказати неактивність кнопки. Оскільки зміна кольору може відбутися дуже швидко, натисніть AddTransition в межах кнопки Disabled, як показано на малюнку 6-23
Малюнок 6-23. Додаванняперемикання
Виберіть першу опцію (з будь-якого стану - у вимкнений) та встановіть час у 0.1 секунди. Натисніть знову кнопку додавання переходу (Add Transition) , виберіть цього разу Disabled > * і встановіть перехід назад у будь-який стан значення 0.1 секунда - стану повинні виглядати так, як це показано на малюнку 6-24
Малюнок 6-24. Вікно перемикання стану та час спеціалізованих перемикань