Дизайнеру

Часть 1. Обзор инструментов

Одним из главных преимуществ технологий Silverlight и WPF является возможность разделения работы дизайнера и разработчика в одном проекте без печальных последствий для визуальной составляющей и/или функциональности продукта. Поэтому логично предоставить каждому участнику проекта свой инструмент для выполнения работы. Специально для работы над визуальной составляющей был создан пакет Expression Studio, который включает в себя 5 инструментов:

· Expression Design

· Expression Blend

· Expression Media

· Expression Web

· Expression Encoder

Подробнее узнать о каждом из этих инструментов вы можете, прочитав отзыв о Microsoft Expression Studio.

Основным инструментом по отношению к Silverlight является Expression Blend – мощный WYSIWYG – редактор XAML-файлов (что такое XAML читайте в разделе «Начинающему»), позволяющий создавать интерфейсы для Silverlight-приложений, к которым программисты смогут написать функционал без каких-либо визуальных преобразований со своей стороны.

На данный момент последней версией является Expression Blend 2 с установленным пакетом обновлений SP1. Данная версия позволяет создавать интерфейсы как для Silverlight 1.0 приложений, так и для проектов, написанных на Silverlight 2. Ссылки на все упомянутые инструменты вы найдете в конце статьи.

От слов перейдем к делу, давайте создадим свой проект с помощью Expression Blend.

Часть 2. Создание графического интерфейса в Expression Blend 2

В этой части мы рассмотрим рассмотрим разработку Silverlight приложений в визуальном режиме.

Итак, давайте посмотрим, как выглядит Expression Blend с открытым проектом.

Сразу, можно сказать, невооружённым глазом видно разительное отличие инструментов для разработчиков и для дизайнеров. Но если посмотреть на сам открытый проект, то можно увидеть всё тоже, что мы видим при просмотре проекта в Visual Studio, ведь формат проектов используется один и тот же. И в Visual Studio можно открыть проект, созданный в Expression Blend и соответственно наоборот.

Более того, работая над проектом в Visual Studio, можно открыть этот же проект в Expression Blend буквально двумя кликами мыши. Надо просто кликнув правой кнопкой мыши по XAML файлу в «Solution Explorer», выбрать в контекстном меню пункт «Open in Expression Blend».

Теперь пришло время открыть Expression Blend и сделать в нём что-нибудь, но перед этим, хочу предупредить читателя, что я не дизайнер, а разработчик, и графический дизайн приложений у меня получается не таким красивым, как хотелось бы. Поэтому не судите строго, если я выберу не тот цвет или шрифт, Ваш собственный выбор никто не ограничивает.

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

Итак, давайте создадим новый проект, для этого выберем File->New Project, а в открывшемся окне выберем тип проекта «Silverlight 2 Application».

После нажатия на кнопку «OK» будет создан проект Silverlight приложения.

Blend включает в себя полноценный, в отличие от Visual Studio, графический (WYSIWYG - What You See Is What You Get) дизайнер Silverlight приложений. Но Вы также можете посмотреть и отредактировать и XAML код для любой страницы или пользовательского элемента управления. Можно приключаться между режимом просмотра дизайна, XAML кода и одновременного просмотра и того и другого. При этом изменения, сделанные в графическом режиме, сразу же отражаются на XAML коде и наоборот.

Давайте теперь посмотрим на палитру с инструментами (Tool Palette). Она достаточно сильно отличается от того, что мы видели в Visual Studio, но должна быть хорошо знакома тем, кто работал с Adobe Photoshop, Flash и другими графическими пакетами.

Коротко перечислим инструменты, представленные на палитре:

The Selection tool

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

The Direct Selection tool

Данный инструмент позволяет выделять и редактировать части сложной фигуры, созданной, например, с помощью пера (Pen), в отличие от предыдущего инструмента, который рассматривает фигуру как единое целое.

The Zoom tool

Данный инструмент позволяет приближать и удалять рабочую область (то есть изменять масштаб), кликнув по ней. Также выбрав данным инструментом некоторый прямоугольник в рабочей области, который хочется приблизить, можно изменить масштаб так, что выделенный прямоугольник займёт максимальное пространство в видимой части рабочей области.

The Eyedropper tool

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

The Paint Bucket tool

Это знакомый практически каждому инструмент для заливки фигур каким-либо цветом.

The Brush Transform tool

Это инструмент для манипуляции с градиентной заливкой графических элементов (сама градиентная заливка задаётся отдельно).

The Pen/Pencil tools

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

Rectangle, Ellipse, and Line.

Это коллекция различных геометрических фигур, таких как прямоугольник (Rectangle), эллипс (Ellipse) и линия (Line).

Layout controls

Это коллекция менеджеров размещения (Layout Managers), служащих для позиционирования элементов управления в Silverlight приложении. Сюда входит сетка (Grid), Canvas, StackPanel, ScrollViewer и Border.

Text controls

Это коллекция элементов управления, предназначенных для работы с текстом. Сюда входит поле для ввода текста (TextBox) и элемент для вывода текстовой информации (TextBlock).

Recently used controls

Это коллекция наиболее часто используемых элементов управления. Наверное, самый популярный элемент управления из этой коллекции – это кнопка (Button), также сюда входят CheckBox, RadioButton, ListBox и другие.

The Asset Library

Это коллекция всех стандартных и пользовательских элементов управления, стилей, а также видео и аудио файлов, импортированных в приложение.

Последняя коллекция особенно интересна. Нажав на кнопку «>>» нам откроется достаточно объёмный список элементов управления. Если Вы не можете найти какой-то элемент управления, убедитесь, что Вы поставили галочку «Show All» в правом верхнем углу окна «Asset Library». В этом же окне для поиска элементов управления Вы можете использовать поле «Search».

Давайте теперь выберем несколько элементов управления и разместим их на странице «Page.xaml». Пусть это будут две кнопки(Button), TextBox и Slider.

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

Теперь мы изменим внешний вид одной из кнопок. Для этого выделим левую кнопку и перейдём на вкладку «Properties» в правой части окна приложения. Давайте установим для фона кнопки градиентную заливку (для этого надо установить для фона кнопки градиентную кисть). Градиентная кисть является третьим элементом в списке кистей, и её выбор показан на рисунке (обратите внимание на второй элемент в списке – это однотонная кисть). Установим какие-нибудь два цвета для градиентной кисти, скажем, жёлтый и красный. Тут надо сказать, что двойным кликом по полосе выбора цвета можно добавить в градиентную заливку третий, четвёртый, да и любой нужный цвет, то есть создать градиент из необходимого количества цветов. Также перемещая ползунки цветов, можно задать их положение в градиентной заливке.

Теперь установим шрифт для кнопки. В разделе «Text» выберем шрифт «Comic Sans MS» и зададим размер шрифта, равный «18» пунктам.

После всего этого внешний вид нашей кнопки немного изменился. Но это ещё не всё. Давайте теперь изменим шаблон кнопки.

За внешний вид каждого элемента управления отвечает некоторый шаблон. Для каждого из элементов управления есть предопределённый системный шаблон, в соответствии с которым элемент управления и отображается. Мы же сейчас скопируем шаблон по умолчанию и изменим его. Для этого в контекстном меню по нажатию на кнопку выберем «Edit Control Parts (Template) -> Edit a Copy». Этим действием мы создаём копию системного шаблона для кнопки, а не начинаем с пустого места (то есть с пустого шаблона, если бы мы выбрали «Create Empty»).

После нажатия на пункт меню, появилось окно, в котором можно задать имя для шаблона и то, где шаблон будет определён: на уровне странице или на уровне приложения в целом. Хочется отметить, что в данном случае шаблон будет определён внутри стиля, устанавливаемого для данного элемента управления.

.

Нажмём на кнопку «OK», и после этого в панели «States» появятся те графические состояния, в которых может находиться кнопка. Выберем состояние под названием «MouseOver». Как следует из названия, кнопка переходит в данное состояние, когда над ней находится курсор мыши. Назначение остальных состояний также следует из их названий.

Далее в панели «Objects and Timeline», где в данный момент идёт редактирование шаблона кнопки, выбираем визуальный элемент верхнего уровня, в котором содержатся все остальные визуальные элементы. В данном случае таки элементом будет менеджер размещения сетка (Grid).

Теперь давайте повернём кнопку на некоторый угол. После этого в приложении при наведении мышкой на кнопку, кнопка будет поворачиваться. Также в панели «States» можно задать время для данной анимации поворота. По умолчанию поворот будет длиться 0,2 секунды. Кроме того, мы могли бы не только повернуть кнопку, но и изменить любые другие её свойства, скажем тот же цвет фона, ширину бордюра или начертание шрифта.

Пора нам запустить получившееся приложение. Выберем в меню «Project -> Test Solution» или нажмём кнопку «F5». Откроется окно браузера, где мы увидим наше приложение.

Наведите мышкой на кнопку и проверьте действие анимации.

Итак, я показал самые основы создания Silverlight приложений в Expression Blend. Мы создали приложение с несколькими элементами управления, для одного из которых задали некоторые свойства (такие как цвет фона, который в нашем случае являлся градиентом, размер и начертание шрифта) и изменили шаблон так, что при наведении на элемент управления мышкой, последний поворачивался бы на заданный угол.

Материалы для давнейшего изучения Вы можете найти в разделе Полезные ресурсы. Удачи Вам в разработке Silverlight приложений.

Часть 3. Полезные ресурсы

• Официальный сайт Expression Studio