Tutorial 5 – Construindo um vídeo player no Silverlight com o Visual Studio 2008

Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador o

- Microsoft Visual Studio 2008
- Microsoft Silverlight Tools Alpha for Visual Studio 2008
- E claro o plug-in Silvelight 1.1 Alpha

2- Abra o Visual Studio 2008  vá no menu File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome “testvideosilverlight” para o projeto.

Figura: Criando um projeto Silverlight no Visual Studio 2008

3- Copie o arquivo de vídeo para a pasta do projeto que criamos, geralmente é “Meus documentos\Visual Studio 2008\Projects\testvideosilverlight\testvideosilverlight“. Clique com o botão direito do mouse sobre o item “testvideosilverlight” selecione “Add -> Existing item…” e selecione o arquivo de vídeo que você acabou de copiar para a pasta do seu projeto.

Figura: Adicionando o arquivo de vídeo ao projeto

4- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:

 <Canvas x:Name=”playButton” Width=”80″ Height=”35″ Canvas.Left=”192″ Canvas.Top=”277″>
  <Rectangle x:Name=”rectangleButton” Width=”80″ Height=”35″ Stroke=”#FF000000″ RadiusX=”7.5″ RadiusY=”7.5″>
   <Rectangle.Fill>
    <LinearGradientBrush EndPoint=”1.15,1.543″ StartPoint=”0.017,-0.343″>
     <GradientStop Color=”#FF28FF00″ Offset=”0″/>
     <GradientStop Color=”#FF0000FF” Offset=”1″/>
    </LinearGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name=”textButton” Width=”72″ Height=”24″ Canvas.Left=”8″ Canvas.Top=”8″ FontFamily=”Arial” FontSize=”18″ FontWeight=”Bold” Foreground=”#FFFFFFFF” TextWrapping=”Wrap” RenderTransformOrigin=”0.5,0.5″ Text=”Play”>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
     <SkewTransform AngleX=”0″ AngleY=”0″/>
     <RotateTransform Angle=”0″/>
     <TranslateTransform X=”0″ Y=”0″/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
 </Canvas>
 <Canvas x:Name=”stopButton” Width=”80″ Height=”35″ Canvas.Left=”336″ Canvas.Top=”277″>
  <Rectangle x:Name=”rectangleButtonStop” Width=”80″ Height=”35″ Stroke=”#FF000000″ RadiusX=”7.5″ RadiusY=”7.5″>
   <Rectangle.Fill>
    <LinearGradientBrush EndPoint=”1.15,1.543″ StartPoint=”0.017,-0.343″>
     <GradientStop Color=”#FF28FF00″ Offset=”0″/>
     <GradientStop Color=”#FF0000FF” Offset=”1″/>
    </LinearGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name=”textButtonStop” Width=”72″ Height=”24″ Canvas.Left=”8″ Canvas.Top=”8″ FontFamily=”Arial” FontSize=”18″ FontWeight=”Bold” Foreground=”#FFFFFFFF” TextWrapping=”Wrap” RenderTransformOrigin=”0.5,0.5″ Text=”Stop”>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
     <SkewTransform AngleX=”0″ AngleY=”0″/>
     <RotateTransform Angle=”0″/>
     <TranslateTransform X=”0″ Y=”0″/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
 </Canvas>
 
 <MediaElement x:Name=”video_test” AutoPlay=”False” Width=”333.333″ Height=”250″ Canvas.Left=”144″ Canvas.Top=”16″ Source=”Lake.wmv” Stretch=”Fill”/>

5- Abra o Page.xaml.vb e insira o código após o End Sub:

  Private Sub playButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles playButton.MouseEnter
        ‘ Set Play text to Black when mouse enter in playButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Black
        Dim tb As TextBlock = Me.playButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub playButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles playButton.MouseLeave
        ‘ Set Play text to White when mouse leave the playButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.White
        Dim tb As TextBlock = Me.playButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub playButton_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles playButton.MouseLeftButtonDown

        ‘ Get object of TextBlock in playButton
        Dim tb As TextBlock = Me.playButton.Children(1)

        ‘ If text in playButton is “Play” then play video and set text to Pause
        If tb.Text = “Play” Then
            video_test.Play()
            tb.Text = “Pause”
            ‘ Else text in playButton is “Pause” then pause video and set text to Play
        Else
            video_test.Pause()
            tb.Text = “Play”
        End If

    End Sub

    Private Sub stopButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles stopButton.MouseEnter
        ‘ Set Stop text to Black when mouse enter in stopButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Black
        Dim tb As TextBlock = Me.stopButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub stopButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles stopButton.MouseLeave
        ‘ Set Stop text to White when mouse leave the stopButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.White
        Dim tb As TextBlock = Me.stopButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub stopButton_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles stopButton.MouseLeftButtonDown
        ‘ Stop video when stopButton was clicked
        video_test.Stop()
    End Sub   

6- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5) e veja o resultado 

Figura: Testando o projeto

Tutorial 3 – Contruindo um vídeo player no Silverlight com o Expression Blend

Download completo do exemplo

1- Abra o Microsoft Expression Blend e crie um novo projeto com a opção Silverlight Application (JavaScript) e dê o nome testVideoPlayer

2- Selecione a ferramenta Rectangle no Toolbox e contrua um retângulo de 125px de largura por 35px de altura e arredonde os cantos. Selecione a ferramenta TextBlock e insira um texto “Play”. Selecione o retângulo e o texto e agrupe-os clicando com o botão direito do mouse e selecionando a opção Group into -> Canvas. Renomeie o grupo criado para btPlay.

Figura: Botão btPlay

3- Repita o passo 2 e crie um botão agrupado com o nome btStop e outro botão agrupado com o nome btPause

Figura: Botões btPlay, btStop e btPause

4- Copiar o filme “wmv para a pasta do projeto que criamos (geralmente localizada em Meus Documentos -> Expression -> Expression Blend Projects).  Ir na aba Project e selecionar testVideoPlayer, clicar com botão direito e selecionar Add Existing Item e selecionar o video copiado na pasta do projeto.

Figura: Adicionando o vídeo ao projeto

5- Clique 2 vezes sobre o vídeo adicionado na aba Project para adicionar o vídeo no Canvas. Renomeie o vídeo para testVideo. Redimensione e posicione o vídeo de acordo com sua preferência.

Figura: Vídeo adicionado ao projeto

6- Mudar para a opção XAML no painel Canvas e acrescentar o atributo AutoPlay=”False” para o vídeo:

<MediaElement x:Name=”testVideo” AutoPlay=”False” …

7- Ainda no XAML adicionar o evento MouseLeftButtonDown=”ButtonMouseClick” nos três botões:

<Canvas x:Name=”btPlay” MouseLeftButtonDown=”ButtonMouseClick” …
<Canvas x:Name=”btStop” MouseLeftButtonDown=”ButtonMouseClick” …
<Canvas x:Name=”btPause” MouseLeftButtonDown=”ButtonMouseClick” …

8- Na aba Project clique 2 vezes sobre o arquivo Page.xaml.js (ele será aberto no Bloco de Notas) e acrescente o código no final do código já existente:

function ButtonMouseClick(sender, eventArgs)
{
 if(sender.name==”btPlay”)
 {
  sender.findName(“testVideo”).play();

 } else if(sender.name==”btStop”)
  {
   sender.findName(“testVideo”).stop();

  } else if(sender.name==”btPause”)
   {
    sender.findName(“testVideo”).pause();

   }
}

9- Salve o arquivo Page.xaml.js aberto no Bloco de Notas e feche-o.

10 – No Expression Blend dê um Save All.

11- Teste o projeto com F5 e clique no botão Play para iniciar o vídeo. Clique também sobre os botões Stop e Pause e veja o resultado.

Figura: Projeto sendo executado