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