Использование шаблонов элементов управления для управления их видом в Silverlight 2
В данном уроке мы рассмотрим несколько путей специализации элементов управления и затем завершим цикл финальным редактированием интерфейса нашего Digg-приложения при помощи данных техник.
Изменение содержимого элементов управления
В первой части данной серии мы добавили простую кнопку на страницу и продемонстрировали способ настройки ее текста в значение "Push Me!". Затем мы создали обработчик события "Click", который выполнял определенный код при нажатии на кнопку:
В обозревателе это будет переработано в следующую кнопку :
Одной из удивительных особенностей элемента управления Button является свойство "Content", которое может быть не только простой строкой, как "Push Me!". Мы можем настроить свойство "Content" в любую последовательность форм (Shapes) и элементов управления (Controls).
К примеру, мы можем внедрить StackPanel с элементами <Image> и <TextBlock> в него:
Это заставит нашу кнопку выглядеть следующим образом при запуске. Обратите внимание на то, что она сохраняет ту же функциональность (нажмите на нее и кнопка также вернется в исходное положение, и обработчик события щелчка сработает как и раньше):
В качестве альтернативы мы можем использовать элементы управления Shape (такие как Ellipse) для создания специализированной векторной графики внутри кнопки.
Обратите внимание? как я заполняю элемент управления Ellipse кистью RadialGradientBrush для того, чтобы придать ей эффект отражения:
Мы можем даже вставлять интерактивные элементы управления, такие как элемент управления Calendar в пределах кнопки (Button):
В указанном выше примере Calendar полностью интерактивен - это означает, что пользователи могут передвигаться вперед и назад по месяцам, выбрать дату в календаре и затем нажать содержащуюся кнопку для вызова обработчика события "Click".
Такая специализация работает не только для элемента управления Button, но также и для всех других элементов, являющихся наследниками базового класса ContentControl.
Изменение элементов управления при помощи шаблонов (Control Templates)
Модель элемента управления, используемая Silverlight и WPF, позволяет вам делать многое другое. В качестве опции, вы можете полностью заменить визуальное дерево элемента управления всем чем вы хотите - при этом поведение элемента останется нетронутым.
К примеру, допустим мы не хотим, чтобы наша кнопка выглядела как прямоугольник, а вместо этого хотим, чтобы она была следующего формата:
Это можно реализовать, создав стиль "RoundButton" в файле App.xaml. В нем мы перепишем свойство "Template" и предоставим шаблон (ControlTemplate) , который заменяет стандартную визуализацию кнопки элементом управления Ellipse с TextBlock в нем:
Мы затем можем заставить элемент <Button> ссылаться на данный ресурс (Style) для использования внешнего вида "RoundButton":
Внедрение содержимого в пределах наших шаблонов элементов управления (Control Templates)
Вы наверняка заметили кое-что в нашем шаблоне элемента управления "RoundButton" , а именно то, что размер Button и отображаемого в нем содержимого жестко заданы (оно всегда "Push Me!").
Хорошей новостью является то,что WPF и Silverlight позволяют настраивать все это. Мы можем выполнить это при помощи {TemplateBinding ControlProperty} синтаксиса расширения в шаблоне для того, чтобы привязать свойства элемента управления. Это позволит нашему шаблону адаптироваться, в то время как разработчик устанавливает свойства на элемент управления:
Обратите внимание как вместо добавления элемента <TextBlock> для отображения содержимого мы используем элемент <ContentPresenter>. Это позволит нам отображать при помощи кнопки не только текстовые строки, но и любое специализированное содержимое (также, как мы делали раньше в данном уроке).
Мы можем использовать указанные выше стили для трех следующих кнопок (содержимое и настройки свойств у каждой разные):
Указанная кнопка будет выглядеть следующим образом (да - масштабированный элемент управления Calendar также поддерживает перелистывание и выборку данных!):
Если идти дальше, то мы можем опционально добавить состояния к шаблону (ControlTemplate) , для того, чтобы обрабатывать состояния кнопки "hover" (наведение), "focus" (фокус) и "pushed" (нажатая). Данная возможность позволяет нам создать особенную интерактивность с пользователем, невозможную в случае с HTML. Она также позволяет дизайнерам интегрировать анимацию и другие мощные принципы.
Разработчики, работая с данными элементами управления в приложении могут оставаться безразличными к данным специализациям и обрабатывать события элементов, манипулировать моделью объектов элемента нормальным способом, оставив специализацию внешнего вида на дизайнеров, которые при этом смогут использовать стили и шаблоны.
Наводим порядок в нашем приложении Digg
Теперь, когда мы рассмотрели основы работы шаблонов элементов управления, давайте испробуем их в некоторых местах, чтобы добавить больше блеска пользовательскому интерфейсу нашего приложения.
На данный момент есть одно место где точно необходима доработка - кнопка закрытия ("Close") на нашем пользовательском элементе управления:
Хорошей новостью является то, что это легко исправить всем - и разработчикам, и дизайнерам. Мы можем добавить ControlTemplate в стиль "CloseButton" файла App.xaml , а также некоторые специализированные векторные формы для предоставления более привлекательного вида кнопке (заметка: также можно добавить некоторую анимацию для случаев наведения мыши и т.д. для придания более профессионального вида):
Мы заново запустим приложение и кнопка теперь будет выглядеть следующим образом:
Интересно то , так это то, что нам не пришлось ничего менять ни в коде нашего приложения, ни изменять разметку XAML в реальных элементах управления с целью изменения внешнего вида. Это разделение процесса написания кода от дизайна позволяет получить отличный процесс разработки и дизайна при работе с приложениями Silverlight и WPF.
Следующий шаг
На этом мы закончили реализацию нашего приложения Digg в Silverlight.
Нашим последним шагом будет реализация данного приложения в качестве приложения рабочего стола. Хорошей новостью является то, что это не так уж и сложно - поскольку Silverlight является частью полноценных WPF и .NET Framework, поэтому принципы, код и содержимое можно с легкостью перенести.