Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador:- Microsoft Visual Studio 2008
- Microsoft Silverlight Tools
- 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

---

Refêrencia: http://euclideschuma.wordpress.com/2007/10/16/tutorial-3-primeiro-exemplo-de-projeto-silverlight-no-visual-studio-2008/