Стилизация приложений WPF

Преимущества стилизации.

В чем преимущество стилизации, и чем она нам может быть интересна.

Суть стилизации заключается в том, чтобы в рамках нашего приложения динамически или статически изменять визуальное представление без изменений программной логики, поведенческой составляющей нашего приложения.

Таким образом, в случае динамического изменения визуализации происходит применение темы (skin) - некоего шаблона расположения элементов или их внешного вида.

В статическом случае, когда не стоит задача динамически переключать тему, изменение визуализации используется для определенной версии пользовательского интерфейса, под конкретного заказчика. Основная суть заключается в повторном использовании кода и логики, которая обрабатывает поведенческую модель приложения. Соответственно, мы можем менять визуализацию, а весь наш код, реализующий логику работы, используется повторно, экономя нам время и усилия.

 

 

Windows Presentation foundation.

Что мы получаем с точки зрения Windows Presentation foundation.

Основной идее WPF является абстрагирование визуализации от поведенческой модели.

Например, возможность элементов управления полностью переопределять свою визуализацию и фокусироваться с точки зрения кода только на поведенческой модели. Допустим, при обработке нажатия на кнопку. Соответственно, вся визуализация представляется в декларативном виде.

С одной стороны, это напоминает ASP.NET, где у нас есть mark up, код behind. Однако WPF, опираясь на всю мощь клиентской платформы Windows, открывает фактически безграничные возможности визуализации векторного определения элементов управления, не ограничивая нас в стандартном html или dhtml.

Вся визуализация отрисовывается с помощью DirectX и аппаратного ускорения, позволяя бесшовно интегрироваться с DirectX.

Также WPF дает возможность интегрироваться с WinForms, позволяя размещать как winforms элементы управления в WPF так и наоборот.

Существуют сценарии работы именно с WPF через браузеры, например Internet Explorer , Firefox и др.

 

Декларативное представление

Давайте рассмотрим на одном очень простом примере возможность динамического переключения тем и декларативного представления.

Откроем приложение «Logon Sample», которое содержит некую стандартную форму входа в систему для пользователя.

 

Здесь мы видим, что  пользовательский интерфейс определяется декларативно, т.е. существуют различные элементы управления -  кнопки, списки и тд. В свою очередь, с ним ассоциировано такое понятие, как стиль, разграничивающее стилизацию некими именованными идентификаторами для элементов управления одинакового типа, например, для кнопки.

 

 

И далее у нас есть стили, которые как раз и определяют, как должен визуализироваться соответствующий элемент. У каждого стиля есть ключ, по которому на него происходит ссылка, тип, к которому он применяется,  и возможность переопределения свойств, как стандартных, например цвета, так и переопределение полностью, например, стиля рендеринга элемента управления, т.е. переопределение его визуальных элементов при помощи так называемых ControlTemplates.

 

 

И с точки зрения кода, который здесь выполняется, происходит подключение тем, выраженных как .xaml, и выбор конкретной будет зависеть от изменения в списке пользователя, с которым мы работаем на данный момент. 

 

 

Соответственно, у нас есть обработчик кнопки, который совершает простую операцию, вводит в title сообщение.

 

Посмотрим, как вне зависимости от изменения пользовательского интерфейса, обрабатывается данный простейший обработчик.

И так, у нас применяется стандартная тема, работает обработчик этого события и, если динамически переключить на другую тему, мы увидим некоторые незначительные изменения, а именно – изменения цвета. Интерфейс остается прежним.

 

 

Однако, возможности стилизации WPF позволяют существенно изменять визуальное представление интерфейса. 

В данном случае мы вновь видим, как произошло декларативное определение анимации, которая используется при наведении курсора мыши. У нас по-прежнему работает обработчик, т.е выполняется тот же самый код, а при помощи визуального переопределения существующие элементы управления без какого-либо изменения кода или логики с нашей стороны могут принимать совершенно различный вид, поскольку здесь идет полностью векторная отрисовка. Как можно убедиться, возможности стилизации фактически безграничны.

 

 

Что очень важно, дизайнер также может принимать участие в этом процессе, используя инструмент Expression Blend.

 

 

Он может работать над тем же самым проектом, ресурсами и в удобном графическом редакторе осуществлять работу со всеми доступными переопределениями и др.

 

 

 

Результатом работы будет являться тот же ресурсный словарь с разрешением .xaml, что очень удобно.

 

 

И так, мы рассмотрели один из самых простейших примеров. Однако, стили и стилизация WPF способны на гораздо более интересные и разноплановые сценарии.

 

Стили в WPF

 

 

Здесь мы еще раз видим определение стиля. У него есть некий ключ, по которому его можно сопоставить, тип, к которому применяется, и дальше соответствующие переопределения, включая шаблон, элементы управления. Более того, есть интересная возможность Data Tenplate, которая представляет собой определение стилей или визуализации элементов данных в сценариях. К примеру, связывания или другими словами databyting.

 

Возможности стилизации WPF

Стили очень хорошо абстрагируются. Они могут присутствовать на любом уровне иерархии приложения, определяться в отдельных ресурсных файлах или в ресурсных словарях, которые мы уже видели.

Фактически, они позволяют переопределять любые свойства элементов управления.

Возможность полностью векторно переопределять визуализацию элементов управления, визуализацию данных с помощью Data Template.

Определять или переопределять анимационные последовательности для элементов управления

Более того, есть целый ряд готовых тем, позволяющих быстро и просто использовать стили в ваших приложениях.

 

Динамическая визуализация данных с использованием стилизации в системных темах Windows.

 

С точки зрения визуализации данных у нас имеется некое простое приложение доступа к данным, у которого есть listbox, т.е. список, с которым ассоциирован стиль, и несколько, скинов.

 

 

По умолчанию стоит максимально простой скин.

 

Есть скины, определяющие так называемые DataTemplate, т.е. шаблоны, указывающие каким образом выводить элементы данных.

 

 

И самый сложный скин, определяющий DataTemplate и целый ряд других элементов управления.

 

 

Давайте посмотрим, как это все работает.

Запускаем приложение список сотрудников. К каждому их них имеется своя фотография и список заказов. Это листбокс при использовании визуализации по умолчанию, т.е. без DataTemplate.

 

 

Включая первый динамический DataTemplate, мы видим, как меняется каждый из элементов данного листбокса. Он становится составным из целого ряда значений, здесь появляются фотографии и тд.

 

 

Более сложный, третий DateTemplate может создать аналогичную визуализацию, но с анимациями. Перед нами по-прежнему листбокс с той же поведенческой моделью, но выглядит он уже совершенно иначе. В данном случае затронут scrollbar, grid и тд.

 

 

Таким образом, мы видим мощь Templates при работе с данными. Более того, уже существует целый ряд готовых темплейтов, найти которые можно по ссылке www.codeplex.com/wpfthemes. Сам проект находится на Codeplex.com и постоянно пополняется новыми темами, которые вы можете использовать в своих приложениях.

 

Только что мы с вами посмотрели пример, когда элементы управления обращаются к некому именованному стилю, но в WPF есть также возможность переопределения отображения элементов управления и по умолчанию.

 

 

 

Здесь видно, что элементы пользовательского интерфейса не содержат ссылки на какой-либо стиль. Это просто элементы пользовательского интерфейса. Сейчас они выглядят стандартно, к ним можно применять различные темы.

Запуская, мы увидим, как стандартные элементы управления могут динамически менять свой внешний вид.

 

 

Таким образом, вы можете достаточно легко, используя элементы WPF по умолчанию, применить любую из существующих бесплатных тем и изменить внешний вид приложений фактически до неузнаваемости.

 

В заключение, давайте рассмотрим еще одну интересную возможность, которая поддерживается шаблонами пользовательского интерфейса и темами в WPF – это стилизация в соответствие с системной темой Windows.

Итак, у нас имеется приложение со стандартными элементами управления. Здесь нет никаких атрибутов, ссылающихся на стили, однако оно выглядит несколько иначе.

 

 

Это происходит по причине использования тем, а именно в инфраструктуре WPF передается информация о том, что в Assembly находятся специальные словари, соответствующие системным темам windows (в Assemblyinfo.cs мы указали SourseAssembly).

 

 

Далее была создана директория themes, где размещены ресурсные словари со специальными названиями.

 

 

Generic.xaml это словарь по умолчанию, который используется в случае невозможности применить одну из стандартных тем.

 

 

Classic.xaml – это словарь, который применяется при классической теме Windows. Он должен именно так называться.

 

 

Aero.normalclock.xaml – ресурсный словарь, который применяется при использовании aero.

 

 

И теперь мы просто копируем ресурсный словарь из DavesGlossyControls, бесплатных тем, которые нам доступны, в Aero.normalclock.xaml,

 

и ресурсный словарь UXMusicsBubbly.Blue в Classic.xaml.

 

 

И важный момент, в Application.xaml необходимо прописать, что в качестве ресурсного словаря по умолчанию будет использоваться именно наш словарь с необходимыми темами, т.е. ThemeDictionary.

 

 

Запускаем приложение. Сейчас в Windows используется тема aero.

 

 

Теперь давайте попробуем динамически поменять тему Windows, например, на классическую.

 

 

Происходить будет следующее: наше приложение, получив от операционной системы информацию о том, что текущей темой является классическая, начнет использовать другой ресурсный словарь для rendering всех элементов по умолчанию. Приложение меняет дизайн своего пользовательского интерфейса, что является наглядным примером того, как вы можете достаточно легко реализовывать динамическую стилизацию своих приложений, используя готовые темы. 

 

 

 

В итоге, мы видим, что инвестиция времени в изучение WPF сразу же дает вам огромные возможности в произвольной визуализации, даже используя элементы управления по умолчанию, доступные на toolbox, и не ассоциируя их ни с какими стилями. Вы также можете использовать бесплатные стили и динамически применять их в зависимости от системных тем Windows либо по переключателю в вашем приложении, тем самым меняя визуальное представление приложения в соответствие с самыми современными тенденциями в дизайне.

Более того, с точки зрения WPF, на данный момент это мощнейшее в индустрии абстрагирование визуализации от поведенческой модели, т.е. вы можете очень сильно переопределить визуализацию, и будет достаточно сложно догадаться, что это listbox.

Что очень важно, благодаря Silverlight, являющейся подмножеством WPF на том же .xaml, вы можете использовать эти навыки для создания кроссплатформенных интерактивных веб приложений.

Все готовые темы, которые использовались для демонстрации, и многие другие доступны для ваших приложений совершенно бесплатно на сайте www.codeplex.com/wpfthemes