Desenvolvendo Site em Silverlight 2.0 e C#(csharp)

Neste artigo, você irá aprender o princípio básico para iniciar uma aplicação em Silverlight utilizando as ferramentas de desenvolvimento Visual Studio.Net 2008 e Microsoft Expression Blend 2.5.

Neste artigo, você irá aprender o princípio básico para iniciar uma aplicação em Silverlight 2.0 utilizando as ferramentas de desenvolvimento Visual Studio.Net 2008 e Microsoft Expression Blend 2.5.
O Silverlight é um plugin cross-browser, cross-plataform e cross-device capaz de gerar animações e aplicações interativas altamente sofisticadas. Essas aplicações podem ser programadas em XAML, Javascript e Framework.Net, o que possibilita o uso com linguagens Visual Basic, Asp.Net, C# e entre outras.
           O Microsoft Blend é uma ferramenta profissional de design para a criação de interfaces baseadas em XAML. Esta pode ser usada para aplicações em Silverlight e WPF. Esta ferramenta faz integração com o Visual Studio, ou seja, tudo que for feito pelo designer no Blend é totalmente compatível com a ferramenta Visual Studio.
 
Introdução ao desenvolvimento
            Para começar a desenvolver suas aplicações em Silverlight é necessário ter instalado na sua máquina as seguintes ferramentas:
 
1.      Visual Studio Team System 2008
2.      Visual Studio 2008 - Service Pack 1;
3.      Silverlight 2.0;
4.      Microsoft Expression Blend 2.5.
 
Estas ferramentas podem ser encontradas no site da Microsoft [1], e devem ser instaladas conforme enumeradas acima.
Com todos os requisitos instalados, abra o Visual Studio 2008, File->New->Project será apresentada à caixa de diálogo, e então, em tipos de projeto escolha Silverlight, note também na parte superior direita se o .Net Framework 3.5 está presente, escolha Silverlight Application, conforme a Figura 1.0.
 

Figura 1.0 – Projeto em Silverlight 2.0

 
Ao pressionar ‘Ok’, uma segunda tela é apresentada, então selecione as opções conforme mostrada na Figura 2.0, e pressione ‘Ok’ novamente.
 
 

 

Figura 2.0 – Opções de projeto em Silverlight 2.0

 
Vá ao Solution Explorer, e note  que a solução possui uma aplicação Web e um projeto em Silverlight. A Figura 3.0 mostra como deve estar a sua aplicação até o presente momento.

Figura 3.0 – Solução do Projeto em Silverlight

A aplicação Web irá armazenar o projeto Silverlight. Note que o Visual Studio gerou uma pagina de teste para o projeto Silverlight. Então, com o nome similar a “PrimeiraAplicaçãoTestPage.aspx”, clique sobre ela, e escolha Design. Repare que a página contém dois controles, ScriptManager e Silverlight, Veja a Figura 4.0.

Figura 4.0 - Controles ScriptManager e Silverlight

Agora vá a sua página default.Aspx, e adicione os dois controles, e no controle Silverlight adicione a propriedade “MinimumVersion=2.0”. Seu código dever estar similar Tabela 01.
 

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

 

<asp:Silverlight ID="Xaml" MinimumVersion="2.0"

               runat="server"   Height="100%" Width="100%">

        </asp:Silverlight>

    </div>

    </form>

</body>

Tabela 01 – Configuração do componente Silverlight

 

Observe que a versão do silverlight deve ser especificada, pois caso algum usuário acesse a página com o conteúdo silverlight, e este  não tenha o plugin  instalado, será apresentado um ícone para que ele faça o download do plugin correto.

Agora, vá ao projeto Silverlight, selecione a página Page.Xaml. Note o código em XAML a tag <UserControl>, ela contém todas as diretivas necessárias para a execução da sua aplicação. Já a tag <Grid> (Controle de layout), esta pode ser trocada, por um outro tipo de controle, como por exemplo, a tag <Canvas>.  

Agora, adicione um Botão e um TextBlock, conforme Tabela 02.

 

<UserControl x:Class="PrimeiraAplicacao.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

<Button x:Name="btnOk" Height="30" Width="80" Content="Ok" Margin="10,10,10,10"></Button>

<TextBlock x:Name="txtConteudo" Text="" Height="30" Width="300" Margin="100,10,10,100"></TextBlock>

    </Grid>

</UserControl>

Tabela 02 – Código em Xaml

 

 
 

Com o botão criado, agora adicione o evento “Click”, conforme Tabela 03.

<Button x:Name="btnOk" Height="30" Width="80" Content="Ok"
Margin="10,10,10,10" Click="btnOk_Click"></Button>

Tabela 03 – Adicionando evento

 
Clique com o botão direito do mouse sobre o “evento Click” e vá a Navigate to Event Handler, adicione o seguinte código em C#, Tabela 04.
 

private void btnOk_Click(object sender, RoutedEventArgs e)

        {

txtConteudo.Text = "Minha primeira aplicaçao em Silverlight 2.0";

        }

Tabela 04 – Código em C#

 

Agora vá a Default.Aspx e com o botão direito “Set as Start Page” e pressione F5. Não irá aparecer nada, pois não associamos o projeto Silverlight na aplicação WEB. Então, selecione o controle Silverlight, pressione F4 e procure a propriedade Source. Irá aparecer uma caixa de diálogo, escolha a pasta CLIENTBIN e selecione o arquivo com extensão .Xap. Conforme Figura 5.0.

Figura 5.0 - Configuração do controle Silverlight

Agora, pressione F5 e veja o resultado.

Abraços,

Flávia Moreira

Referências

 

 

[1] -http:// www.microsoft.com/downloads/details.aspx?FamilyId=D95598D7-AA6E-4F24-82E3-81570C5384CB&displaylang=en

[1] - http://www.microsoft.com/expression/products/Overview.aspx?key=blend

[1] - http://www.microsoft.com/downloads/details.aspx?FamilyId=50A9EC01-267B-4521-B7D7-C0DBA8866434&displaylang=en

[1] - http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en

Artigos relacionados