Пример создания простого Silverlight приложения (часть 3)

Автор: http://silverlightru.net/

Ну вот и пришло время практики.. Сегодня мы немного потренируемся и попробуем сотворить чего Silverlight-оского.
Начало статьи тут….

Итак начнемс, вы уже должны были скачать и установить Expression Blend, если Вы этого не сделали, то смотрим тут, что и как необходима скачать и установить.
Запускаем Microsoft Expression Blend, кликаем New Project, и конечно выбираем SilverLight Application, указав папку в которой будут храниться исходники.

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

Т.е. проект содержит по умолчанию HTML страницу, код JavaScript содержащейся на этой странице, XAML документ.
Silverlight.js содержит код загрузки и иллустрирует пример управления SilverLight. Он представлен как часть Silverlight SDK.
Default.html - стандартная Web страница. Она содержит три ссылки на JavaScript, указывающие на Silverlight.js, Default.html.js , и Scene.xaml.js (который содержит обработчик событий определенных в XAML).
Итак мы займемся с вами созданием UI для Video Player.
Добавьте любой видео файл к вашему проекту. Чтобы сделать это, щелкните правой кнопкой мышки на Project Files в верху экрана, и выберите Add Existing Item… Выбираем любой видеофайл (Добавляем WMF и версия Microsoft Windows Player должна быть не ниже 10) и нажимаем ОК

Файл появится в Project Explorer, и, Медиа элемент будет добавлен на главную страницу. Вы можете теперь просмотреть ваш проект в браузере, который воспроизведет ваше видео! Также можно остановить автоматическое воспроизведение видео, редактируя XAML. Выберите XAML (из двух:Design&XAML) таблицу, откроется окно редактирования XAML. Просто нужно лишь отредактировать тег MediaElement, и установите атрибут AutoPlay=False.

Запускаем - смотрим, все работает!
Добавьте два текстовых блока на поле с текстом Play и соответственно Stop и назовите их Play_txt и Stop_txt, после этого ваш XAML файл дожен выглядеть следующим образом (что самое удобное, ошибки видны сразу на панели Errors).

<canvas>
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page";
<mediaelement x:name="You_Roll_wmv" width="352">
Height="288" Source="You Roll.wmv"
Stretch="Fill" Canvas.Left="134"
Canvas.Top="94" AutoPlay="False";&gt;
<textblock x:name="Play_txt" width="40" height="25" canvas.left="106">
 canvas.top="411" text="Play" textwrapping="Wrap"&gt;
<textblock x:name="Stop_txt" width="38" height="25" canvas.left="167">
canvas.top="411" text="Stop" textwrapping="Wrap"&gt;
</textblock></textblock></mediaelement>
</canvas>

Затем добавьте описание обработчика событий для блоков текста в XAML. Для этого используется свойство MouseLeftButtonDown (интуитивно понятно, что действует по нажатию левой клавиши мыши).
Итак для Play_txt добавляем действие DoPlay, для Stop_txt - DoStop, и соответственно участок с текстом в XAML выглядет следующим образом:

<textblock x:name="Play_txt" width="40" height="25">
canvas.left="106" canvas.top="411" text="Play" textwrapping="Wrap"
MouseLeftButtonDown="DoPlay"&gt;;
<textblock x:name="Stop_txt" width="38" height="25" canvas.left="167">
canvas.top="411" text="Stop" textwrapping="Wrap" 
MouseLeftButtonDown="DoStop">;
</textblock></textblock>

Теперь когда пользаватель щелкнет мышкой по одному из текстовых блоков, мы сможем обработать это событие при помощи JavaScript. Обработка Событий в JavaScript записывается здесь Page.xaml.js.
Так как мы определили функции по нажатию, как DoPlay и DoStop, запишим их соответсвенно в Page.xaml.js. Код должен выгдедеть следующим образом:

function DoPlay(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("YouRoll_wmv");
theMedia.Play();
}

function DoStop(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("YouRoll_wmv");
theMedia.Stop();
}

Все можем тестировать. Нажимаем на текстовый блок Play - ролик начинает проигрываться, нажимаем на Stop - останавливается. Поздравляю мы сделали первый проект при помощи Silverlight!!!