Создание элементов интерфейса с помощью Microsoft Expression Blend
Дополнительные материалы к занятию можно скачать 
здесь.
Microsoft Expression Blend - программа от корпорации Microsoft, предназначенная для разработки дизайна веб-интерфейсов и графических настольных приложений, совмещает в себе особенности этих двух типов приложений. Интерактивный WYSIWYG-редактор для дизайна интерфейсов, основанных на XAML-приложениях, для Windows Presentation Foundation и приложения Silverlight. Входит в состав пакета графических программ Microsoft Expression Studio. Expression Blend поддерживает WPF, в котором используется метод OpenType и ClearType, основанный на 2D- и 3D-элементах управления с аппаратным ускорением через DirectX [22].
Blend представляет собой современное средство визуального проектирования интерфейсов, оснащенное встроенным редактором XAML, что позволяет, с одной стороны проектировать интерфейсы не обращая внимания на исходный код, а с другой стороны, позволяет более "тонко" настраивать создаваемый интерфейс.
Так как свойства объектов в Blend неразрывно связаны с возможностями XAML, дальнейшее описание элементов проводится через представление этих объектов в Blend, как графических, так и интерактивных, т.е. так как видит это дизайнер.
Интерфейс Blend
Blend имеет современный интерфейс, привычный как дизайнерам графики, так и веб-дизайнерам.
Рабочее пространство разделено на три основные части.
Все панели позволяют переключаться в "плавающий" режим или исчезать с экрана при помощи "горячих" клавиш. В меню Tools/Options/Workspace есть возможность настройки размеров панелей. Blend использует большое количество "горячих" клавиш, спасибо разработчикам о заботе, большинство сочетаний хорошо известны всем дизайнерам, работающим с графическими программами от Adobe.
Панель инструментов имеет практически стандартный вид для программ редакторов векторной графики и включает в себя основные инструменты создания и редактирования графики плюс специфичные для Blend инструменты и библиотеки стандартных и пользовательских элементов.
По умолчанию в Blend включены две библиотеки интерфейсных элементов System Controls - стандартные элементы и Simple Styles - библиотека-пример построения пользовательских интерфейсных элементов, раскрывающая возможности XAML.
Инструменты рисования
Векторный редактор Blend обладает всеми возможностями современного векторного редактора плюс обладает некоторыми уникальными свойствами.
Инструменты для построения и редактирования векторной графики типичны для многих векторных редакторов и включают в себя редактор кривых, представленный инструментами: Перо (Pen), Карандаш (Pencil), инструмент выделения (Selection) и инструмент непосредственного выделения (Direct Selection), а также инструментами для построения простых геометрических форм: Прямоугольник (Rectangle), Овал (Ellipse) и Линия (Line).
Настройка свойств графических элементов, имеет ряд особенностей, делающих работу дизайнера более удобной, и позволяет достигнуть большей гибкости в построении интерфейса по сравнению с обычными (классическими) способами.
Упражнение 11.1. Работа с контейнером Grid
Запускаем программу Microsoft Expression Blend 4 -> Projects -> New Project
Выберем тип проекта: Silverlight+Web site. Назовем проект p4.
Интерфейс приложения задается в файле MainPage.xaml. Этот файл является xml-документом. Просмотрим его содержимое. Для этого в правом верхнем углу среды разработки выберем закладку Projects.
Щелкнем правой кнопкой мыши по файлу MainPage.xaml -> Edit Externally.
При этом откроется блокнот с содержимым файла MainPage.xaml.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="p4.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White"/>
</UserControl>
Корневым элементом является элемент UserControl. В заголовке документа можно задать ширину и высоту в пикселях. Внутри корневого элемента располагается контейнер Grid, являющийся аналогом Windows Form. Закроем блокнот.
Разместим в контейнер Grid несколько элементов управления, после чего добавим немного программного кода.
Добавим к проекту новую папку, назовем ее Images: Solution Explorer -> p4 -> Add New Folder -> Images
Вставьте несколько фотографий в папку Images.
После этого нужно подключить эти изображения к проекту. Для этого щелкаем правой кнопкой мыши по папке Images -> Add Existing Items.
