Знакомство с Silverlight

Размещено на http://www.allbest.ru/

Лабораторная работа

на тему: Знакомство с Silverlight



Содержание

1. Вводная часть

2. Создание приложения Silverlight

3. Модификация приложения Silverlight: первые шаги и полноэкранный режим

4. Модификация приложения Silverlight: простой проигрыватель MP3-файлов

5. Модификация приложения Silverlight: работа с анимацией

6. Завершающая часть

7. О приложении к Лабораторной работе



1. Вводная часть

В этой работе будет рассмотрена работа с подтипом приложений доступных для создания в Visual Studio 2010, а именно Приложение Silverlight. Что такое Silverlight?

Рис. 1.1 Логотип технологии Microsoft Silverlight

Microsoft Silverlight -- это программная платформа, включающая в себя плагин (надстройку) для браузера, который позволяет запускать приложения, содержащие анимацию, векторную графику и аудио-видео ролики, что характерно для RIA (Rich Internet Application).

Silverlight предоставляет графическую систему, схожую с Windows Presentation Foundation, и объединяет мультимедиа, графику, анимацию и интерактивность в одной программной платформе. Он был разработан, чтобы работать с XAML и с языками .NET.

Приложения Silverlight могут быть написаны на любом языке программирования, включённом в платформу .NET. Как таковые, все инструменты разработки которые могут быть использованы для разработки на .NET, также могут работать c Silverlight.

Как уже было сказано выше Silverlight это RIA-приложение.

Rich Internet Application ( «Насыщенное, «богатое» Интернет-приложение») -- это приложение, доступное через Интернет, насыщенное функциональностью традиционных настольных приложений, которое предоставляется либо уникальной спецификой браузера, либо через плагин, либо путём «песочницы» (виртуальной машины).

Как правило, приложение RIA:

· передаёт веб-клиенту необходимую часть пользовательского интерфейса, оставляя большую часть данных (ресурсы программы, данные и пр.) на сервере;

· запускается в браузере и не требует дополнительной установки ПО;

· запускается локально в среде безопасности, называемой «песочница» (sandbox).

В настоящее время тремя наиболее распространенными подобными платформами являются Adobe Flash, Java и Microsoft Silverlight.

Главное что нужно понять, Silverlight это веб-технология, позволяющая разнообразить возможности веб-приложений. Silverlight в отличие от WPF более простая в применении и более «массовая» технология.

Поддержка Silverlight реализована для всех популярных Windows-систем (Windows XP, Vista и 7), а также для большинства веб-браузеров. То есть технология не узкоспециализированная как, например WPF и достаточно распространена в настоящее время.

Чтобы больше понять, что за «зверь» этот Silverlight, приведём таблицу сравнения технических возможностей некоторых RIA:

Возможности	HTML4, XHTML	HTML5	Silverlight	Adobe Flash	JavaFX	Native Client
Многопоточность		Да	Да	Нет	Да
Двумерная графика		Да	Да	Да	Да
Трёхмерная графика		Неофициально и небезопасно	Да	Да	Да
Поддержка сокетов		Да	Да	Да	Да
Асинхронные HTTP запросы	Да	Да	Да	Да	Да
Синхронные HTTP запросы	Да	Да	Да	Нет
Модификация HTTP заголовков запроса	Да	Да	Да	Частично	Да
Анализ HTTP заголовков ответа	Да	Да	Да	Нет	Да
Постоянное HTTP/1.1 соединение		Нет	Да	Да	Нет	Нет
Хранилище данных	Нет	Да	Да	Да	Да	Нет
Поддержка «cookie»	Да	Да	Да	Да	Да	Нет
Таблицы стилей	Да	Да	Да	Да	Да
Пользовательские шрифты	Нет	Да	Да	Да	Да
Таймеры	Да	Да	Да	Да	Да
Поддержка аудио	Нет	Да	Да	Да	Да	Нет
Поддержка видео	Нет	Да	Да	Да	Да
Поддержка доступа к DOM браузера	Да	Да	Да	Да	Нет	Нет
Поддержка исполнения скриптов JavaScript	Да	Да	Да	Да	Нет	Нет
Поддержка вызова кода RIA из JavaScript	-	-	Да	Да	Нет	Нет
Поддержка динамической подгрузки кода	Да	Да	Да	Да	Да
Доступ к файловой системе		Да	Да	Частично	Да	Нет

Браузерная поддержка технологий:

Браузер	HTML5+JavaScript	Silverlight	Adobe Flash	JavaFX	Native Client
Internet Explorer 6	Нет	Да	Да	Да	Нет
Internet Explorer 7	Нет	Да	Да	Да	Нет
Internet Explorer 8	Нет	Да	Да	Да	Нет
Internet Explorer 9	Да	Да	Да	Да	Нет
FireFox 5 (Windows)	Нет	Да	Да	Да	Нет
FireFox 3.6	Нет	Moonlight	Да	Да	Нет
FireFox 4	Да	Да	Да	Да	Нет
Opera 9	Нет	Да	Да	Да	Нет
Opera 10\11 (Windows)	Да	Да	Да	Да	Нет
Opera 10\11 (Linux)	Да	Moonlight	Да	Да	Нет
Google Chrome (>9.0)	Да	Да	Да	Да	Да
Safari (>4.0)	Да	Да	Да	Да	Нет
Seamonkey 2.0	Нет	Да	Да	Да	Нет
Symbian Explorer	Нет	Да	Частично	Нет	Нет

Первая версия Silverlight, выпущенная в мае 2007 года, была далека от завершения и фактически не поддерживала .NET-код совсем. Вся основная разработка велась на языке JavaScript, а также присутствовала поддержка небольшого подмножества языка XAML, использовавшегося для описания интерфейса приложений для Silverlight.



Рис. 1.2 Архитектура приложения Silverlight 1.0

Рис. 1.3 Архитектура приложения Silverlight 2.0

Версией поставляемой «по умолчанию» вместе с Visual Studio 2010 стала Silverlight 3.

18 марта 2009 года на конференции «MIX09» в Лас-Вегасе Microsoft продемонстрировала бета-версию. 10 июля 2009 года в ходе мероприятия «See the Light» Microsoft объявила об официальном выпуске RTM версии, а вскоре была выпущена и окончательная версия (через девять месяцев после выхода второй).

В новую версию были добавлены новые элементы управления и различные возможности, а уровень данных был расширен для обеспечения стабильной основы для сценариев, более ориентированных на бизнес-процессы. В то же время, существующий уровень медиа был расширен за счёт добавления поддержки новых форматов и эффектов (более известных как «пиксельные шейдеры»). На уровне пользователя стало возможным переносить двухмерные элементы в трёхмерное пространство (что иногда называется «псевдо-3D» или «2,5D»). Анимация продвинулась ещё дальше, обеспечивая более плавное и приближенное к реальному воспроизведение. Некоторые шаги были предприняты и в области использования аппаратного ускорения (что само по себе является настоящей проблемой на смешанных платформах, как например, на поддерживаемых Silverlight).

Среди особенностей новой версии:

· Поддержка устройств с multitouch-интерфейсом (устройства, распознающие множественные касания сенсора).

· Поддержка форматов H.264, AAC и MPEG-4.

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

В целом Silverlight представляет собой урезанный вариант Windows Presentation Foundation, не требующий наличия .NET Framework. При этом возможности приложений Silverlight почти безграничны, весь недостающий функционал можно реализовать в виде модулей, используя Silverlight 3 SDK.

Также в Silverlight 3 был впервые представлен функционал, получивший название «вне браузера» («out-of-the-browser») (OOB). Реализация данного функционала обладала серьезными недостатками: например, OOB-приложения всё ещё не могли получать какие-либо дополнительные права, что весьма ограничивало их действия. Также не было возможности настройки окна OOB-приложения.

Silverlight 4 (Silverlight 4 SDK) на данный момент являются последней поддерживаемой версией Silverlight для Visual Studio 2010. Для установки можно воспользоваться встроенным в среду разработки средством: Установщик веб-платформы 3.0. Дополнительные инструменты для версии Silverlight 4, если таковые не были установлены ранее можно найти на вкладке Продукты -> Средства: Средства Silverlight 4 для Visual Studio 2010 (Англий) от 17.05.2011. Для версии будущей «пятой» версии: Silverlight 5 Tools for Visual Studio 2010 (Английский) от 16.12.2011.

Для того, чтобы узнать какая на данный момент в ОС установлена версия Silverlight можно воспользоваться средством Конфигурация Microsoft Silverlight («по умолчанию»: Пуск -> Все программы -> Microsoft Silverlight):

Рис. 1.4 Окно «Конфигурация Microsoft Silverlight»



Также это окно можно вызвать, если запустить Silverlight-приложение и нажать правую кнопку мыши в области этого приложения.

Что будет представлять из себя приложение, разрабатываемое в данной лабораторной работе?

Рассмотрим самые простые примеры работы с Silverlight-приложением. Разделим данную работу на три части.

Перед началом работы, рассмотрим процесс создания простейшего приложения Silverlight и основные особенности работы с данным типом приложений.

Во первой части будет разобрана возможность переключения страницы (для браузера) с приложением в полноэкранный режим и обратно в оконный. Также, посмотрим, нажатие каких клавиш клавиатуры (в фокусе страницы) будет «перехватываться» приложением в этих режимах. В довесок будет определять реальные размеры окна страницы (приложения на странице браузера). Во второй части будет создан полноценный проигрыватель MP3-файлов. «Трэки» будут заранее подготовлены и сохранены в маленькой базе данных. Проигрыватель будет поддерживать возможность воспроизведения, остановки воспроизведения, паузы на текущем месте воспроизведения, выключение и включение звука, изменения уровня громкости и переключение баланса на левый или правый наушник (колонку) (если звуковое устройство ОС настроено и поддерживает режим воспроизведения стереозвука). Третья часть работы будет демонстрировать работу с анимацией движения объекта в приложении Silverlight. Будет продемонстрировано несколько простых режимов обработки анимации простых объектов.

2. Создание приложения Silverlight

Запускаем Visual Studio 2010, откроется Начальная страница:

Для начала, надо создать проект, для этого выполним последовательно: Файл -> Создать -> Проект… (также можно просто нажать сочетание клавиш Ctrl+Shift+N или пункт «Создать проект…» на Начальной странице):

Рис. 2.1 Создание нового проекта

Выберем слева в пункте Установленные шаблоны язык Visual C#, далее найдём в списке Приложение Silverlight. Также здесь можно выбрать какой использовать «фреймворк» (набора компонентов для написания программ). В нашем случае выберем .NET Framework 4.



Рис. 2.2 Окно создания нового проекта

В поле Имя вводим LWP17Silverlight -- это название программы (выбрано по названию лабораторного практикума, номеру и названию работы). В поле Расположение указана конечная директория, где будет находиться весь проект. Выберем расположение удобное для быстрого поиска. В поле Имя решения вводится либо название программы «по умолчанию» из поля Имя автоматически, либо можно ввести своё собственное. Под этим именем будет создана конечная папка проекта (если Имя и Имя решения разные).



Рис. 2.3 Вводим данные нового проекта приложения Silverlight

После нажатия клавиши ОК. Откроется ещё одно окно, в котором будет предложено:

Рис. 2.4 Создать приложение Silverlight: выбор настроек



Ввести имя нового веб-проекта на основе приложения (Имя нового веб-проекта оставляем без изменений: LWP17Silverlight.Web), указать версию Silverlight (в нашем случае «четвёрка»), а также Включить службы RIA WCF¹ (не ставим галочку).

ПРИМЕЧАНИЕ № 1: Включение в проект Службы RIA WCF упрощает разработку многоуровневых решений класса RIA (полнофункциональных интернет-приложений), таких как приложения Silverlight. Типичной проблемой при разработке многоуровневого решения RIA является согласование логики среднего уровня и уровня представления. Чтобы обеспечить максимальное взаимодействие с пользователем, клиент «Службы RIA» должен учитывать логику приложения, которое находится на сервере. Однако было бы нежелательным разрабатывать и поддерживать логику приложения, как на уровне представления, так и на среднем уровне. «Службы RIA» решает эту проблему, поскольку в составе платформы имеются компоненты, инструменты и службы, обеспечивающие доступ клиента «Службы RIA» к логике приложения на сервере без необходимости вручную дублировать эту программную логику. Можно создать клиент «Службы RIA», учитывающий бизнес-правила, и при каждой компиляции решения эта логика будет автоматически обновляться на клиенте.

На рисунке ниже показана упрощённая версия многоуровневого приложения. «Службы RIA» посвящён в основном решению задач в прямоугольнике между уровнем представления и уровнем доступа к данным (DAL) и позволяет упростить разработку многоуровневого решения с клиентом «Службы RIA»:



Рис. 2.5 Пример упрощённой структуры многоуровневого приложения

«Службы RIA» добавляет в среду Visual Studio 2010 инструменты (в частности Ссылки), которые позволяют связать клиентский и серверный проекты в единое решение и формировать код для клиентского проекта из кода среднего уровня. Компоненты платформы поддерживают предписывающие шаблоны при написании логики приложения, что позволяет повторно использовать ее на уровне представления. Доступны также такие службы для типовых сценариев, как проверка подлинности и управление параметрами пользователя, что позволяет сократить время разработки.

В «Службы RIA» можно предоставлять данные из серверного проекта клиентскому проекту путем добавления служб домена. Платформа «Службы RIA» реализует каждую службу домена в виде службы Windows Communication Foundation (WCF).

После нажатия кнопки ОК (рисунок 2. 4), среда разработки сформирует два (а не один как раньше) проекта в одном решении, каждый со своим исходных кодом и дополнительными файлами.



Рис. 2.6 Обозреватель решений: состав проектов приложения Silverlight сформированного средой разработки

Теперь, можно откомпилировать созданную программу, нажав клавишу F5 (Отладка -> Начать отладку или нажав на иконку . Тем самым мы запускаем приложение в режиме отладки (и производим компиляцию debug-версии программы) (Debug выбрано изначально). Перед компиляцией обратим вниманием на директорию ClientBin веб-проекта. Директория пока что пуста.

Рис. 2.7 Запуск приложения Silvelight по конфигурации Debug



Как видим, проект пока что пуст. Единственное что можно сделать, это вызвать окно конфигурации Silverlight:

Обратим также внимание на имя страницы в окне браузера и на соответствующие имена в обозревателе решений веб-проекта. Обе страницы (LWP17SilverlightTestPage.aspx и LWP17SilverlightTestPage.html) идентичны и подцепляют «яваскрипт»-код Silvelight.js и главную страницу первого проекта в составе решения (WPF-приложения). Код обеих веб-страниц автоматически редактируется после каждой компиляции. Привязка объекта WPF-приложения к страницах осуществляется следующим образом (автоматически, через обычный HTML-код):

<form id="form1" runat="server" style="height:100%">

<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/LWP17Silverlight.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="4.0.50826.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Получить Microsoft Silverlight" style="border-style:none"/>

</a>

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

</form>

Ключевая строчка запускаемого объекта выглядит так:

<param name="source" value="ClientBin/LWP17Silverlight.xap"/>

Сам объект, на которые ссылается код, генерируется после первой компиляции и помещается в директорию ClientBin:

В случае, если бы в окне на рисунке 2. 4. сняли галочку с пункта: Разместить приложение Silverlight на новом веб-сайте, веб-проект бы не создавался, и отладка и запуск производилась бы на динамически-создаваемых веб-страницах в директории LWP17Silverlight\Bin\Debug или LWP17Silverlight\Bin\Release (LWP17SilverlightTestPage.html).

В любом случае, для отладки и запуска среда разработки запускает ASP.NET Development Server и «бросает» исполняемые страницы на локальный адрес и порт (например, в нашем случае http://localhost:53510). Получить доступ к окну сведений можно через иконку в «трее» панели «Пуск» (кнопка «Подробные сведения»). Окно сведений выглядит так:



Рис. 2.8. Запуск приложения Silverlight по конфигурации Debug: просмотр сведений о сервере и локальном адресе страницы

Почему же понадобилось создавать новый веб-проект? Об этом будет упомянуто немного позже.

3. Модификация приложения Silverlight: первые шаги и полноэкранный режим

Первым делом рассмотрим начальные возможности Silverlight. Как уже стало ясно, основу приложения в текущем проекте составит приложение WPF. О том, что такое WPF и как с ним работать было рассказано в предыдущих лабораторных работах практикума.

Основное отличие данного WPF и «чистого» WPF-приложения состоит в изменённом и расширенном коде файла App.xaml.cs для главного файла, а также наличие файла AppManifest.xml в папке Properties:



Двойным нажатием открываем Конструктор для главной редактируемой страницы проекта MainPage.xaml. Код XAML должен быть изначально таким:

<UserControl x:Class="LWP17Silverlight.MainPage"

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" d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White"></Grid>

</UserControl>

Ищем:

mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

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

Либо впишем:

mc:Ignorable="d" Height="300" Width="400">



Итак, поменяем эту строчку следующим кодом (изменим размеры для дизайна):

mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="640">

Теперь инициализируем событие нажатия любой клавиши в фокусе страницы. Для этого на панель Свойства и перейдём в вкладку События. Двойным нажатием по событию KeyDown инициализируем метод UserControl_KeyDown (где UserControl -- имя формы):

Код XAML:

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" KeyDown="UserControl_KeyDown">

Отредактируем сетку Grid. Для этого найдём в XAML-коде конструктора код:

<Grid x:Name="LayoutRoot" Background="White">

Мышкой жмём на слово «Grid». На панели свойство ищем свойство Background (группа свойств Кисти):

Вписываем Azure либо выбираем понравившийся цвет. Далее редактируем свойство RowDefinitions, жмём «...»:

В окне Редактор коллекции: RowDefinition добавляем пять элементов RowDefinition, свойство Height первого и последнего ставим как «2*»:



Рис. 3.1. Добавляем разделители на строки для элемента сетки

Также поступаем для столбцов. Открываем свойство для элемента Grid: ColumnDefinitons. Добавляем два новых ColumnDefinition в редакторе коллекции. Свойство Width второго вписываем как «2*». Итоговый элемент Grid должен выглядеть так:

Рис. 3.2. Завершённый элемент Grid, разделённый на строки и столбцы



В первую клетку сетки (строка: 0, столбец: 0) вставляем в панели элементов простой TextBlock ():

Выделим XAML-код добавленного элемента и заменим его следующим кодом:

<TextBlock HorizontalAlignment="Stretch" Name="textBlock1" VerticalAlignment="Stretch" TextAlignment="Center">

Нажмите кнопку "Полноэкранный режим" для перехода в полноэкранный режим.

<LineBreak/>

Нажмите кнопку "Обычный режим" для перехода в режим окна браузера.

<LineBreak/>

<LineBreak/>

В обычном режиме опробуйте нажатие клавиш на клавиатуре в фокусе окна браузера.

<LineBreak/>

Нажатая клавиша будет отображена на на странице.

<LineBreak/>

<LineBreak/>

В полноэкранном режим будут работать только следующие клавиши:

<LineBreak/>

Стрелки клавиатуры, пробел, Tab, Page Up, Page down, Home, End и Enter.</TextBlock>

Данный помещает текст не внутрь свойства Text, а в границы открывающего и закрывающего тэгов <TextBlock ...>Текст</TextBlock>. Размещённый текст располагается по центру в элементе. Сам элемент растягивается до границ ячейки сетки.

В ячейку ниже [1, 0] добавим кнопку (Button), и сразу же замени код кнопки следующим XAML-кодом:

<Button Content="Полноэкранный режим" Grid.Row="1" Grid.Column="0" x:Name="button1" Height="23" VerticalAlignment="Center" HorizontalAlignment="Center" Width="150" Click="button1_Click" IsTabStop="False" />

Замену в этом случае можно не проводить. Свойства Grid.Row «1» и Grid.Column «0» определяются в момент размещения элемента внутри сетки. Остальные свойства кнопки: Width установлено в «150», а в свойствах VerticalAligment и HorizontalAligment выбирано Center. IsTabStop: галочка снята.

В ячейки [2, 0] и [3, 0] вставляем ещё два TextBlock со следующим XAML-кодом:

<TextBlock x:Name="textBlock2" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" FontSize="26" />

<TextBlock x:Name="textBlock3" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" FontSize="36" />



Двойным нажатием по единственной кнопке в конструкторе инициализируем событие Click. Код такой:

private void button1_Click(object sender, RoutedEventArgs e)

{

if (!App.Current.Host.Content.IsFullScreen)

button1.Content = "Оконный режим";

else button1.Content = "Полноэкранный режим";

// Переключение в полноэкранный или оконный режимы

App.Current.Host.Content.IsFullScreen = !App.Current.Host.Content.IsFullScreen;

}

Код события нажатия клавиши KeyDown меняем так:

private void UserControl_KeyDown(object sender, KeyEventArgs e)

{

// Перехватываем нажатие клавиши в textBlock3

this.textBlock3.Text = "Нажата кнопка: " + e.Key.ToString();

}

В коде файла MainPage.xaml.cs находим:

public MainPage()

{

InitializeComponent();

}



Изменяем на:

public MainPage()

{

InitializeComponent();

// Подключаем событие Loaded чтобы подключить события на этапе загрузки страницы

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

// Подписываемся на события из SilverlightHost и вызываем соответствующий метод при срабатывании

App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged); // Событие состояния страницы: окнонный/полноэкранный

App.Current.Host.Content.Resized += new EventHandler(Content_Resized); // Событие изменения размеров окна

}

void Content_Resized(object sender, EventArgs e)

{

// Когда изменяются размеры страницы, обновляем данные об этом

// вызывом функцию вывода размеров Silverlight плагина

RefreshTextBlockShowSize();

}

void Content_FullScreenChanged(object sender, EventArgs e)

{

// Когда изменяются состояния страницы (оконный/полноэкранный), обновляем данные об этом

// вызывом функцию вывода размеров Silverlight плагина

RefreshTextBlockShowSize();

}

private void RefreshTextBlockShowSize()

{

// Показывает размеры плагина Silverlight plug-in в textBlock2

this.textBlock2.Text = string.Format("Размер страницы: {0}*{1}",

App.Current.Host.Content.ActualWidth,

App.Current.Host.Content.ActualHeight);

}

Компилируем, проверяем работоспособность. Следуя инструкции, написанной на странице, выполняем различные действия, и наблюдает за результатом.



Рис. 3.3. Результат работы приложения Silverlight: нажата клавиша «пробел»

Рис. 3.4. Результат работы приложения Silverlight: включен полноэкранный режим страницы



4. Модификация приложения Silverlight: простой проигрыватель MP3-файлов

Простой проигрыватель MP3-файлов. Для начала добавим два простеньких класса. Один класс будет отвечать за свойства MP3-файла: имя и путь. Добавим класс для проекта WPF-приложения: выделим имя проекта (LWP17Silverlight) и выполним: Проект -> Добавить класс... (Shift+Alt+C): в открывшемся окне в поле Имя указываем DataItem.cs. Код файла будет таким:

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace LWP17Silverlight

{

public class DataItem

{

private string nameItem;

private string pathItem;

public string NameItem

{

get { return nameItem; }

set { nameItem = value; }

}

public string PathItem

{

get { return pathItem; }

set { pathItem = value; }

}

}

}

Второй класс будет содержать всего две функции, которые будут работать со временем воспроизведения файла. Класс назовём ProgressConverter (файл ProgressConverter.cs) с кодом:

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Data;

namespace LWP17Silverlight

{

public class ProgressConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

return ((TimeSpan)value).TotalSeconds;

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

return TimeSpan.FromSeconds((double)value);

}

}

}

В файле MainPage.xaml в коде XAML найдём:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Добавим после:

xmlns:lwp17="clr-namespace:LWP17Silverlight"

Найдём:

mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="640" KeyDown="UserControl_KeyDown">

Добавим после:

<UserControl.Resources>

<lwp17:ProgressConverter x:Key="progress"></lwp17:ProgressConverter>

</UserControl.Resources>

Основным элементом, реализующим работу непосредственно «начинки» проигрывателя станет MediaElement (Панель элементов: ). Добавляем его на страницу в ячейку [0, 1] (строка: 0, столбец: 1). Код элемента будет таким:

<MediaElement x:Name="mediaElement" Grid.Column="1" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Width="Auto" AutoPlay="True" IsMuted="False" Stretch=”Fill” />

Установленные свойства:

XAML-код имени элемента:	x:Name=”mediaElement”
AutoPlay:	True
Stretch:	Fill
HorizontalAligment:	Stretch
VetricalAligment:	Bottom
Height:	23
Width:	Auto
IsMuted:	Нет галочки

Второй немаловажный элемент нашего проигрывателя, будет являться списком всех доступных композиций для прослушивания. Список мы поместим в DataGrid и будем выводить в нём композиции по имени, записанному в специальном XML-файле нашего «сайта».

Перетягиваем с панели элементов в самую правую внизу страницы [4, 1] DataGrid (). Код, основанный на изменении свойств элемента:

<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="4" Height="Auto" HorizontalAlignment="Stretch" Name="songList" VerticalAlignment="Stretch" Width="Auto" DataContext="{Binding}" />

В списке Выбрать элемент выбираем DataGridTextColumn, жмём дважды добавить. Свойства первого столбца такие:

XAML-код поля привязки:	Binding=”{Binding NameItem}”
ACanUserSort:	Нет галочки
Header:	Имя композиции
IsReadOnly:	Галочка
Width:	Auto

Для второго столбца:

XAML-код поля привязки:	Binding=”{Binding PathItem}”
ACanUserSort:	Нет галочки
Header:	Путь к композиции
IsReadOnly:	Галочка
Width:	Star

Итоговый XAML-код:

<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="4" Height="Auto" HorizontalAlignment="Stretch" Name="songList" VerticalAlignment="Stretch" Width="Auto" DataContext="{Binding}">

<sdk:DataGrid.Columns>

<sdk:DataGridTextColumn Binding="{Binding NameItem}" CanUserReorder="True" CanUserResize="True" CanUserSort="False" Header="Имя композиции" IsReadOnly="True" Width="Auto" />

<sdk:DataGridTextColumn Binding="{Binding PathItem}" CanUserReorder="True" CanUserResize="True" CanUserSort="False" Header="Путь к композиции" IsReadOnly="True" Width="*" />

</sdk:DataGrid.Columns>

</sdk:DataGrid>

Дальше последовательно размещаем остальные элементы проигрывателя. Выглядеть это будет следующим образом:

Рис. 4.2. Расстановка элементов на странице MainPage.xaml проекта WPF приложения Silverlight

Первым элемент будет являться шапкой нашего MP3-проигрывателя с простым текстовым блоком. Расположим его в [0, 1] ячейке сетки. Код TextBlock будет таким:

<TextBlock FontSize="20" Height="34" Name="tbTitle" Text="Простой проигрыватель MP3-файлов" VerticalAlignment="Center" Width="Auto" Grid.Column="1" HorizontalAlignment="Center" />

Чуть ниже в ячейке [1, 1] расположим элемент, выполняющий функции временной дорожки композиции (расположение ползунка будет отвечать за положение на шкале воспроизведения файла), а также два TextBlock. Первый будет статическими, второй же будет отражать текущий статус воспроизведений:

<TextBlock Grid.Row="1" Grid.Column="1" Height="23" HorizontalAlignment="Center" Name="textBlock4" Text="Воспроизведение:" VerticalAlignment="Top" Width="106" />

<TextBlock Grid.Row="1" Grid.Column="1" Height="23" HorizontalAlignment="Center" Name="textBlock5" Text="Статус:" VerticalAlignment="Bottom" Width="Auto" />

Временная дорожка: Slider (). Привязку (свойство Value для элемента Slider) данных к ползунку (Position) осуществим через класс ProgressConvetrter на основе данных элемента medaiElement:

XAML-код элемента будет таким:

<Slider x:Name="sliderProcess" Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="230" Value="{Binding ElementName=mediaElement, Path=Position, Mode=TwoWay, Converter={StaticResource progress}}" IsEnabled="False" />

В ячейку [2, 1] вставим кнопки проигрывателя и два дополнительных слайдера. Кнопки, последовательно будут выполнять функции: остановки, воспроизведения, паузы и выключения звука. Первый слайдер будет ответственен за уровень громкости, второй за баланс левого и правого наушника (колонки) в режиме стерео-воспроизведения.

Кнопка «Стоп»:

<Button x:Name="buttonStop" Content="Стоп" Grid.Row="2" Grid.Column="1" Width="70" Height="23" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>



Кнопка «Воспроизвести:

<Button x:Name="buttonPlay" Content="Воспроизвести" Grid.Row="2" Grid.Column="1" Width="100" Height="23" HorizontalAlignment="Left" Margin="70,23,0,23" VerticalAlignment="Center"></Button>

Кнопка «Пауза»:

<Button x:Name="buttonPause" Content="Пауза" Grid.Row="2" Grid.Column="1" Width="70" Height="23" HorizontalAlignment="Left" Margin="170,23,0,23" VerticalAlignment="Center"></Button>

Кнопка «Заглушить»:

<Button x:Name="buttonMuted" Content="Заглушить" Grid.Row="2" Grid.Column="1" Width="70" Height="23" HorizontalAlignment="Left" Margin="240,23,0,23" VerticalAlignment="Center"></Button>

TextBlock и Slider отвечающий за громкость:

<Slider LargeChange="0.1" Maximum="1" SmallChange="0.01" Value="{Binding Volume, ElementName=mediaElement, Mode=TwoWay, UpdateSourceTrigger=Default}" Grid.Column="1" Grid.Row="2" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Width="94" />

<TextBlock Height="23" HorizontalAlignment="Right" Margin="0,0,98,0" Name="textBox6" Text="Громкость:" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" />

TextBlock и Slider отвечающий за баланс:

<Slider LargeChange="0.1" Maximum="1" Minimum="-1" Name="sliderBalance" Value="{Binding Path=Balance, ElementName=mediaElement, Mode=TwoWay, UpdateSourceTrigger=Default}" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" Width="94" Height="25" VerticalAlignment="Bottom" />

<TextBlock Height="23" HorizontalAlignment="Right" Margin="0,0,116,0" Name="textBox7" Text="Баланс:" VerticalAlignment="Bottom" Grid.Column="1" Grid.Row="2" />

В ячейку [3, 1] вставляем единственный TextBlock:

<TextBlock FontSize="12" Height="23" HorizontalAlignment="Center" Name="textBlock8" Text="Список доступных MP3-файлов:" VerticalAlignment="Center" Width="Auto" Grid.Column="1" Grid.Row="3" />

Перед тем, как работать с событиями элементов и кодом приложения, добавим необходимые ресурсы «сайта» (веб-проекта). Создаём последовательно две папки (Resource -> MP3). Для создания папки выделяем имя веб-проекта, далее выполняем Проект -> Создать папку:

Собственно веб-проект и импорт ресурсов MP3-файлов в конечную папку проекта необходим для «эмуляции» работы приложения Silverlight с неким сайтом. В конечном итоге, страница с Silverlight-приложением получает удалённо сами файлы (путь, имя файла и содержимое).

В конечную папку импортируем несколько композиций, выполняем: Проект -> Добавить существующий элемент... (Shift+Alt+A). Пусть в этой папке будут храниться несколько MP3-файлов:

Теперь в папке Resource создаём XML-файл с именем MusicList.xml (Проект -> Добавить новый элемент... (Ctrl+Shift+A), следующего содержания:

<?xml version="1.0" encoding="utf-8" ?>

<root>

<music open="1" path="Resource/MЗ3/Atrium_Sun_-_Abyss_(Original_Mix).mp3" name="Abyss (Original Mix)">Atrium Sun</music>

<music open="1" path="Resource/MP3/Daniel_Barbosa_-_Asian_Gardens_(Feat._Shen_Shen).mp3" name="Asian Gardens (Feat. Shen Shen)">Daniel Barbosa</music>

<music open="1" path="Resource/MP3/Elena_-_Zombie_(Ambient_Vocal_Edit).mp3" name="Zombie (Ambient Vocal Edit)">Elena</music>

</root>

Атрибуты для элемента music:

path: содержит полный путь до файла с указанием имени файла и расширения; приложение silverlight создание модификация

name: содержит отображаемое в списке имя (для страницы);

значение: содержит автора композиции.

Перейдём к функциональности кода главной страницы MainPage.xaml.cs: в начало файла добавим следующий код:

// Для MP3-проигрывателя

using System.Xml;

using System.IO;

using System.Windows.Threading;

using System.Windows.Browser;

Найдём:

public MainPage()

{

Добавим до:

public List<DataItem> DataItems;

public bool boolIsMuted = false;

private TimeSpan timeDuration; // Интервал времени

Найдём:

// Подключаем событие Loaded чтобы подключить события на этапе загрузки страницы

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

Добавим после:

this.XmlProcessMethod();

Найдём:

// Переключение в полноэкранный или оконный режимы

App.Current.Host.Content.IsFullScreen= !App.Current.Host.Content.IsFullScreen;

}

Добавим после:

/// <summary>

/// Функция использует асинхронную загрузку данных из XML-файла

/// и подписывается на событие для объекта WebClient DownLoadXmlComplete

/// и событие MeidaEnded объекта MediaElement

/// </summary>

private void XmlProcessMethod()

{

WebClient webClient = new WebClient();

webClient.DownloadStringAsync(new Uri(HtmlPage.Document.DocumentUri, "Resource/MusicList.xml"));

webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(this.DownLoadXmlComplete);

mediaElement.MediaEnded += new RoutedEventHandler(mediaElement_MediaEnded);

}

/// <summary>

/// Загрузка музыки согласно данные XML-файла и конвертирование данных в список.

/// Привязка свойства ItemSource элемента DataGrid к данному списку.

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void DownLoadXmlComplete(object sender, DownloadStringCompletedEventArgs e)

{

using (XmlReader reader = XmlReader.Create(new StringReader(e.Result)))

{

DataItems = new List<DataItem>();

while (reader.Read())

{

if (reader.IsStartElement() && reader.GetAttribute("open") == "1")

{

string pathMusic = reader.GetAttribute("path").ToString();

string nameMusic = reader.GetAttribute("name").ToString();

DataItem dataItem = new DataItem();

dataItem.NameItem = nameMusic;

dataItem.PathItem = pathMusic;

DataItems.Add(dataItem);

}

}

this.DataContext = DataItems;

}

}

Инициализируем события. Событие SelectionChanged элемента DataGrid:

private void songList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

sliderProcess.IsEnabled = true;

mediaElement.Position = new TimeSpan(0); // Обнуляем слайдер воспроизведения

DataItem selectItem = (DataItem)songList.SelectedItem; // Получаем выбранный в списке элемент

mediaElement.Source = new Uri(HtmlPage.Document.DocumentUri, selectItem.PathItem); // Меняем источник

mediaElement.Play(); // Запускаем композицию

textBlock4.Text = "Воспроизведение: " + selectItem.NameItem.ToString();

}

Событие MediaEnded элемента MediaElement:

private void mediaElement_MediaEnded(object sender, RoutedEventArgs e)

{

textBlock5.Text = "Статус: Воспроизведение завершено";

mediaElement.Pause();

mediaElement.Position = TimeSpan.Zero;

}

Событие MediaOpened элемента MediaElement:

private void mediaElement_MediaOpened(object sender, RoutedEventArgs e)

{

textBlock5.Text = "Статус: Воспроизведение начато";

// Получаем общее время композиции

timeDuration = mediaElement.NaturalDuration.HasTimeSpan ? mediaElement.NaturalDuration.TimeSpan : TimeSpan.FromMilliseconds(0);

sliderProcess.Maximum = timeDuration.TotalSeconds;

}

Событие CurrenyStateChanged элемента MediaElement:

private void mediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)

{

textBlock5.Text = "Статус: " + mediaElement.CurrentState.ToString();

if (mediaElement.CurrentState != MediaElementState.Playing

&& mediaElement.CurrentState != MediaElementState.Paused)

{ this.sliderProcess.IsEnabled = false; }

else { this.sliderProcess.IsEnabled = true; }

}

События Click элемента всех кнопок поочерёдно:

private void buttonStop_Click(object sender, RoutedEventArgs e)

{

mediaElement.Position = TimeSpan.Zero;

mediaElement.Stop();

}

private void buttonPlay_Click(object sender, RoutedEventArgs e)

{

mediaElement.Play();

}

private void buttonPause_Click(object sender, RoutedEventArgs e)

{

mediaElement.Pause();

}

private void buttonMuted_Click(object sender, RoutedEventArgs e)

{

if (!boolIsMuted)

{

textBlock5.Text = "Статус: Звук выключен";

buttonMuted.Content = "Включить";

mediaElement.IsMuted = true;

boolIsMuted = true;

}

else

{

textBlock5.Text = "Статус: Звук включен";

buttonMuted.Content = "Заглушить";

mediaElement.IsMuted = false;

boolIsMuted = false;

}

}

Компилируем, проверяем работоспособность. Запускаем страницу, выбираем любой MP3-файл в списке доступных файлов, слушаем (если конечно есть на чём слушать ), перемещаем ползунок по композиции, жмём на кнопку «Пауза», уменьшаем громкость, меняем баланс на левый наушник или на правый, выключаем и включаем звук.

Рис. 4.3 Результат работы приложения Silverlight: воспроизведение выбранной композиции



5. Модификация приложения Silverlight: работа с анимацией

Для работы с анимацией нужен объект анимации и объект, который будет анимирован. В нашем случаем таки объектом станет простой эллипс. Для «анимации» движения объекта в пространстве понадобится конечная точка движения, которую можно получить простым щелчком на странице в стороне от эллипса. Всё движение будет происходить от начальной до конечной точки, за время, определённое в коде.

Весь процесс анимации в основном в данной части работы, будет определять объект анимации:

<Storyboard>Дочерние анимации</Storyboard>

Storyboard -- класс, шкала времени контейнера, которая предоставляет объект и свойство, содержащие сведения о дочерних анимациях.

Большая часть свойств шкалы времени могут иметь привязку данных или могут быть анимированы; тем не менее, в связи с особенностями действия системы расчета времени поведение привязанных к данным и анимированных шкал времени отличается от поведения других привязанных к данным или анимированных объектов. Чтобы понять их поведение, следует осознать, что означает активирование временной шкалы.

При активировании временной шкалы создаются копии временной шкалы и дочерних временных шкал. Эти копии фиксируются (устанавливаются в режим "только для чтения"), а на их базе создаются объекты Clock. Эти объекты используются для выполнения фактических действий по анимации целевых свойств. Если шкала времени является привязанной к данный или анимированной, при создании часов создается моментальный снимок ее текущих значений. Хотя исходная временная шкала может продолжить изменение, ее часы не будут меняться.

Для отражения в шкале времени привязки данных или изменений анимации необходимо повторно создать ее часы. Часы не воссоздаются автоматически. Ниже приведены несколько способов применения изменений шкалы времени:

· Если шкала времени принадлежит Storyboard, можно заставить её отражать изменения посредством применения её раскадровки при помощи метода BeginStoryboard или Begin. Это имеет побочный эффект в виде перезапуска анимации. В коде можно использовать метод Seek для возврата раскадровки обратно в предыдущее положение.

· Если анимация применяется непосредственно к свойству с помощью метода BeginAnimation, снова вызываем метод BeginAnimation и передаём ему измененную анимацию.

· Если ведется работа непосредственно на уровне часов, создаём и применяем новый набор часов и используем их для замены предыдущего набора созданных часов.

Подготовим «площадку» для реализации возможностей анимации. Откроем конструктор главной страницы MainPage.xaml и установим в единственную незанятую ячейку элемента Grid (строка: 4, столбец: 0) элемент TabControl () со следующими свойствами, уже определёнными XAML-кодом:

<sdk:TabControl Grid.Row="4" HorizontalAlignment="Stretch" Name="tabControl1" VerticalAlignment="Stretch">

...

</sdk:TabControl>

Элемент TabControl будет растянут по всей ячейки элемента Grid. Что же касается кода на месте троеточия: там будет располагаться код определяющий закладки TabItem, но каждая закладка будет являться полноценной страницей XAML. Для первой закладки создаём эту страницу. Выделим имя WPF-проекта, далее выполним Проект -> Добавить новый элемент...: в открывшемся окне в списке «Установленные шаблоны» выберем «Silverlight», далее справа найдём «Страница Silverlight»:

Рис. 5.1. Добавление нового элемента - LWP17Silverlight: Страница Silverlight

Имя вводим как Page_BasicAnimation.xaml (приставка Page нужна для группировки страниц в обозревателе решений). Жмём ОК. Страница добавлена. Откроем её в конструкторе и в коде XAML найдём строчки:

d:DesignWidth="640" d:DesignHeight="480"

Title="Page1 Page">



Изменим эти строчки так (равносильно изменению свойств, как уже было сказано):

d:DesignWidth="300" d:DesignHeight="300"

Title="Знакомство с Silverlight (C#) :: Основы анимации">

Теперь «запихнём» новую страницу в TabControl следующим образом. Откроем MainPage.xaml в конструкторе, найдём код добавления элемента TabControl и между тэгами добавим следующий XAML-код:

<lwp17:Page_BasicAnimation></lwp17:Page_BasicAnimation>

Напоминаем, слово lwp17 это доступ к пространству имён приложения (WPF-проекта) определённый в шапке страницы MainPage.xaml:

xmlns:lwp17="clr-namespace:LWP17Silverlight"

Откроем XAML-код страницы Page_BasicAnimation.xaml, найдём:

<Grid x:Name="LayoutRoot">

...

</Grid>

За место троеточия вставим:

<Rectangle x:Name="rectangle1" Fill="Turquoise"

Canvas.Top="100" Canvas.Left="100"

Width="100" Height="100">

<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.Loaded">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation RepeatBehavior="3x"

Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Height"

To="200" Duration="0:0:5"

AutoReverse="True" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

Откомпилируем и увидим как ровный квадрат превращается в следующее:

Теперь немного теории.

BeginStoryboard («Начать раскадровку») -- это действие триггера, содержащее объект Storyboard («Раскадровка»). Объекты раскадровки содержат определения анимации. При определении анимации эти объекты просто внедряются внутрь определения EventTrigger:

<Rectangle x:Name="rect" Fill="Red"

Canvas.Top="100" Canvas.Left="100"

Width="100" Height="100">

<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.Loaded">

<BeginStoryboard>

<Storyboard>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

Теперь, когда инфраструктура для анимации установлена, можно указать, какую анимацию следует выполнить. На самом базовом уровне, анимация определяет изменение свойства с течением времени. Можно анимировать три различных типа свойств. Каждый из этих типов свойств анимируется из значения, указанного в атрибуте From («От») (или, если оно не установлено, из его текущего значения), к значению, указанному в атрибуте To («К»), либо к значению, указанному в атрибуте By («По»).

Двойные типы анимируются с помощью DoubleAnimation или DoubleAnimationUsingKeyFrames. Этот метод используется для анимации свойств, содержащих двойное значение -- например, измерений, вроде Canvas.Left или визуальных атрибутов, вроде Opacity.

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

Типы цветов анимируются с помощью ColorAnimation или типа ColorAnimationUsingKeyFrames. Этот метод используется для анимации свойств, содержащих значение цвета -- фона или штриха элемента, например.

Чтобы определить, к какому объекту следует применить анимацию, на этих типах анимации используется свойство Storyboard.TargetName и ему необходимо передать имя такого объекта, устанавливаемое на объекте с помощью свойства x:Name. Вдобавок, свойство, которое будет анимировано, указывается с помощью Storyboard.TargetProperty. Учтите, что при указании сложного или присоединенного свойства (такого как Canvas.Left), его следует поместить в скобки. Так, для примера, чтобы нацелить двойную анимацию на Height прямоугольника, именуемого rectangle1, XAML должен выглядеть следующим образом:

<DoubleAnimation Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Height" />

Чтобы определить, сколько времени займёт переход затрагиваемых свойств от одного значения к другому, используется свойство Duration («Продолжительность»). Отметьте, что оно определено в формате чч:мм:сс, где пятисекундная продолжительность анимации указывается как 00:00:05, сокращенно 0:0:5.

<DoubleAnimation Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Height" Duration="0:0:5" />

Если нежелательно, чтобы анимация началась немедленно, можно вставить задержку, используя свойство BeginTime и тот же синтаксис:

<DoubleAnimation Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Height" BeginTime="0:0:5" />

Можно также скорректировать поведение анимации, умножив продолжительность на коэффициент скорости. Это проделывается с помощью свойства SpeedRatio. Например, в предыдущем случае продолжительность была установлена на 5 секунд. Можно изменить коэффициент скорости, заставив анимацию длиться 10 секунд, установив SpeedRatio на 2, или, как вариант, можно ускорить анимацию до 1 секунды, установив SpeedRatio на 0.2.

<DoubleAnimation Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Height" SpeedRatio="2" Duration="0:0:5" />

Анимация Silverlight предоставляет средство для отмены изменений, внесённых как часть анимации. Например, если двойное значение переносится от 0 к 500 за определенный промежуток времени, AutoReverse заставит анимацию перейти от 500 обратно к нулю.

Если анимация установлена на работу в течении 5 секунд, как показано выше и AutoReverse установлен на true, то полная анимация займёт 10 секунд.

<DoubleAnimation Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Height" SpeedRatio="2" Duration="0:0:5" AutoReverse="True" />

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

· Время, определённое в секундах. Временная шкала подождет это время и затем начнёт анимацию снова.

· Установка RepeatBehavior на Forever («Постоянно») для постоянного повторения.

· Определенное число повторений, установленное путем указанием числа, за которым следует x. Например, если анимация должна произойти трижды, указывается значение 3х.

Анимация значения с помощью DoubleAnimation:

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

При анимации двойного значения, значение в начале анимации указывается с помощью значения From и затем изменяется либо на значение To, являющееся абсолютной точкой назначения, либо на значение By, являющееся относительной точкой назначения. Например, если свойство Canvas.Left элемента перемещается от 100 (рядом с левой стороной экрана) к 500, можно установить From на 100 и To на 500, либо By на 400. Если установить оба, свойство To будет иметь больший приоритет, а свойство By игнорируется. Также, если прямоугольник уже размещён в желаемой позиции From, указывать свойство From не нужно.

Анимация цвета с помощью ColorAnimation:

ColorAnimation работает как DoubleAnimation. Оно используется для определения того, как значение цвета элемента будет меняться...