Основные особенности работы

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

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

Если диалоговое окно New Project все еще открыто в среде Expression Blend IDE, нажмите клавишу <Esc> чтобы вернуться к экрану приветствия. (Если вы уже закрыли диалоговое оно New Project, то вернуться к экрану приветствия вы сможете по команде меню Help --> Welcome Screen). Но в любом случае щелкните на вкладке Samples (показано на рисунке), где находится ряд встроенных в Expression Blend примеров проектов:

Конкретный перечень примеров проектов зависит от версии Expression Blend, поэтому не особенно тревожьтесь, если этот перечень не совпадает у вас с тем, что приведен на рисунке. Здесь и далее будет рассматриваться пример проекта Silverlight типа ColorSwatchSL, но вы вольны загрузить любой другой пример проекта для дальнейшего изучения.

Загрузка примера проекта в Expression Blend

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

При нажатии клавиши <F5> или комбинации клавиш <Ctlr+F5> в Expression Blend создается и выполняется текущий проект. Если вы создаете приложение на платформе WPF, конечный результат, как правило, представляет собой новое окно, появляющееся на рабочем столе операционной системы вашего компьютера. А если создаете новое приложение на платформе Silverlight, то в окне используемого вами по умолчанию браузера загружается и отображается веб-страница, на которой размещается данное приложение.

Итак, выполните проект ColorSwatchSL. Обратите внимание на то, что при перемещении курсора мыши по цветным полоскам они выдвигаются на передний план благодаря специальной анимации. Если вы щелкнете на одной из цветных полосок, появится область "подробностей" благодаря еще одной анимационной последовательности. На рисунке показан один из возможных результатов пробного выполнения данного проекта:

По завершении пробного выполнения примера проекта ColorSwatchSL закройте окно браузера и вернитесь к Expression Blend.

Монтажный стол

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

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

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

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

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

Далее следуют три элемента управления с помощью которых можно задавать реакцию монтажного стола на расположение на нем элемента пользовательского интерфейса. Если щелкнуть на кнопке Show snap grid (Показать сетку для привязки), на поверхность визуального конструктора будет наложена сетка. После этого можно активизировать одну из двух других кнопок: Turn on snapping to gridlines (Включить привязку к линиям сетки) или Turn on snapping to snaplines (Включить привязку к линиям привязки).

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

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

И последняя кнопка в области элементов управления монтажного стола служит для просмотра или сокрытия аннотаций в Expression Blend. Подобные аннотации можно рассматривать как своего рода записки программирующего в среде Expression Blend. С помощью аннотаций можете вводить текстовые заметки в текущий проект. А это может быть особенно полезно на стадии создания прототипа приложения.

В настоящий момент пример проекта ColorSwatchSL не содержит никаких аннотаций, поэтому введите в него одну из них по команде меню Tools --> Create Annotation. После этого можете набрать в качестве аннотации любые текстовые данные. Введя в текущий проект одну или две аннотации, попробуйте активизировать кнопку Annotations, чтобы просмотреть полученный результат:

Следует, однако, иметь в виду, что аннотации вообще не видны при выполнении прикладной программы. Кроме того, аннотации, вводимые в проект Expression Blend, не отображаются в конструкторах проектов WPF или Silverlight, разрабатываемых в среде Visual Studio 2010.

И последнее замечание: не следует забывать, что если в конструкторе выбран какой-нибудь элемент пользовательского интерфейса до ввода новой аннотации, то она будет связана с выбранным элементом. Этим обстоятельством можно воспользоваться, например, для комментирования отдельного элемента управления пользовательского интерфейса или же элемента графических данных. Если же вы не выбрали ни одного из элементов до ввода аннотации, а это означает, что вы просто щелкнули на пустом участке монтажного стола, новая аннотация послужит в качестве "общей" заметки, не связанной с каким-нибудь конкретным элементом пользовательского интерфейса.

Просмотр и правка исходной разметки XAML

Если вы занимаетесь только графическим оформлением, вас, возможно, мало интересует просмотр разметки в коде XAML, автоматически формируемой в Expression Blend. Но если вы занимаетесь разработкой программного обеспечения и пользуетесь для этой цели средой Expression Blend, вам будет приятно узнать, что в Expression Blend предоставляется довольно развитый редактор разметки в коде XAML.

Но прежде чем просматривать и править подобную разметку, вам придется перейти от кнопки Design (Конструировать) к кнопке XAML или Split (Разделить). Все эти кнопки находятся в правом верхнем углу монтажного стола:

Активизируйте режим просмотра с разделением, выбрав кнопку Split. В нижней части монтажного стола появится интегрированный в Expression Blend редактор XAML. Как показано на рисунке, в редакторе XAML поддерживается автоматическое завершение кода и система автоматической подсказки IntelliSense, а также предоставляется полезная справочная информация для ввода и правки кода.