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