Спонсор: Microsoft
Опубликован: 19.07.2010 | Доступ: свободный | Студентов: 1449 / 67 | Оценка: 4.07 / 3.43 | Длительность: 20:59:00
Самостоятельная работа 8:

Разработка приложений на Silverlight

< Лекция 15 || Самостоятельная работа 8: 123 || Лекция 16 >

В теле страницы содержится объект, код которого находится в файле, указанном в элементе:

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

В данном случае - это SilverlightApplicationStart.xap. Для просмотра ресурса достаточно указать в веб-браузере адрес:

http://localhost/SilverlightApplicationStart.Web/SilverlightApplicationStartTestPage.html

Возможно также использование SilverlightApplicationStartTestPage.aspx файла вместо SilverlightApplicationStartTestPage.html. Однако для этого потребуется предварительная регистрация нового веб-сайта как приложения (через панель управления IIS).

3)Добавление анимации. Если между элементами <Grid> </Grid> добавить код, содержащий описание анимации ( Storyboard ) с помощью последовательности трансформаций вращения ( RotateTransform ):

<Grid.RenderTransform>

    <TransformGroup>
      <RotateTransform x:Name="WelcomeRotateTransform"
                       Angle="0" />
    </TransformGroup>
  </Grid.RenderTransform>

  <Grid.Triggers>
    <EventTrigger RoutedEvent="Grid.Loaded">

      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">

          <DoubleAnimation Storyboard.TargetName="WelcomeRotateTransform"
                           Storyboard.TargetProperty="Angle"
                           From="0"
                           To="360"
                           Duration="0:0:2" />

        </Storyboard>
      </BeginStoryboard>

    </EventTrigger>

  </Grid.Triggers>

то получится интересный эффект циклического вращения предыдущей сцены вокруг левого верхнего угла на 360 градусов вперед-назад.

 Пример Silverlight приложения, использующего анимацию

Рис. 23.6 . Пример Silverlight приложения, использующего анимацию

Задание 2. Разработка Silverlight -медиаплейера Microsoft Visual Web Developer 2008 Express.

1) Простое воспроизведение видео с помощью элемента управления MediaElement.

Создайте новый Silverlight Application проект с именем SLMediaPlayer.

Добавьте описание элемента MediaElement на страницу MainPage.xaml, указав в качестве значения URL его атрибута Source видеофайл, который хотите воспроизвести. Сам видеофайл можно скопировать в \SLMediaPlayer.Web\ClientBin, например, из стандартной коллекции в директории C:\Users\Public\Videos\Sample Videos\.

Рассмотрим пример XAML -кода:

<UserControl x:Class="SLMediaPlayer.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:DesignWidth="640" d:DesignHeight="480"> 

<Grid x:Name="LayoutRoot" Background="White"> 
<MediaElement Source="Wildlife.wmv" /> 
</Grid> 

</UserControl>

Данный код обеспечит автоматическую загрузку и воспроизведение видеоролика.

Размер области воспроизведения мультимедиа определяется следующими правилами:

  • Если заданы свойства Height и Width элемента управления MediaElement, MediaElement использует их.
  • Если задано одно из этих свойств, элемент управления MediaElement растягивает изображение, сохраняя пропорции.
  • Если не заданы ни Height, ни Width, элемент управления MediaElement растягивает изображение до размеров родительского контейнера, сохраняя пропорции.
  • Если заданы оба свойства и они превышают размер области просмотра элемента управления Silverlight, MediaElement обрезает видео соответственно размеру области просмотра.

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

 Пример простейшего Silverlight приложения, воспроизводящего видеоролик

Рис. 23.7. Пример простейшего Silverlight приложения, воспроизводящего видеоролик

2) Расположение содержимого поверх видеоизображения.

В Silverlight можно размещать текст и графические элементы поверх видеоизображения. Ниже представлен пример XAML код для MediaElement, который перекрывается Canvas с прямоугольником и текстовым блоком:

<UserControl x:Class="SLMediaPlayer.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:DesignWidth="640" d:DesignHeight="480">
  
  
    <Grid x:Name="LayoutRoot" Background="White">

        <Canvas Margin="50,50,0,0">
            <MediaElement Source="Wildlife.wmv" Height="200" Width="200" Stretch="Fill" />
            <Rectangle Fill="Black" Height="40" Width="160" />
            <TextBlock Foreground="White">Просмотр видео</TextBlock>
        </Canvas>         
    </Grid>

</UserControl>

Результат приведен на рисунке ниже.

 Пример пример наложения графики на видеоролик в окне браузера

Рис. 23.8. Пример пример наложения графики на видеоролик в окне браузера

3) Управление воспроизведением звука.

Ниже приводится XAML описание элемента MediaElement, определяющее, что звук не выключен, общая громкость составляет 50% и что баланс звука смещен вправо:

<MediaElement Source="Wildlife.wmv" Height="200" Width="200" 
Stretch="Fill" IsMuted="False" Volume="0.5" Balance="0.8"/>

4)Программирование MediaElement

MediaElement позволяет управлять воспроизведением методами Play, Stop (Остановить) и Pause (Приостановить). Кроме того, имеется возможность взаимодействовать с видео, отслеживая процесс буферизации и загрузки, а также реагировать на маркеры, размещенные в видеофайле. Можно также обрабатывать события, например нажатие кнопок мыши.

Основными методами управления видео являются Play, Stop и Pause. Если свойству AutoPlay элемента управления MediaElement задано значение false, для начала воспроизведения видео необходимо применить Play. Даже если AutoPlay задано значение true, и воспроизведение начинается автоматически, с помощью этих методов его можно остановить или приостановить.

Следующий код XAML, в котором имеется элемент мультимедиа и три простых элемента управления воспроизведением, реализованных как элементы TextBlock:

<UserControl x:Class="SLMediaPlayer.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:DesignWidth="640" d:DesignHeight="480">
  
    <Grid x:Name="LayoutRoot" Background="White">

      <MediaElement x:Name="vid" Source="Wildlife.wmv" />
      <Canvas Canvas.Top="160">
        <Rectangle Fill="Black" Width="200" Height="24" Opacity="0.7"/>
        <TextBlock MouseLeftButtonDown="doPlay" Foreground="White" 
        Canvas.Left="20">Play</TextBlock>
        <TextBlock MouseLeftButtonDown="doStop" Foreground="White" 
        Canvas.Left="80">Stop</TextBlock>
        <TextBlock MouseLeftButtonDown="doPause" Foreground="White" 
        Canvas.Left="140">Pause</TextBlock>
      </Canvas>

    </Grid>

</UserControl>

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

Код обработчика событий, связанных с элементами TextBlock необходимо разместить в файле MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SLMediaPlayer
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void doPlay(object sender, MouseButtonEventArgs e)
        {
            vid.Play();
        }

        private void doPause(object sender, MouseButtonEventArgs e)
        {
            vid.Pause();
        }

        private void doStop(object sender, MouseButtonEventArgs e)
        {
            vid.Stop();
        }

    }
}

Вид приложения в браузер предсавлен на рисунке.

 Добавление графических элементов с обработкой событий, связанных с мышью

Рис. 23.9. Добавление графических элементов с обработкой событий, связанных с мышью

5)Управление положением курсора воспроизведения.

Для управления текущим положением курсора воспроизведения используются свойства NaturalDuration (Номинальная продолжительность) и Position (Положение) элемента мультимедиа. После того, как свойство CurrentState элемента мультимедиа устанавливается в значение Opened, становится возможным получение значения и свойства NaturalDuration. Продолжительность видео в секундах можно получить с помощью NaturalDuration.Seconds и потом преобразовать это значение в часы, минуты и секунды.

В следующем примере событие CurrentStateChanged элемента управления MediaElement ассоциировано с функцией doState, которая перехватывает значение свойства NaturalDuration.

Изменим XAML описание медиаплейера:

<Canvas x:Name="sample9" Opacity="1">
            <MediaElement x:Name="vid" Source="Wildlife.wmv" CurrentStateChanged="doState"/>
            <TextBlock MouseLeftButtonDown="doPlay" Foreground="White" 
            Canvas.Left="20">Play</TextBlock>
            <TextBlock MouseLeftButtonDown="doStop" Foreground="White" 
            Canvas.Left="80">Stop</TextBlock>
            <TextBlock MouseLeftButtonDown="doPause" Foreground="White" 
                Canvas.Left="140">Pause</TextBlock>
            <TextBlock x:Name="txtStat" Canvas.Left="200" Canvas.Top="0"></TextBlock>
            <TextBlock x:Name="txtBuff" Canvas.Left="200" Canvas.Top="30"></TextBlock>
      </Canvas>

и соответствующий ему C# код:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SLMediaPlayer
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void doPlay(object sender, MouseButtonEventArgs e)
        {
            vid.Play();
        }

        private void doPause(object sender, MouseButtonEventArgs e)
        {
            vid.Pause();
            txtStat.Text = vid.Position.ToString();
        }

        private void doStop(object sender, MouseButtonEventArgs e)
        {
            vid.Stop();
        }

        private void doState(object sender, RoutedEventArgs e) 
        {
  
            txtBuff.Text = vid.NaturalDuration.ToString();

        }

    }
}

Скриншот работающего приложения, отображающего фактически значения свойств NaturalDuration и Position, можно увидеть на рисунке.

 Отображение значений свойст  NaturalDuration и Position при воспроизведении видеоролика

Рис. 23.10. Отображение значений свойст NaturalDuration и Position при воспроизведении видеоролика
< Лекция 15 || Самостоятельная работа 8: 123 || Лекция 16 >
Наталья Алмаева
Наталья Алмаева
Россия
Андрей Лучицкий
Андрей Лучицкий
Россия