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
