Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Работаем с Expression Blend Windows Runtime

0
Общий обзор

Одной из мощнейших утилит для разработки интерфейсов на XAML  является

Expression Blend. Авторы используют ее в следующих целях:

·                   генерация XAML для изображений на основе множества  графических примитивов;

·                   конвертация готовых интерфейсов, реализованных с  помощью  Adobe Photoshop и Adobe Illustrator (очень эффективно для тех проектов, которые уже реализованы на альтернативных платформах);

·                   создание анимации (потом ее очень просто скопировать в нужное место внутри Visual Studio);

·                   генерация шаблонов (переходы, «выдергивание» стандартных шаблонов и др.).

Как разработчики, мы не используем Blend в полном цикле создания интерфейса, но для дизайнера эта утилита окажется более подходящей, чем Visual Studio. Более того, позволяя решать описанные выше задачи, она становится незаменимой.

Чтобы создать проект в  Expression Blend (кстати, проект создается в  формате Visual Studio, поэтому речь идет даже не о копировании кода, а о совместной работе дизайнера и разработчика), достаточно  выбрать команду File -> New Project, а затем выбрать тип проекта.

Несмотря на то, что мы все проекты пишем на C#, Blend позволяет создавать интерфейсы и на JavaScript/HTML. Для этого полностью пришлось переработать утилиту, но будем надеяться, что JavaScript-разработчики это оценят:

Рис. 8.4.

Как видно из рисунка, шаблоны полностью соответствуют  шаблонам в  Visual Studio и разделены на две группы: HTML и XAML. При этом, создавая проект на XAML, Вы можете использовать не только C#, но и Visual Basic .NET или C++.

Итак, создав новое приложение, Вы увидите следующее окно:

Рис. 8.5.

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

Окно  Projects чем-то напоминает окно Solution Explorer в   Visual  Studio. Тут содержится список файлов вашего проекта. Однако  возможности этого окна крайне ограничены: в нем нельзя просмотреть список ссылок на сборки, перейти к свойствам  файла и т. д. Видимо,  дизайнеров решили не пугать. Используя контекстное меню, Вы можете перейти к работе с проектом в Visual Studio.

Рис. 8.6.

После вкладки окна Projects расположена вкладка окна Assets, в котором можно получить  доступ ко  всем объектам проекта,  включая  элементы управления, стили,  видеофайлы и  др.  Любой элемент  управления можно перетянуть на панель инструментов для последующей работы с ним.

Рис. 8.7.

Окно Objects and Timeline позволяет выполнять навигацию по дереву объектов

Silverlight-приложения, а также работать с анимацией.

Рис. 8.8.

Выбирая элемент в  окне Objects and Timeline или непосредственно  в  окне редактирования интерфейса,  Вы  можете  редактировать  свойства  активного объекта, используя окно Properties. Тут Вы можете задать трансформацию, кисти и другие свойства элемента.

Рис. 8.9.

И, наконец, если Вы хотите перейти в  режим редактирования XAML-файла вне визуального дизайнера, то можете воспользоваться  командой меню View -> Active Document View.

Работа с анимацией

Expression Blend позволяет достаточно просто создавать анимацию  любого уровня сложности.  Для  этого  нужно  воспользоваться  окном  Objects  and Timeline,  нажав кнопку  New…  В  результате  этого   действия на  экране отобразится окно Create Storyboard Resource.

Рис. 8.10.

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

После создания объекта Storyboard будет активирован режим записи анимации.

Рис. 8.11.

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

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

Рис. 8.12.

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии