Експресионна смес, контролни шаблони
Дори и най-простият стил наистина служи като малко повече от контейнер за задаване на общите свойства на определен тип контрол. Въпреки всички предимства, които стиловете могат да осигурят, за да улеснят задаването на много от свойствата (цвят, размер на шрифта и т.н.) на контролите от целевия тип, общото изобразяване на контролите остава същото. Следователно, независимо от стила на бутона за управление, той все още има формата на правоъгълен и вероятно квадратен бутон.
Понякога искате да създадете стил, който не само променя редица общи настройки на свойствата за целевия контрол, но и отменя формата на самия контрол. Така че, в конкретен проект може да ви е необходима кръгла форма на бутон или произволна многоъгълна форма, нарисувана с инструмент Pen или Pencil.
Когато искате да създадете стил, който може да промени геометрията на визуализирана контрола, трябва да дефинирате този стил, за да съдържа вградения шаблон за контрол, който е описан в XAML от елемента. И в този елемент за маркиране можете да дефинирате външния вид на новия контрол, да използвате мениджъри на оформление за достъп до тяхното съдържание и да извършите редица други често срещани операции.
Въпреки че шаблонът е най-често използваната част от по-голям стил, все още е възможно да се дефинира самостоятелен обектен ресурс в елемент за маркиране. Чрез конфигуриране на свойството Template на контролите можете да им присвоите конкретни шаблони. Следващият пример за проект ще покаже как се прави това.
По подразбиране външният вид на всяка контрола WPF и Silverlight се изобразява с помощта на асоцииран шаблон по подразбиране. Например шаблонът по подразбиране за контрола на бутон съдържа инструкции за изобразяване на правоъгълния бутон, който познавате толкова добре. Всички други контроли на платформите WPF и Silverlight се представят по същия принцип.
Шаблоните по подразбиране са включени в библиотеките WPF и Silverlight като вграждаеми XAML ресурси и следователно не могат да бъдат директно модифицирани. Както обаче ще бъде показано по-късно, Expression Blend предоставя редица механизми за извличане на копие на шаблона по подразбиране за редактиране.
В допълнение към дефинирането на различни инструкции за изобразяване на общ външен контрол, шаблонът съдържа и инструкции за това как контролът трябва да реагира на потребителския вход и други промени в състоянието. Например шаблонът по подразбиране за контрола за бутон описва как трябва да изглежда бутонът, когато получи логически фокус, когато се щракне в неговите граници, когато стане неактивен и в други състояния.
Представен за първи път като част от API на Silverlight, VSM се използва за инжектиране на визуални сигнали в шаблон на 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, което разбира се ограничава повторното му използване. В идеалния случай можете да поставите вашия шаблон с кръгли бутони в речник с ресурс, така че да можете да го използвате повторно в различни проекти или да го преместите в контейнера за ресурси на приложението, за да го използвате отново в рамките на текущия проект.
И така, преместете локалния команден ресурс от типа Бутон на ниво приложение. За да направите това, първо намерете свойството Template на този обект в панела Properties. След това отворете менюто Разширени опции, като щракнете върху бялото поле вдясно от текстовото поле на свойството. Изберете командата от това меню Конвертиране в нов ресурс:
В диалоговия прозорец, който се отваря, дефинирайте нов шаблон, запазен като RoundButtonTemplate като ресурс на приложение.
Забележете също така, че маркировката, която описва оригиналния обект Button, е променена. Както е показано по-долу, в свойството Template на този обект вашият шаблон се задава като специален именен ресурс:
Този ресурс вече е достъпен за цялото приложение и следователно в това приложение можете да дефинирате колкото искате кръгли бутони. И така, добавете още два контрола за бутони към монтажната област на оригиналния прозорец. След това отидете на панела Properties и задайте свойството Template на всеки от тези контроли на ресурса RoundButtonTemplate:
Внедряване на визуални реплики с тригери в WPF
Когато дефинирате персонализиран шаблон, всички визуални сигнали, дефинирани в шаблона по подразбиране, също се премахват. Спомнете си, че шаблонът по подразбиране съдържа инструкции за маркиране, които ви уведомяват как трябва да изглежда контрола, когато се появят определени събития в потребителския интерфейс, например когато контролата получава логически фокус, когато е щракнат, когато е активиран. (Или е неактивен) и т.н. Потребителите вече са свикнали с този вид визуални сигнали, тъй като създават поне някаква илюзия за елемент на потребителския интерфейс, който реагира на докосването му.
Това маркиране не е дефинирано в RoundButtonTemplate, което разглеждаме тук, и следователно, независимо от действията на потребителя по отношение на контролата, стилизирана с този шаблон, външният вид на самия елемент се променя. В идеалния случай външният вид на контрола трябва да се промени поне леко, когато се щракне върху него.
Например, той може да промени цвета си или да намали размера си, за да позволи на потребителя ясно да знае за промяна в неговото състояние.
От първото издание на платформата WPF в шаблона са въведени неограничен брой задействания за изпълнение на такива визуални сигнали, които обикновено трябваше да променят стойностите на свойствата на обекта или да стартират анимация в раскадровката или да направят и двете, когато задейства състоянието стана вярно.
Като упражнение за практикуване на този подход актуализирайте RoundButtonTemplate, както е показано в маркировката по-долу. След като направите следните промени, цветът на фона на контролата ще стане син, а цветът на преден план ще стане жълт, когато задържите курсора на мишката върху контролата.
Ако стартирате приложението си отново, ще откриете, че цветът на бутона се променя, когато курсорът на мишката е в границите му. Също така имайте предвид, че този конкретен елемент
Горната маркировка не трябва да ви притеснява твърде много. В края на краищата повечето програмисти на WPF са съгласни, че ръчното задаване на тригери не е забавно. Следователно по-долу ще бъде показано как панелът Triggers се използва в Expression Blend за автоматично генериране на логиката на тригерите.
И така, вече имате персонализиран шаблон с няколко визуални сигнала, изпълнени с помощта на тригери в WPF.