Обзор современных средств разработки интерактивных приложений

Silverlight 3 -мощная платформа для создания и предоставления многофункциональных интернет-приложений (Rich Internet Applications, RIA) и мультимедийного интернет-интерфейса. Третья версия Silverlight - это продукт, который предоставляет более 50 новых возможностей, включая выполнение приложений Silverlight без использования веб-браузера, значительное повышение производительности и качества видео, а также функции, способствующие росту производительности разработчиков. Объединяя свои возможности с возможностями передовых средств Microsoft для разработчиков и проектировщиков, Microsoft Visual Studio и Microsoft Expression Blend, Silverlight 3 позволяет создавать современные RIA-приложения и мультимедийные интерфейсы. Благодаря Silverlight RIA-приложения стали полноправными членами современной ИТ-среды.

Microsoft .NET RIA Services упрощают традиционные n-уровневые схемы приложения путем объединения ASP.NET и Silverlight платформ. Насыщенные интернет приложения (Rich Internet Applications - RIA) позволяют создавать функциональный, быстрый, удобный и красивый пользовательский интерфейс.

Основные особенности этих приложений:

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

Основным конкурентом Silverlight является платформа Adobe Flash и родственная технология Adobe Flex, на которых уже реализовано немало проектов, особенно мультимедиа. Ниже приведено сравнение двух платформ для разработки "богатых" веб-приложений.

Изначальный релиз медиа-плеера-для-браузера от Microsoft был примечателен в основном отсутствием многих возможностей Flash. Версия 1.0 больше походила на бету, чем на полноценный продукт. Текущий второй релиз уже значительно лучше, однако его по-прежнему с большой натяжкой можно назвать конкурентом Flash.

Silverlight 3.0 наконец стала серьезной заявкой на полноценное соперничество. Версия 3.0 содержит новые API, аудио-кодеки и серьезно развитую видео-часть, включая Smooth Streaming, H264, AAC и поддержку аппаратных графических акселераторов.

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

Среда разработки и прочий инструментарий

Flash/Flex: Flash Professional и Flex Builder (для нормального создания RIA часто нужны оба), также поддерживается импорт графики из других приложений Adobe, в которых рисовать значительно удобнее, чем в самом Flash. Бесплатной альтернативой является Flash Develop. Вместо Flex Builder можно использовать плагин к Eclipse. Для автоматизации сборки можно использовать утилиту ant. Для автоматизации тестирования можно использовать инструменты вроде Redstone Eggplant FT. Для юнит-тестов, в основном, используется AsUnit или FlexUnit. Средств рефакторинга и анализа кода нет. FlashPlayer - это плагин который позволяет проигрывать swf файлы в браузере клиента.

Flash IDE/Flex Builder - это среда позволяющая создавать swf файлы. Flex framework - это фреймворк позволяющий быстро и эффективно создавать RIA приложения. Flex Builder оптимизирован для работы с Flex framework.

Sliverlight: Visual Studio 2008 + Expression Blend, для рисования в векторе используется Expression Design. Для юнит-тестов можно использовать либо более простые в освоении юнит-тесты от Майкрософт, либо более мощный по функционалу MbUnit. Базовый инструментарий для рефакторинга неплохо расширяется за счет утилиты ReSharper. Для анализа кода используется ReSharper, а также набор утилит "FxCop". Автоматизация сборки через MSBuild.

Естественно, приведены только наиболее популярные продукты. Находящиеся в стадии пре-альфы инструменты не учитываются. Если сравнивать вышеописанные наборы, то очевидно, что Sliverlight впереди Flash/Flex. Если даже в следующей версии Flex Builder'а появятся нормальные юнит-тесты и инструменты для рефакторинга, пройдет не один год, прежде чем они доберутся до уровня, который уже сейчас доступен разработчикам Silverlight. Кроме того, пара Flash/Flex крайне далека от удобства. Flash до сих пор мало приспособлен для работы с кодом (даже интеллисенс работает с нареканиями), форматы файлов и структуры проектов у Flash и Flex различны, а использовать только Flex сложно, поскольку ничего похожего на дизайн-вью в нем просто нет. Единственное, в чем Silverlight уступает паре Flash/Flex, так это в инструментарии для рисования. Expression пока что далек от продуктов Adobe как по возможностям, так и по удобству использования.

Язык программирования

Flash/Flex: ActionScript 2.0/3.0.

Silverlight: Любой .Net-совместимый язык + JavaScript.

Silverlight выигрывает у Flash/Flex потому, что он поддерживает значительно более мощные языки .NET. Наиболее популярным из всех .NET-совместимых языков является C#. И если сравнивать C# с ActionScript 3.0, то можно сказать, что сравниваются языки разных эпох. Если C# - это едва ли не самый развитый и в то же время стабильный из всех современных объектно-ориентированных языков программирования, то ActionScript 3.0 - это смесь Object Pascal и JavaScript. Язык не имеет ни типизированных указателей на методы, ни встроенной событийной модели, ни атрибутного программирования. Отдельной строкой хочется сказать об отладчике. Если во Flex Builder он работает, то во Flash им просто невозможно пользоваться - основным методом отладки до сих пор является trace.

Дизайн приложений

Flash/Flex: пакеты Photoshop, Illustrator и Flash

Silverlight: пакеты Microsoft Expression Studio

Дизайнеру, работающему с Photoshop, Illustrator и Flash, предоставляется более "могучие" средства, чем в Microsoft Expression Studio - основное средство для построения интерфейсов Silverlight.

Expression Studio в действительности нужен лишь для подготовки графики для проектов Windows Presentation Foundation (WPF) и Silverlight. Он серьезно уступает средствам редактирования из Photoshop. Единственное преимущество Expression Studio - способность к экспорту в формат XAML, что необходимо для разработчиков Silverlight.

Поддержка ОС и браузеров

Flash/Flex: Windows (IE6/7, Firefox, Safari, Chrome, Opera), MacOS, Linux, Flash Lite на мобильных устройствах.

Silverlight: Windows (IE7, Firefox, Safari, Chrome), MacOS, Linux с помощью Moonlight, Windows Mobile.

Что касается поддержки в различных браузерах, то Flash Player пока что впереди, хотя и не намного. На мой взгляд, все, кроме поддержки в Opera, это лишь вопрос времени. Причем небольшого.

Возможность упаковки в исполняемый файл

Flash/Flex: Adobe AIR for Macintosh and Windows, Adobe AIR for Linux в стадии beta.

Silverlight: Для Windows - Desklighter, для других ОС поддержки нет.

Возможность сменить галочкой в проекте компиляцию с .xap на .exe была бы полезна. Но можно использовать утилиты сторонних производителей. Про создание исполняемых файлов под другие ОС и говорить не приходится. Здесь Flash/Flex хорошо впереди.

Размер

Flash/Flex: Плагин - 1.7 Мб, приложение - часто меньше 100 кБ (не учитывая ресурсы).

Silverlight: Плагин - 5 Мб, приложение - часто больше 100 кБ + ресурсы.

Даже при использовании более эффективных алгоритмов архивации (файл .xap - это zip-архив) размер все равно остается достаточно большим. Размер SWF-файла зачастую меньше, причем в разы. Однако, это только в случае небольших приложений. Если же мы будем создавать большое полноценное RIA с помощью Flex, то суммарный размер всех SWF будет мало отличаться от аналогичного XAP. Впрочем, размер самого приложения часто незаметен на фоне присутствующих в приложении ресурсов (изображений, звуков, видео и т.д.). Что касается размера самого плагина, то вопрос кажется не принципиальным. Закачка и установка делается всего один раз. Однако, в любом случае, незначительное преимущество в вопросах размера на стороне Flash/Flex.

Изображения

Flash/Flex: Поддерживаются форматы JPEG, GIF, PNG. Возможность импорта из psd, al и т.д. Есть возможность попиксельного изменения.

Silverlight: JPEG, PNG. Конвертация векторной графики в xaml.

Здесь есть разница в подходах: Flash/Flex позволяет изменять из кода пиксельную графику, а Silverlight - векторную. Но в общем обе технологии работают с графикой на хорошем уровне.

Аудио

Flash/Flex: Поддерживается формат mp3.

Silverlight: Поддерживаются форматы wma, mp3, AAC.

Silverlight выигрывает большим числом аудиокодеков.

Видео

Flash/Flex: Поддерживается формат flv.

Silverlight: Поддерживаются формат wmv, H264. Поддержка технологии Smooth Streaming.

Безусловно здесь перевес на стороне Silverlight, но безоговорочную победу технологии Silverlight принесла бы поддержка и flv. Т.к. существует огромное количество роликов, сжатых в flv, и было бы крайне удобно уметь их проигрывать. Обе технологии позволяют передавать HD качество телевидения высокой четкости.

Smooth Streaming ("плавный поток") позволяет получать и отображать видеопоток в Silverlight 3.0, изменяя при этом качество изображения в зависимости от скорости интернет-соединения и загрузки процессора. Если скорость соединения понижается (например, вы подключились к медленному общественному WiFi), сервер понизит качество картинки чтобы просмотр не прерывался для накопления данных в буфере.

Шрифты

Flash/Flex: Имеет три встроенных шрифта, поддерживается импорт символов из шрифтов ТТF, ограниченно поддерживаются шрифты, установленные в системе.

Silverlight: Поддерживается возможность использования как шрифтов, установленных в системе, так и подкачка необходимых шрифтов с сервера.

Основная разница между Silverlight и Flash/Flex в работе со шрифтами в том, что Flash/Flex использует не сами шрифты, а полученные в результате конвертации символы. Формально, не импортированные шрифты поддерживаются. Однако, с текстом, напечатанным таким шрифтом, почти ничего нельзя делать: ни поворачивать, ни масштабировать, ни использовать в качестве маски. Здесь преимущество у Silverlight.

Работа с файлами

Flash/Flex: Есть возможность загрузки файлов с сервера и на сервер. Окно открытия файлов поддерживает выбор нескольких файлов или каталогов.

Silverlight: Есть возможность загрузки файлов с сервера и на сервер. Окно открытия файлов поддерживает выбор нескольких файлов или каталогов, а также позволяет получить доступ к содержимому файла через поток.

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

Хранение данных на клиенте

Flash/Flex: Максимальный объем формально неограничен. По умолчанию - 100кб.

Silverlight: Максимальный объем формально неограничен. По умолчанию - 10Мб.

Хотя значение по умолчанию пользователь всегда может поменять, для некоторых это целая очень сложная и незнакомая процедура. Да и вообще, пользователи не очень любят, когда приложение просит их чего-то делать с настройками. Насколько 100 кб мало, а 10 Мб - достаточно, покажет практика, но формальное лидерство в этом вопросе у Silverlight.

Разметка

Flash/Flex: MXML (только во Flex).

Silverlight: XAML + code-behind

C точки зрения внешнего вида, один подвид xml-разметки мало чем отличается от другого. И там и там поддерживается встраивание кода, создание любых объектов, заполнение коллекций и т.д. Однако XAML все же имеет два преимущества перед MXML. Во-первых, XAML можно редактировать с помощью Expression Blend. Во-вторых, существует возможность изменить генерируемый на основе XAML файл с кодом (Flex просто обрабатывает MXML "за кадром"). Здесь выигрывает Silverlight.

Рисование в коде приложения

Flash/Flex: Имеется несколько стандартных методов для рисования линий и заливки. Есть возможность изменять объекты с помощью матрицы преобразований, скрывать часть объекта (DisplayObject) с помощью маски (альфа-канал поддерживается для режима cacheAsBitmap), которая сама является DisplayObject.

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

Самый, пожалуй, сложный на данный момент вопрос для сравнения. Поэтому вывод о том, где с рисованием ситуация лучше, делать трудно. Возможность представлять векторную графику как часть разметки - это конечно большой плюс Silverlight по сравнению с Flex (в нем нечто похожее появится только в Gumbo). Трансформация объектов в Silverlight устроено несколько удобнее, чем во Flash/Flex. А вот с Opacity Mask все не так однозначно. В Flash/Flex маска - это такой же DisplayObject, как и то, что она скрывает. Если не выбирать режим cacheAsBitmap (маска не будет поддерживать полупрозрачность), то и в маске, и в маскируемом объекте можно производить любые программные изменения (изменять дерево потомков, рисовать с помощью методов, проигрывать видео и т.д.). В Silverlight ситуация иная. Там маска - это объект типа Brush. На данный момент существуют SolidBrush, GradientBrush, ImageBrush и VideoBrush. Т.е. в качестве маски можно использовать различные заливки, картинки или видео, однако программно управлять маской по сути нельзя. С другой стороны, те же самые кисти используются для рисования линий, фонов, текста и т.д. Таким образом, получается, что, например, задав тексту для рисования VideoBrush, мы получим тот же эффект, как если бы во Flash/Flex разместили в маске текст, а в маскируемом объекте - видеоролик (аналогичная ситуация с картинкой). Однако, маскировать один векторный рисунок другим Silverlight не умеет. Класс HostingRenderTargetBitmap хоть и оставили в релизе, но пользоваться им все равно нельзя.

Анимация в коде приложения

Flash/Flex: Основана на фрэймах.

Silverlight: Основана на временных интервалах

Для программистов работать с фреймами чрезвычайно неудобно. Потому как при необходимости рассчитывать для каждого фрейма состояние анимации, никто не гарантирует, что все фреймы будут проходить с одинаковой скоростью. Да, и не надо забывать, что шкала фреймов одна на всю сцену. И если в ней задано 24 фрейма в секунду, то сделать анимацию длиной 0.8 секунды уже нельзя. К выходу Flex CS3 Adobe предоставила механизм эффектов. Программировать собственные эффекты также сложно, но они хотя бы не привязаны к шкале фреймов. В Silverlight перенесли механизм анимации из WPF, использующий временные интервалы. Простой, удобный, легко настраиваемый как из XAML, так и из кода, не привязанный ни к какой общей шкале фреймов, каждая анимация живет собственной "жизнью". Поэтому в номинации "анимация в разметке и коде" побеждает Silverlight.

Стандартные элементы управления

Flash/Flex: Достаточно широкий набор стандартных элементов управления, а также расширенные элементы управления, вроде коллекции чартов или OLAP data grid.

Silverlight: Набор стандартных элементов управления + Silverlight Toolkit + Silverlight SDK (те же грид, чарт и т.п.) + бесплатные элементы управления третьих фирм (например, Visifire).

Обе технологии имеют достаточное количество элементов управления для создания пользовательских интерфейсов.

Пользовательские элементы управления

Flash/Flex: Внешний вид элементов управления создается во Flash и AI в виде набора графических символов, функционал либо во Flash, либо во Flex. Внешний вид контрола, созданного в "дизайнере", невозможно изменить из кода.

Silverlight: Внешний вид создается в Expression Blend или Expression Design, затем может быть изменен в xaml или из кода.

В вопросе создания элементов управления Silverlight бесспорно впереди. Потому что пользовательские элементы управления в связке Flash/Flex делать весьма неудобно. Нужно нарисовать элемент управления во Flash или AI, разбить содержимое на нужный набор клипов, затем экспортировать во Flex и там использовать. Повторить N раз до тех пор, пока элемент не станет таким, каким он нам нужен. Сравните это с возможностью редактировать в Blend Silverlight- элемент прямо на форме, где он используется, при этом "не закрывая студию". Если нужно добраться из кода во Flex до чего-либо, что не является клипом, надо снова лезть во Flash и выделять это в клип.

Отдельно хочется сказать про шаблоны во Flash/Flex. Не про то, что они на самом деле не шаблоны, а всего лишь имитация, а про то, что создание элемента управления, в котором отдельные визуальные элементы должны создаваться с помощью шаблонов - это часто работа вслепую. Потому что посмотреть на элемент управления в дизайнере Flash нельзя - не подхватится влияющий на отрисовку код, надо запускать приложение. Однако в случае действительно сложного элемента управления часто трудно понять, какая из составляющих ведет себя неверно. Начинается перебор всего подряд.

Кастомизация элементов управления

Flash/Flex: Используются CSS-like стили

Silverlight: Используется взятый из WPF, модифицированный механизм стилей. Добавлены VisualState и VisualTransition, а также понятие Control Contract.

Стили в WPF - это крайне мощный инструмент, для которого есть даже свои методики рефакторинга. Несмотря на то, что стили в Silverlight сделаны несколько слабее, чем в WPF, они все равно почти начисто обходит css-образные стили Flex, которые по сути не многим более чем обычные словари, которые можно хранить в отдельных файлах. Стили во Flex не поддерживают связывания (binding), не позволяют задавать шаблоны, не имеют строгой типизации, и уж тем более не позволяют хранить внутри себя анимацию, не умеют изменятся в зависимости от каких-либо условий. А в Silverlight все это есть.

Работа с XML

Flash/Flex: ECMAScript for XML (E4X)

Silverlight: LINQ to XML

LINQ to XML имеет ряд преимуществ перед другими способами работы с XML, в том числе и реализацией E4X во Flash/Flex. Начиная от удобного синтаксиса, и заканчивая возможностью использования LINQ to XSD. А если вы пишете не на C#, а на VB.NET, то у вас есть возможность смешивать код на бейсике и XML, используя при этом XML IntelliSense.

Взаимодействие с браузером

Flash/Flex: Есть.

Silverlight: Есть.

Настольные приложения

Flash/Flex: Есть.

Silverlight: Есть.

Silverlight 3.0 дает возможность создавать самостоятельные, оффлайновые приложения для настольных систем, подобно платформе Adobe AIR. Наиболее привлекательно в подобных приложениях то, что они строятся из онлайн-приложений без малейших изменений в коде. Достаточно создать XML-файл (AppManifest.xaml) и задать несколько параметров. С этого момента приложение может работать как в пределах браузера, так и вне его.

Однако это только часть возможностей. Функциональность приложений можно расширить через интерфейс локального хранения данных, названный Isolated Storage. В Silverlight данные пользователей могут храниться локально вне зависимости от того, используется ли веб-приложение, или настольная версия приложения, или же первое превращается во второе и наоборот.

Для запуска приложения Silverlight вне браузера на нем придется щелкнуть правой кнопкой мышки и явно дать команду на инсталляцию в системе. Технология Adobe позволяет просто скачать приложение - и его сразу можно использовать.

Как бы то ни было, способность приложений Silverlight 3.0 к самостоятельной работе вне браузера является наиболее важным нововведением. Если учесть огромные наработки и базу ранее созданного на платформе .NET кода, можно без сомнений ожидать взрывного роста количества настольных приложений Silverlight.

Связывание данных

Flash/Flex: Возможно только в MXML. Достаточно просто реализуется синтаксически, но изменение связывания из кода невозможно. Связывание работает для всех свойств или классов, помеченных атрибутом bindable.

Silverlight: Binding аналогично WPF.

Обе технологии представляют хорошие средства для связывания. Silverlight позволяет задать следующие привязки:

Многопоточность

Flash/Flex: Нет

Silverlight: Есть

Здесь Flash/Flex безоговорочно сливает. Полноценная многопоточная модель нужна в RIA намного чаще, чем это может показаться, поскольку даже мелкие "подвисания" интерфейса могут вывести пользователя из себя. Да и возможность запускать те или иные задачи в фоне бывает крайне полезна.

Поддержка печати

Flash/Flex: Есть.

Silverlight: Нет.

Что не говори, а возможность печати нужна не так уж и редко. И если в случае Flash/Flex можно печатать прямо из приложения, то в Silverlight приходится делать это через сервер.

Заключение

Silverlight относится к Web 3.0, где основа основ - не Java/JS, а полноценнное веб-приложение. И если Flash был некой реализацией JVM, то Silverlight ассоциируется с более совершенным CLR(.NET), который как нельзя лучше подходит для создания RIA-приложений для Web. При этом, для работы с Silverlight необязателен Visual Studio - есть более дизайнерское решение - Expression Blend. Изучение же XAML и основ C# для создания приложений не вызывает трудностей и нередки случаи безболезненного перехода с ActionScript.

Архитектура приложений Silverlight

Основная функциональность Silverlight обеспечивается подключаемым модулем браузера. Этот модуль формирует визуальное представление XAML и обеспечивает модель программирования, которая может основываться либо на JavaScript, либо на .NET Framework и общеязыковой среде выполнения (common language runtime, CLR). На рис. 1.1 представлена архитектура, которая поддерживает это.

Основным механизмом программирования поведения приложения Silverligth 1.0 в браузере является прикладной программный интерфейс (application programming interface (API) объектной модели документов (Document Object Model (DOM) JavaScript. Он позволяет перехватывать пользовательские события, возникающие в приложении (такие как перемещения мыши или щелчки определенного элемента), и вызывать код, определяющий реакцию на них. С помощью методов JavaScript DOM можно манипулировать элементами XAML, например, управлять воспроизведением мультимедиа или анимацией.

Для создания еще более насыщенного и функционального интерфейса доступны все возможности .NET Framework CLR. Помимо того, что можно сделать в JavaScript, данная возможность предлагает множество пространств имен и элементов управления, поставляемых как часть .NET Framework, что позволяет делать вещи, которые было очень сложно, или вообще невозможно, реализовать в JavaScript. Например, доступ к данным с помощью ADO.NET и LINQ, обмен информацией с Веб-сервисами, создание и использование пользовательских элементов управления и т.д.

Кроме того, среда формирования представления поставляется вместе с компонентами, необходимыми для обеспечения возможности воспроизведения в браузере файлов таких форматов, как H264, Windows Media Video (WMV), Windows Media Audio (WMA) и MP3, без всяких внешних зависимостей. Так, например, пользователям Macintosh не нужен проигрыватель Windows Media Player для воспроизведения WMV-содержимого, достаточно одного Silverlight. Основой всей среды формирования представления является код представления, и он управляет всем процессом визуализации. Все это встроено в подключаемый модуль браузера, поддерживающий основные браузеры Windows и Macintosh.

На рис. 1.2 представлена архитектура простого приложения, выполняющегося в браузере с использованием Silverlight.

В основе выполняющегося в браузере приложения обычно лежит HTML. Эта разметка содержит вызовы для создания экземпляров подключаемого модуля Silverlight. При взаимодействии с приложением Silverlight пользователи генерируют события, которые могут быть обработаны функциями JavaScript или .NET Framework. В свою очередь, код программы может вызывать методы элементов содержимого Silverlight для управления ими, добавления нового или удаления существующего содержимого. Наконец, подключаемый модуль может читать и формировать визуальное представление XAML. Сам XAML может быть встроен в страницу, существовать как внешний статический файл или как динамический XAML, возвращаемый сервером.

Silverlight и XAML

Теперь, получив общее представление об архитектуре Silverlight и о том, как будет выглядеть типовое приложение, обратимся к основе UX: XAML.

XAML - это язык разметки на базе XML, используемый для определения визуальных элементов приложения. К ним относятся UI, графические элементы, анимации, мультимедиа, элементы управления и пр. XAML был представлен Microsoft для Windows Presentation Foundation (WPF), ранее называемом Avalon, который является технологией, ориентированной на выполнение на клиентском компьютере, и частью .NET Framework 3.0 и последующих версий. Как обсуждалось ранее, он разработан с целью заполнения технологической пропасти между дизайнерами и разработчиками при создании приложений.

XAML, используемый в Silverlight, отличается от XAML в WPF. В данном случае XAML - это подмножество, ориентированное на возможности и ограничения Веб-приложений. Так что те, кто знаком с XAML из WPF, заметят отсутствие некоторых тегов и функциональности, например, элемента <Window>.

XAML использует XML для определения UI с помощью элементов XML. Корнем всех XAML-документов Silverlight является элемент-контейнер, такой как Canvas (Холст), определяющий область, в которой будет отрисован ваш UI. В корневом элементе Canvas Веб-приложения Silverlight располагаются объявления пространств имен XML, необходимых Silverlight.

Рассмотрим пример XAML-документа в Silverlight. При создании нового приложения Silverlight в Visual Studio, создается страница:

<navigation:Page x:Class="SilverlightApplication1.Page1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     xmlns:navigation="clr-namespace:System.Windows.Controls;
                       assembly=System.Windows.Controls.Navigation"
     d:DesignWidth="640" 
     d:DesignHeight="480"
     Title="Page1 Page">
  <Grid x:Name="LayoutRoot">
  </Grid>
</navigation:Page>

Обратите внимание, что объявляются несколько пространств имен. Типовой документ XAML содержит базовый набор элементов и атрибутов и дополнительный набор, для описания которого обычно используется префикс x:. Примером дополнительного атрибута пространства имен является широко используемый x:Name, с помощью которого задается имя элемента XAML, что позволяет ссылаться на него в коде. Корневой элемент Page объявляет область видимости имен всех элементов.

Элемент Page является контейнером. Это означает, что он может содержать другие элементы как дочерние. Эти элементы тоже могут быть контейнерами для других элементов. Например, ниже представлен простой XAML-документ с рядом дочерних элементов, некоторые из которых сами являются контейнерами:

<navigation:Page x:Class="SilverlightApplication1.Page1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:navigation="clr-namespace:System.Windows.Controls;
                      assembly=System.Windows.Controls.Navigation"
    d:DesignWidth="640" d:DesignHeight="480"
    Title="Page1 Page">
  <Grid x:Name="LayoutRoot">
    <Rectangle 
        Fill="#FFFFFFFF" 
        Stroke="#FF000000" 
        Width="136" 
        Height="80" 
        Canvas.Left="120" 
        Canvas.Top="240"/>
    <Canvas>
      <Rectangle 
          Fill="#FFFFFFFF" 
          Stroke="#FF000000" 
          Width="104" 
          Height="96" 
          Canvas.Left="400" 
          Canvas.Top="320"/>
      <Canvas 
          Width="320" 
          Height="104" 
          Canvas.Left="96" 
          Canvas.Top="64">
        <Rectangle 
            Fill="#FFFFFFFF" 
            Stroke="#FF000000" 
            Width="120" 
            Height="96"/>
        <Rectangle 
            Fill="#FFFFFFFF" 
            Stroke="#FF000000"
            Width="168" 
            Height="96" 
            Canvas.Left="152" 
            Canvas.Top="8"/>
      </Canvas>
    </Canvas>
  </Grid>
</navigation:Page>

Здесь можно увидеть, что у корневого Page есть два дочерних элемента: Rectangle и Canvas. Canvas также содержит Rectangle и Canvas, и в последнем Canvas находится еще два элемента Rectangle. Такая иерархическая структура позволяет логически группировать элементы управления и использовать для них общую компоновку и поведение.

XAML в Silverlight поддерживает ряд фигур, которые можно сочетать для получения более сложных объектов.

Помимо этого, XAML поддерживает кисти ( brushes ), которые определяют, как объект закрашивается на экране. Внутренняя область объекта закрашивается с помощью кисти fill, а контур объекта отрисовывается кистью stroke. Существует множество типов кистей, включая одноцветные кисти, градиентные, изображения и видео.

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

Трансформация объектов в XAML осуществляется с помощью ряда трансформаций. К ним относятся:

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

Поддержка анимации в XAML реализована посредством определения изменений свойств со временем. Для этого используется временная шкала. Временные шкалы располагаются в раскадровке ( storyboard ). Существуют различные типы анимации:

Изменять свойства можно линейно, тогда свойство меняет значения с течением времени, или в режиме "ключевого кадра", когда определяется ряд контрольных точек, переходы между которыми и создают анимацию.

Silverlight и пакет инструментов Expression Studio и Visual Studio

Microsoft Expression Studio - это современный надежный набор инструментов для дизайнеров, позволяющий им создавать артефакты, которые затем могут быть включены разработчиками при работе с пакетом инструментов Microsoft Visual Studio. В пакет инструментов Expression Studio входит несколько продуктов:

Microsoft Expression Studio дополняет традиционные средства разработки, такие как Visual Studio, для создания приложений Silverlight. Visual Studio непосредственно работает с языком разметки XAML (но не визуально, а в текстовом режиме) и с кодом приложения code-behind на языке, например, C#.NET. Именно возможность использовать код .NET делает приложения Silverlight мощным инструментом создания сайтов, различного назначения от развлекательных до корпоративных.