Figura 1.0 – Projeto em Silverlight 2.0 |
Figura 2.0 – Opções de projeto em Silverlight 2.0 |
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 |
<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 |
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/expression/products/Overview.aspx?key=blend