Tutorial 4 – Primeiro exemplo de projeto Silverlight no Visual Studio 2008
1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador:- Microsoft Visual Studio 2008 beta 2
- Microsoft Silverlight Tools Alpha for Visual Studio 2008 beta 2
- E claro o plug-in Silvelight 1.1 Alpha
2- Abra o Visual Studio 2008 beta 2 vá no menu
File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome testsilverlight para o projeto.
Figura: Criando um projeto Silverlight no Visual Studio 2008
3- Quando um novo projeto Silverlight é criado no Visual Studio 2008 ele cria automaticamente os seguintes arquivos:
3.a- Arquivo HTML: O Visual Studio dá o nome TestPage.html, esse arquivo serve como ponto de partida para o browser carregar o projeto Silvelight e também pode conter outros conteúdo junto com o Silverlight. Veja que ele faz referencia aos arquivos TestPage.html.js e Silverlight.js.
3.b- Arquivo TestPage.html.js: Esse arquivo javascript contém o método createSilverlight que é um modelo para chamar os métodos createObject ou createObjectEx definidos no Silverlight.js
3.c- Arquivo Silverlight.js: Esse arquivo javascript define os métodos createObject e createObjectEx que servem para inicializar o controle Silverlight além de fornecer recursos de instalação do Silvelight para o usuário caso ele não possua o Silverlight instalado.
3.d- Arquivo Page.xaml: Esse arquivo XAML é definido como o parametro “source” nos métodos createSilverlight ou createSilverlightEx e contém o contéudo da interface do projeto Silverlight.
3.e- Arquivo Page.xaml.vb: Esse arquivo VB ou C# serve para gerenciar em tempo de execução os eventos do projeto Silverlight. O código utiliza a mesma classe que foi definida no atributo x:Class do Page.xaml.
Figura: Arquivos do projeto Silverlight
4- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:
<Canvas x:Name=”Button1″ Canvas.Top=”50″ Width=”100″ Height=”30″ Background=”Gray”>
<TextBlock>
<Run Text=”Enter mouse”></Run>
</TextBlock>
</Canvas>
Esse código XAML nada mais é do que um Texto criado com o TextBlock e agrupado sozinho através do Canvas com o nome Button1.
Figura: Código XAML
5- Abra o Page.xaml.vb e insira o código após o End Sub:
Private Sub Button1_MouseEnter(ByVal sender As Object, _
ByVal e As System.Windows.Input.MouseEventArgs) Handles Button1.MouseEnter
Dim buttonBrush As New SolidColorBrush
buttonBrush.Color = Colors.Red
Me.Button1.Background = buttonBrush
Dim tb As TextBlock = Me.Button1.Children(0)
tb.Text = “Mouse…”
End Sub
Private Sub Button1_MouseLeave(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.MouseLeave
Dim buttonBrush As New SolidColorBrush
buttonBrush.Color = Colors.Gray
Me.Button1.Background = buttonBrush
Dim tb As TextBlock = Me.Button1.Children(0)
tb.Text = “Enter mouse”
End Sub
Esse código representa as ações para os eventos MouseEnter e MouseLeave do Button1 declarado no XAML. Quando o cursor do mouse entra na área do texto o texto é alterado para “Mouse…” e a cor do fundo é alterada. E quando o cursor do mouse sai da área do texto o texto volta para “Enter Mouse” e a cor de fundo volta ao que era.
Figura: Código VB
6- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5), passe o mouse sobre o texto e veja o resultado
Figura: Testando o projeto
