Опубликован: 01.11.2011 | Доступ: свободный | Студентов: 1424 / 62 | Оценка: 3.84 / 3.44 | Длительность: 15:38:00
Специальности: Программист
Практическая работа 4:

Создание элементов интерфейса с помощью Microsoft Expression Blend

< Лекция 7 || Практическая работа 4: 12 || Практическая работа 5 >
Аннотация: На данном занятии мы познакомимся с Microsoft Expression Blend инструментом для создания интерфейсов с помощью XAML. Программа поддерживает шаблоны WPF-приложений и Silverlight-сайтов. Мы освоим контейнер Canvas и некоторые графические элементы.

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

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).

Blend позволяет:
создавать составные векторные объекты (Compound paths);
создавать векторные объекты посредством логических операций (вычитание, сложение и т.д.) (Combining paths);
переводить шрифт в векторный объект (Convert to Path);
кадрировать как растровое, так и векторное изображение (Clipping paths);
создавать маски прозрачности (Opacity masks).

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

Упражнение 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.


< Лекция 7 || Практическая работа 4: 12 || Практическая работа 5 >