Expression Design

Expression Blend --- Основы работы --- Expression Design

Несмотря на всю пользу инструментов рисования в Expression Blend, художнику-оформителю было бы непросто создавать сложную векторную графику описанными ранее способами и средствами.

Правда, для создания более сложной графики можно воспользоваться инструментальным средством Expression Design, чтобы затем экспортировать полученные графические данные в файлах самых разных форматов, включая и XAML. Если графические данные экспортируются в формате XAML, их можно затем без особого труда импортировать в разрабатываемое приложение WPF или Silverlight и далее манипулировать полученными таким образом графическими объектами на панели Objects and Timeline, применяя все описанные ранее средства, в том числе визуальные эффекты, взаимодействие с формами в коде и пр.

Для того чтобы приступить к работе над следующим проектом запустите Expression Design на выполнение. Если у вас имеется некоторый опыт выполнения графических работ, нарисуйте какой-нибудь графический элемент специально для данного примера. А если у вас, как и у меня, нет особых художественных талантов выберите команду меню Help --> Samples, чтобы найти среди целого ряда файлов с расширением *.design подходящий для загрузки пример готовой графики:

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

Для просмотра всего графического изображения нажмите комбинацию клавиш <Ctrl+A>. в результате чего будут выделены все графические данные файла документа с расширением *.design. Итак, поместите курсор мыши на вытягиваемом маркере в правом верхнем углу рамки, ограничивающей видовое окно, и потяните маркер внутрь графического изображения, чтобы уменьшить его по высоте и ширине приблизительно наполовину. После этого можете выбрать мышью данные графического изображения и вернуть их обратно в пределы ограничивающей рамки. Например:

А теперь, когда графические данные рассматриваемого здесь примера подготовлены, можете экспортировать их по команде меню File --> Export. Из раскрывающегося списка Format (Формат) открывшегося при этом диалогового окна можно выбрать любой из наиболее распространенных форматов файлов, но в данном примере нас интересует формат XAML Silverlight 4/WPF Canvas, поэтому выберете именно его:

Выбрав подходящий формат XAML-файла, сбросьте флажок Always name objects (Всегда именовать объекты). Напомним, что если у графического элемента имеется атрибут x:Name, то с таким элементом можно взаимодействовать в коде. Но рассматриваемое здесь графическое изображение плюшевого медвежонка описывается с помощью довольно большого числа элементов XAML. Поэтому, если дать команду именовать все возможные объекты, оставив установленным упомянутый выше флажок, в базовый код C# (или VB) в конечном итоге будет добавлено довольно большое количество переменных. Вряд ли всеми этими переменными удастся воспользоваться в коде, а вот размер исполняемого файла окончательно скомпилированного приложения может заметно увеличиться.

Далее выберите подходящее место для сохранения данных, экспортируемых в файле bear_paper.xaml, чтобы последний можно было легко найти в дальнейшем, например на рабочем столе Windows. Все остальные параметры настройки можно оставить установленными по умолчанию.

Когда все будет готово для экспорта графических данных, щелкните на кнопке Ехрort All (Экспортировать все). В итоге данные графического изображения плюшевого медвежонка будут экспортированы в формате XAML. Теперь можете закрыть Expression Design.

Создайте новый проект в Expression Blend и выберите команду меню Project --> Add Existing Item (Добавить существующий элемент) и перейдите в появившемся диалоговом окне к файлу bear_paper.xaml. Как только вы щелкнете на кнопке ОК, этот XAML-файл будет добавлен в текущий проект (убедитесь в этом сами, исследовав содержимое панели Projects).

Дважды щелкните на файле bear_paper.xaml, появившемся на панели Projects, чтобы просмотреть импортированные данные графического изображения в среде Expression Blend IDE. Щелкните на кнопке Split, чтобы выбрать режим просмотра этих данных с разделением, а следовательно, иметь возможность видеть их исходную разметку в коде XAML.

Просматривая графическое изображение плюшевого медвежонка из файла bear_paper.xaml в среде Expression Blend IDE, обратите внимание на каждый имеющийся и учитываемый в разметке элемент XAML. Ваша задача — найти зрачок левого глаза и правое внутреннее ухо плюшевого медвежонка и дать этим графическим элементам подходящие имена.

Искать эти графические объекты вручную не очень удобно и довольно утомительно, поэтому активизируйте инструмент Selection и выделите их. Нужный узел автоматически выделится на панели Objects and Timeline. Выделите сначала зрачок левого глаза и присвойте этому объекту имя leftEye на панели Properties. Затем выделите часть правого уха по своему усмотрению и присвойте этому объекту имя rightEar (правое ухо):

Далее щелкните правой кнопкой мыши на узел bear, доступном на панели Oblects and Timeline и выбирите команду Copy из всплывающего контекстного меню.

Закройте файл bear_paper.xaml и вернитесь к монтажному столу для работы с файлом MainPage.xaml. Щелкните правой кнопкой мыши на объекте LayoutRoot, доступном на панели Objects and Timeline и вставьте содержимое буфера обмена. Как видите, объект медвежонка теперь находится на сетке как объект bear типа Canvas, вложенный в объект типа Grid!

Возможно, изменять размеры или положение объекта bear типа Canvas в пределах объекта типа Grid вам будет труднее, чем вы предполагали, потому что в исходном примере графического изображения, импортированного из Expression Design, используется целый ряд накладывающихся один на другой слоев.

Теперь можете обработать события, связанные с объектами leftEye и rightEar, аналогично обработке событий, связанных с простейшими формами. С этой целью выделите объекты leftEye и rightEar по очереди на монтажном столе, перейдите к области Events на панели Properties и введите имена обработчиков соответствующих событий. В данном примере обрабатывается одно и то же событие MouseLeftButtonDown, наступающее после нажатия левой кнопки мыши, когда курсор находится на каждом из этих объектов, но методы его обработки должны иметь разные имена.

Ниже приведен простой код C#, изменяющий внешний вид каждого из упомянутых выше объектов, если щелкнуть на них левой кнопкой мыши. (Если у вас нет желания набирать весь этот код ограничьтесь вводом оператора MessageBox.Show() в каждом из обработчиков событий для вывода на экран подходящего, на ваш взгляд, сообщения.):

private void leftEye_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
		{
			// Изменить цвет глаза 
			leftEye.Fill = new SolidColorBrush(Colors.Red);
		}

		private void rightEar_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
		{
			// Сделать ухо размытым
			System.Windows.Media.Effects.BlurEffect blur = 
	     		new System.Windows.Media.Effects.BlurEffect();
			blur.Radius = 80;
			rightEar.Effect = blur;
		}

А теперь запустите приложение Silverlight на выполнение, нажав функциональную клавишу <F5>. Это приложение автоматически загрузится в окно избранного браузера. Щелкните на зрачке левого глаза плюшевого медвежонка. Его цвет должен измениться:

Вот, собственно, и все! Теперь вам должен быть понятен процесс импорта сложных графических данных, сформированных средствами Expression Design, в проект Expression Blend, а самое главное — взаимодействие с графическими данными в коде.

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