Introdução ao Silverlight

Neste artigo vou falar um pouco sobre a Tecnologia Silverlight, apesar de não ser uma novidade muita gente ainda não conhece e não sabe como preparar o ambiente para iniciar no desenvolvimento de projetos em Silverlight.

Silverlight é uma tecnologia Microsoft que oferece uma nova experiência para aplicativos ricos e interativos na internet.

Alguns recursos do Silverlight chamaram bastante a atenção na internet nos últimos meses, mas um está sendo muito utilizado e chama-se Deep Zoom, com esse recurso você pode dar um zoom infinito na foto visualizando detalhes incríveis, veja por exemplo o site http://memorabilia.hardrock.com/, procure por um carta na area dos Beatles que possue no lado esquerdo varias fotos, se for dando zoom você poderá ver os detalhes de cada foto com uma ótima resolução. Esse tipo de site você acaba perdendo alguns minutos navegando, outro exemplo fantastico é o do Parque Yosemite: http://www.xrez.com/yose_proj/Yose_result.html.

Um site bastante interessante é o http://playboy.covertocover.com/ , um site da playboy que tem um acervo de revistas que pode ser visualizados com o recurso deep zoom do silverlight, o site tem outros recursos ,experimente usar a busca no site por alguma palavra, além de fazer a pesquisa o site destaca em hightlight, muito legal né.

Agora vamos ao que interessa, ou seja, como eu começo a desenvolver sites em Silverlight?

Para iniciar no mundo do desenvolvimento de sites com Silverlight, você vai precisar fazer alguns downloads e é recomendado que o seu windows esteja com as atualizações em dia.

Abaixo segue um lista com os downloads:

Visual Studio 2008 http://msdn.microsoft.com/pt-br/evalcenter/bb655861.aspx

Visual Studio 2008 SP1 http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en

MS Silverlight 2 Tools http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

Os Downloads acima são suficientes para o restante do artigo, porém recomendo instalar também o Microsoft Expression Blend para ajudar no design dos seus projetos em Silverlight, o Deep Zoom para utilizar os efeitos de zoom e o MS Silverlight Toolkit, um conjunto de componentes importantes para agilizar no desenvolvimento.

MS Expression Blend 2 http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

Microsoft Expression Blend™ 2 Service Pack 1 http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en

Deep Zoom Composer http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en

Microsoft Silverlight Toolkit http://www.codeplex.com/Silverlight

Após algumas horas de downloads você já poderá iniciar no desenvolvimento em Silverlight, o link da documentação on line é este Documentação on line.

Com o ambiente preparado vamos criar um "Hello World" em Silverlight, abra o visual Studio 2008 e clique em “Create Project” em seguida na opção “Visual C#>Silverlight” e depois “Silverlight Application” , dê o nome da sua aplicação de “HelloWorldApp”.

Agora vamos deixar selecionado o “Add a new Asp.net web Project to the solution to host Silverlight” e clique em ok , conforme a foto abaixo:

No centro da tela o arquivo Page.xaml está carregado, esse arquivo é a página inicial da sua aplicação que é definido automaticamente no code behind do arquivo App.xaml .O Arquivo Page.xaml tem o seguinte código inicialmente

Vamos alterar o código inserindo um botão, para isso abra a aba Toolbox do Visual Studio, segure e araste um objeto Button para dentro da tag Grid, conforme a figura:

Agova vamos editar algumas propriedades do objeto button como tamanho e posição na tela inserindo o VerticalAlignment, Height e Margin, vamos inserir um nome para o botão de btnOk usando a propriedade x:Name e por ultimo apresentando um texto dentro do botão usando a propriedade Content, o resultado será conforme a figura:

Agora vamos adicionar um evento ao nosso botão para que ele apresente o texto “HELLO WORLD” dentro dele, para isso basta inserir a propriedade Click que automaticamente vai aparecer um link para você criar o evento:

Pronto o evento btnOk_Click foi criado, para codificar o que o evento vai fazer clique com o botão direito no nome do evento e selecione “Navigate to Event Handler”

Dentro do método responsável pelo evento vamos inserir o código que vai modificar a propriedade Content e apresentar o texto “HELLO WORLD” quando o botão for clicado:

btnOk.Content = “HELLO WORLD”;

Pronto, chegou a hora de salvar e executar o nosso projeto, clique no botão ok, se tudo estiver certo o resultado será: