Publicado por: euchuma | 24 janeiro 2008

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

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

tut5_31.gif

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.

tut5_1.gif
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.

tut5_2.gif
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 

tut5_31.gif
Figura: Testando o projeto


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: