#024 – Знакомство с WPF/E
21700
Не так давно произошел долгожданный релиз набора библиотек Microsoft .NET 3.0 и, возможно, появилась возможность вникнуть более подробно в привнесенные этим набором новшества. Возможно, но не тут- то было. Microsoft в серьез взялась за популяризацию Windows Presentation Foundation – и вот, с пылу с жару, новый (или не совсем новый) продукт WPF-E. E – это от английского “everywhere” – тобишь WPF везде. Отбросим мысли о том, что софтверный гигант решил таким образом всего лишь задавить (или все-таки слегка потеснить?) Flash и подумаем о том, что же означает это «везде». А означает это следующее – разработчики веб-сайтов смогут не только создавать стандартные, «тяжелые» XBAP-приложения (для работы с которыми уж очень нужен IE…) но и «легкие», основанные на XAML страницы. И при чем тут «везде»? А при том, что вместе с технологией WPF-E, компания выпустила несколько плагинов (объемом всего-то в один мегабайт), при помощи которых просмотр WPF-E контента в IE, Firefox и даже на компьютерах Apple Macintosh и даже на мобильных устройствах яйца выеденного стоить не будет. Поистине сильно желание Microsoft сразиться с Flash и, надо заметить, некоторые энтузиасты уже сделали абсолютно идентичные проекты на Flash и WPF-E и последний ничуть не уступает первому. Мало того, есть масса способов объединить обе технологии в рамках одного web-сайта, и не только объединить, но даже заставить взаимодействовать. Действительно, огромное поле для творчества.
Итак, давайте создадим очень простую страницу типа «Hello World», чтобы познакомиться с технологией WPF/E.
Что нам необходимо? Прежде всего скачать Silverlight. Во вторых, нам понадобится пустая html-страница, например, с таким содержанием:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Sample HTML page</title>
</head>
<body>
</body>
</html>
И в третьих, нам потребуется текстовый редактор, например «Блокнот» прекрасно подойдет.
После того, как вы подготовили все вышеуказанные средства, Вам понадобится небольшой файл, основанный на JavaScript, который Microsoft любезно подготовила для разработчиков, с целью организовать очень быстрый и простой способ внедрить WPF-E контент на любую html-страницу. Скачайте архив с этим файлом тут: datas/users/2180-aghost.zip , распакуйте архив и разместите вышеупомянутый файл, который имеет имя «aghost.js» в директории, в которой вы подготовили свою html-страницу.
Теперь, нам необходимо подключить этот файл к нашей странице, для этого откройте Вашу страницу в блокноте и внесите следующую строку в секцию <head> вашего html-файла:
<script type="text/javascript" src="aghost.js"></script>
В моем случае код страницы будет выглядеть так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Sample HTML page</title>
<script type="text/javascript" src="aghost.js"></script>
</head>
<body>
</body>
</html>
Теперь нам необходимо создать область в которой будет работать наш WPF-E элемент. Это очень просто. Добавьте этот код внутрь секции <body> Вашего html-файла:
<!—Здесь будет работать WPF/E ActiveX контрол-->
<div id="agControl1Host">
</div>
lt;/div>[/code]
Создав таким образом область для работы контрола, необходимо описать этот самый контрол – сделать это, так же, довольно просто. Нижеизложенный код необходимо добавить внутрь блока <body>, но ниже вышеописанных тегов <div></div>:
[code]<script type="text/javascript">
// Создаем WPF/E ActiveX контрол.
// Используя данный метод мы избавляем пользователя от необходимости кликать по
// ActiveX контролу прежде чем WPF/E получит информацию от пользователя
new agHost(
"agControl1Host", // hostElementID ( элемент HTML element который мы описали выше в теге <div>)
"agControl1", // ID контрола WPF/E ActiveX которого мы создаем
"300px", // ширина (width)
"300px", // высота (height)
"#D6D6D6", // цвет фона (backgroundcolor)
null, // SourceElement (имя script-тэга содержащего xaml)
"SampleProject.xaml", // файл источник контента (source file)
"false", // Без окна (IsWindowless)
"30", // Скорость кадров (MaxFrameRate)
null // OnError handler (метод отлова ошибок)
);
// также создаем глобальную переменную для WPF/E ActiveX контрола,
// которую мы можем использовать, чтобы найти xaml элементы
var agControl = document.getElementById("agControl1");
</script>[/code]
Итак, возможно Вам покажется, что данный код несколько громоздкий, но на самом деле он не содержит ни одной лишней строки. Вы уже поняли, что мы применяем комбинированный HTML+Sсript язык, для описания. Думаю, разобраться в нем не составит проблемы. Тем не менее, внимательно изучите комментарии, которые я внес в код, для Вас. Эти комментарии помогут Вам максимально быстро разобраться с тем, как правильно определить отображающий элемент (под отображающим элементом я понимаю ту область, которая будет отображать WPF-E контент).
Итак, внимательный читатель обратил внимание на параметр «Source File» - и правильно, так как именно этот параметр ссылается на xaml-файл, в данном случае с именем «SampleProject.xaml», который и содержит замечательный WPF-контент. Чтож, создайте пустой xaml-файл (для этого достаточно создать текстовый документ и изменить расширение с «txt» на «xaml») c нужным именем и разместите его в директории, в которой находится ваша html-страница.
Вы уже знакомы с тем, какие элементы используются для рисования в XAML. Все, что нужно добавить, это то, что контент WPF-E всегда размещается внутри контейнера <Canvas>, в другом все идентично. Для того, чтобы закончить нашу страницу нарисуем кое-что в нашем xaml-файле. Внесите в него такой код:
[code]<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>[/code]
Сохраните все документы и запустите Вашу страницу:
Поздравляю! Вы только что создали свою первую страницу на базе WPF-E. Что еще можно добавить? Если Вы хотите разместить на странице несколько независимых контролов для отображения XAML – не забудьте присвоить каждому из них уникальное имя. Что? Вы не видите содержимого данной страницы? Это может быть только потому, что вы забыли установить плагин для Вашего броузера.
Ноябрь, 2006
Комментарии
Espoir, не подскажешь, где бы найти подробный источник информации по xaml? Можно на английском.
kernel8 - скачайте Windows SDK - в комплекте подробнейшее руководство по программированию для .NET 3 . И , конечно же , оно на английском языке
Как вариант, не забывайте, что на нашем сайте есть целая серия статей посвященных этой тематике:
По теме
- Создаем контекстно-зависимое WPF-приложение
- #023 – Введение в WPF, reloaded…
- #022 Введение в Microsoft Interactive Designer RC1
- #021 Применение 3D в WPF - Часть 2
- #020 Применение 3D в WPF - Часть 1
- #019 Введение в возможности 3D на WPF
- #018 Размещение контрола NET 2.0 на форме WPF
- #017 Первое Web-приложение / Подробнее о Grid / Элемент Frame
- #016 EXE, XBAP, XAML? - Все равно!
- #015 Рисуем при помощи Visual Brush