Publicado por: euchuma | 18 setembro 2007

Tutorial 1 – Criando seu primeiro projeto Silverlight com o Microsoft Expression Blend

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.

silver2_1.jpg
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

silver2_2.jpg
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.

silver2_3.jpg
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

silver2_4.jpg
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

silver2_5.jpg
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

silver2_6.jpg
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” … >

silver2_7.jpg
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”;
  }
  }

silver2_8.jpg
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.

silver2_9.jpg
Figura: Testando o exemplo construído


Responses

  1. Olá Euclides, td bem? sou programador .Net e estou mto interessado no silverlight, no entanto ainda estou adquirindo experiencias nesta area, neste momento eu preciso fazer uma apresentação sobre o silverlight e gostaria de saber se vc tem algum material interessante que possa acrescentar algo em minha apresentação.

    desde já antecipo meus agradecimentos

    Guilherme Peralta Romeiro

  2. Olá Guilherme,
    Hoje mesmo inseri um “mapa” de como o Silverlight interage com outras tecnologias. Dá uma olhada, pois acho que ele é ótimo para utilizar numa apresentação.

    Outros sites bons:
    http://silverlight.net/
    http://www.ddjsilverlight.com/tutorial/
    http://blogs.msdn.com/tims/archive/2007/07/07/from-a-to-z-50-silverlight-applications.aspx

    Abraço

  3. Opa.

    Tenho um dúvida. O meu Microsoft Expression Blend não tem esse monte de opção de projeto não. Ele possui apenas dois

    Será que é por que eu baixei assim que ele saiu? Eu já baixei o update dele, e mesmo assim não adiantou.

    Você poderia me ajudar Euclides?

    De qualquer forma já agradeço.

  4. Olá Marcos,

    Para ter a opção de todos os projetos você deve instalar o Visual Studio 2008 (http://msdn2.microsoft.com/en-us/vstudio/products/aa700831.aspx) e o pacote Silverlight Tools for Visual Studio 2008 (http://www.microsoft.com/downloads/details.aspx?FamilyId=25144C27-6514-4AD4-8BCB-E2E051416E03&displaylang=en).

    Abraço

  5. Ola, ja baixei o VStudio 2008 pro trial e o Silverlight Tools for Visual Studio 2008 e mesmo assim nao aparecem as opções silverlight aplication java… tem alguma configuração que devo realizar o expression blend

  6. Olá,
    Tente desinstalar o Blend e instalar a última versão dele.
    Abraço

  7. ola euclides, Eu baixei recentemente o blend no sit da MS baixei VS e o Silverlight Tools for Visual Studio 2008 , mesmo assim quando abro o blende aparecem apenas duas opções.
    Sabe o que posso fazer para aparecer as outras opções?


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: