Instalando os programas utilizados nos Tutoriais

Muitas pessoas estão tendo problemas em fazer os tutoriais devido as versões dos programas utilizados.

O principal problema vem sendo com o Expression Blend, e consiste simplesmente da utilização da versão anterior do Expression Blend. Nesses tutoriais eu estou utilizando o Expression Blend 2 que possui integração com o Visual Studio 2008, que ainda está em versão preview e pode ser baixado no link:

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

Contudo, vale lembrar que antes de instalar o Expression Blend 2, você deve ter instalado o Microsoft .Net Framework 3.5 que pode ser baixado no link:

http://www.microsoft.com/downloads/details.aspx?familyid=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en

O Visual Studio 2008 Professional  pode ser baixado no link:

 http://msdn2.microsoft.com/pt-br/vs2008/products/default(en-us).aspx

E o Silverlight 1.1 Tools Alpha for Visual Studio 2008:

http://www.microsoft.com/downloads/details.aspx?familyid=25144c27-6514-4ad4-8bcb-e2e051416e03&displaylang=en

Eu recomendo instalar na seguinte ordem:

1- Microsoft .Net Framework 3.5

2- Visual Studio 2008 Professional

3- Silverlight 1.1 Tools Alpha for Visual Studio 2008

4- Expression Blend 2

Esse “mapa” mostra onde e como o Silverlight interage com outras tecnologias.
Vale a pena dar uma olhada!

Clique na imagem para empliar

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

Tutorial 2

Animações no Silverlight com o Expression Blend

Download completo do projeto

1- Abra o Microsoft Expression Blend e vá no menu File -> New Project, irá aparecer uma janela onde você poderá escolher vários tipos de projetos. Escolha a opção Silverlight Application (JavaScript) e dê o nome test_animation.

Figura: Criando novo projeto no Expression Blend

2- Selecione a ferramenta Rectangle no Toolbox e contrua um retângulo de 125 x 125. 

3- Ir na aba Properties e alterar o preenchimento do retângulo criado para Gradient de vermelho para amarelo e retirar o fio de contorno.

4- Mudar o nome para rectangleAnimation clicando com o botão direito do mouse sobre o objeto [Rectangle] no painel Objects and Timeline e escolhendo a opção Rename

Figura: Construindo o retângulo

5- Criar um novo Storyboard clicando sobre o botão “>” no painel Objects and Timeline, depois em “+” e dar o nome de animationBox e selecionar a opção Create as a Resource

Figura: Criando Storyboard

6- Irá aparecer um contorno vermelho e a informação “Timeline recording is on“. Com a linha amarela da timeline na posição 0 clique no botão Record Keyframe. Mova a linha amarela até a posição 2 e clique novamente no botão Record Keyframe. E finalmente mova a linha amarela até a posição 1 e clique novamente no botão Record Keyframe.

Figura: Criando keyframes

7- Agora com a linha amarela na posição 1 selecione o keyframe criado da posição 1 e mova o retângulo para baixo e no centro. Em seguida mova a linha amarela até a posição 2, selecione o keyframe da posição 2 e mova o retângulo até o lado superior direito.

Figura: Realizando a animação

8- Clique sobre o círculo vermelho no canto superior esquerdo do Canvas e desabilite a gravação de animação.

9- Agora vamos inserir um objeto que servirá como botão para disparar a animação. Selecione a ferramenta Ellipse no Toolbox (fica junto com o Rectangle) e crie uma circunferência com fundo verde e dê o nome de buttonStart.

Figura: Criando o buttonStart

10- Mudar para a opção XAML no painel Canvas e acrescentar os eventos MouseLeftButtonDown:

<Ellipse x:Name=”buttonStart” MouseLeftButtonDown=”ButtonMouseClick” …

Figura: Código XAML com o evento MouseLeftButtonDown

11- Na aba Project abrir o Page.xaml.js e acrescentar a função abaixo. O Page.xaml.js será aberto no bloco de notas.

function ButtonMouseClick(sender, eventArgs)
  { 
  sender.findName(“animationBox”).begin();
}

Figura: Editando o Page.xaml.js

9- Salvar o arquivo Page.xaml.js

10- Executar com F5 (menu Project -> Test Project).

Clique no círculo verde e veja que a animação é realizada.

Figura: Testando o exemplo construído

Tutorial 1

Criando seu primeiro projeto Silverlight com o Microsoft Expression Blend

Download do código do tutorial

O que é o Microsoft Expression Blend?

O Microsoft Expression Blend é uma ferramenta de designer especialmente desenvolvida para trabalhar com o Silverlight e construir interfaces. Desde modo o Blend é uma ferramenta muito útil para simplificar e aumentar a produtividade no desenvolvimento de projetos Silverlight, além de servir de apoio no aprendizado do XAML.

Figura: Tela do Microsoft Expression Blend

Criando um projeto Silverlight com o Blend

Abra o Microsoft Expression Blend e vá no menu File -> New Project, irá aparecer uma janela onde você poderá escolher vários tipos de projetos. Note que existem diversos tipos de projetos Silverlight:

- Silverlight Application (JavaScript): onde a linguagem de programação utilizada é o JavaScript

- Silverlight Application (.Net): onde a linguagem de programação é baseada no .Net Framework, sendo possível escolher o C# ou VB

- Silverlight Application (.Net “Orcas”): o mesmo que o Silverlight Application (.Net) só que para ser utilizado com o Visual Studio 2008

Figura: Escolhendo o tipo de projeto no Blend

Vamos começar escolhendo o Silverlight Application (JavaScript) e dando o nome de test_blend_silverlight. Veja então que irá aparecer tela do Blend com um projeto vazio.

Na janela do Blend pordemos identificar 4 áreas principais:

- Artboard ou Design View: onde fica o canvas (área em branco utilizada para desenhar objetos). Veja que existem 2 abas do lado superior direito do canvas onde é possível alternar entre visualizar os objetos como gráficos (Design) ou como XAML.

- Toolbox: onde ficam as ferramentas para criar e manipular objetos no canvas.

- Project, Property e Resources: na aba Project você visualizar a estrutura e os arquivos do seu projeto; na aba Property você visualizar e alterar as propriedades dos objetos; na aba Resources são listados todos os recursos utilizados no projeto.

- Intearction: no painel Triggers você pode definir eventos ou mudanças de propriedades que irão disparar determinada ação; no painel Objects and Timeline você pode visualizar a estrutura hierárquica dos objetos, selecionar objetos, criar e modificar templates de objetos e criar e modificar Timelines.

Figura: Áreas principais do Blend

Desenhando com o Blend

Vamos criar um botão onde a cor do texto dentro dele é alterada nos eventos MouseEnter e MouseLeave

1- Selecionar a ferramenta Rectangle no Toolbox e contruir um retângulo de 80 x 35 e arredondar cantos clicando no retângulo e depois no círculo que está do lado direito superior do retângulo selecionado.

2- Ir na aba Properties e alterar o preenchimento para Gradient de verde para azul 

3- Mudar o nome para rectangleButton clicando com o botão direito do mouse sobre o objeto [Rectangle] no painel Objects and Timeline e escolhendo a opção Rename

Figura: Construindo o retângulo
4- Selecionar a ferramenta TextBlock no Toolbox e acrescentar um texto “Button” com fonte bold, cor branca e tamanho 18pt e renomear o objeto para textButton

Figura: Inserindo o texto

5- No painel Objects and Timeline selecionar o rectangleButton e o textButton e clicar com botão direito e selecionar o opção Group into -> Canvas

6- Renomear o grupo [Canvas] criado para playButton

Figura: Agrupando

7- Mudar para a opção XAML no painel Canvas e acrescentar os eventos MouseEnter e MouseLeave:

<Canvas x:Name=”playButton” MouseEnter=”ButtonMouseEnter” MouseLeave=”ButtonMouseLeave” … >

Figura: Código XAML com os eventos MouseEnter e MouseLeave

8- Na aba Project abrir o Page.xaml.js e acrescentar as funções abaixo. O Page.xaml.js será aberto no bloco de notas.

function ButtonMouseEnter(sender, eventArgs)
  { 
  if(sender.name == “playButton”)
  {
  var playTextButton = sender.findName(“textButton”);
  playTextButton.Foreground=”#FF000000″;
  }
  }

function ButtonMouseLeave(sender, eventArgs)
  { 
  if(sender.name == “playButton”)
  {
  var playTextButton = sender.findName(“textButton”);
  playTextButton.Foreground=”#FFFFFFFF”;
  }
  }

Figura: Editando o Page.xaml.js

9- Salvar o arquivo Page.xaml.js

10- Executar com F5 (menu Project -> Test Project).

Veja que quando passamos o mouse sobre o botão a cor do texto é alterada. E quando o mouse sai de cima do botão a cor do texto volta ao que era anteriormente.

Figura: Testando o exemplo construído

O que é o Microsoft Silverlight? 

O Silverlight é um plug-in cross-browser e cross-platform para disponibilizar a próxima geração de conteúdo interativo e multimídia para aplicações web baseadas no Microsoft.NET. Ou seja, o Silverlight é a grosso modo igual o Flash da Adobe.O Silverlight utiliza diversos tecnologias como o JavaScript, XML, .NET Framework e XAML (eXtensible Application Markup Language), sendo possível utilizá-lo com diversas ferramentas como o Microsoft Expression Blend e o Microsof t Visual Studio e também é possível programá-lo com diversas linguagens como JavaScript, C# ou VB .NET.Com o Silverlight é possível disponibilizar rapidamente e com custos-competitivos áudio e vídeo de alta qualidade para os browser Internet Explorer, Safari e Firefox tanto para Windows como para Mac. Outras aplicações para o Silverlight é a criação de jogos simples, gadgets e a apresentação na web de informações em geral com uma interface aperfeiçoada.

O Silverlight é parte de um novo conceito de interação com o usuário que a Microsoft  denomina User eXperience (UX) e que vai além do uma interface bonita.

Figura: Microsoft UX continuum  

Também vale lembrar, que o Silverlight não é uma tecnologia isolada, ele é uma das partes finais de um conjunto de tecnologias inter-relacionadas.

Figura: Microsoft end-to-end UX  

Características do Silverlight 

As principais características do Silverlight são: - Plug-in com tamanho reduzido (aproximadamente 1 Mb) facilmente integrado com os principais navegadores (IE 6, IE 7, Firefox, Safari) - Apresentação em tempo de execução da renderização de XAML permitindo animações com gráficos 2D, textos e mídias - Apresentação de áudio e vídeo interativo para o conteúdo Windows Media (WMV e WMA) e MP3. O áudio e vídeo são chamados como um media element do XAML o que fornece grande flexibilidade na apresentação. 

- Camada de programação consistente com a arquitetura web pois o Silverlight XAML é exposto utilizando o modelo DOM. O Silverlight também possui um CLR (Common Language Runtime) o que nos permite programá-lo com o .NET, sendo então possível utilizar C# ou VB para programá-lo.

Figura: Características do Silverlight 

O conteúdo com Silverlight pode ser disponibilizado de diversas maneiras: - Dentro do próprio arquivo através inline XAML e JavaScript- Através de arquivos XAML e JavaScript externos- Através de um pacote compactado contendo o XAML, códigos, imagens, fontes e mídias.

Figura: Pacote Silverlight