Стилизация приложений 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», которое содержит некую стандартную форму входа в систему для пользователя.

 

image001

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

 

 image002

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

 

 image003

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

 

 image004

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

 

image005

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

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

 

 image006

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

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

 

 image007

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

 

 image008

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

 

 

 image009

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

 

 image010

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

 


Стили в WPF

 

 

image011

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

 

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

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

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

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

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

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

 

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

 

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

 

 image012

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

 

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

 

 image013

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

 

 image014

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

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

 

 image015

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

 

 image016

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

 

 image017

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

 

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

 

 

 image018

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

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

 

 image019

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

 

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

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

 

 image020

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

 

 image021

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

 

 image022

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

 

 image023

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

 

 image024

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

 

 image025

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

 

image026

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

 

 image027

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

 

 image028

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

 

 image029

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

 

 image030

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

 

 image031

 

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

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

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

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

 

 


Comments (5)

  1. Дима, это что за боян? 🙂

    Такие статьи нужно было года 3 назад писать.

  2. tehnolog says:

    не согласен с сергеем. кто-то может только сейчас переходить на WPF и статья будет вполне актуальна.

  3. Дима, ну правда, этому проекту уже более 6 лет – я еще в 2004-м году с ним работал.

  4. all says:

    Дима, такие статьи нужны и продолжай именно так. найти толковую литературу, где не только теория, но и разобранный пример. Нужно два примера первый простой а второй сложнее.

    С уважением А.И.

  5. SheLLest says:

    Только недавно перешёл с WinForms на WPF.ОЧЕНЬ ПРИГОДИЛАСЬ СТАТЬЯ!

    А свои мнения,что это "баян" засуньте куда поглубже.

    Люди имеет свойство всегда обучаться,поэтому информация старой не бывает.Я к примеру по схемотехнике – очень часто приходится читать книги ещё выпущенные в СССР.Потому что всё до сих пор актуально.Азы знать надо.

Skip to main content