Estou fazendo um curso em formato de vídeo-aulas sobre Silverlight 2 para o grupo DevMedia.

Para saberem mais sobre o curso, visitem o site da DevMedia:
http://www.devmedia.com.br/space.asp?id=169426

A Microsoft lançou no final de 2008 o Silverlight 2 que possue muitas novidades e melhorias em relação a versão anterior.

Podemos destacar:
- Suporte as linguagens VB.Net, C#, IronPython, IronRuby, etc
- Novos controles como o Grid
- Cross Domain Network
- View State Manager
- Maior compatibilidade com o WPF
- Suporte ao linq
- Tecnologia Deep Zoom
- Isolated Storage
- Data Binding e ADO.net
- Upload de arquivos
- Melhorias no suporte as mídias
- Melhoria no uso do teclado

E para quem quiser saber mais, visite o site:
http://silverlight.net/GetStarted/overview.aspx

Para quem ainda tem dúvidas se o Silverlight “vai pegar”, vejam a notícia dos celulares da Nokia que vão rodar o Silverlight:

http://idgnow.uol.com.br/telecom/2008/03/04/microsoft-fecha-acordo-com-nokia-para-levar-silverlight-a-celulares/

Instalando os programas utilizados nos Tutoriais

Muitas pessoas estão tendo problemas em fazer os tutoriais devido as versões dos programas utilizados.

O principal problema vem sendo com o Expression Blend, e consiste simplesmente da utilização da versão anterior do Expression Blend. Nesses tutoriais eu estou utilizando o Expression Blend 2 que possui integração com o Visual Studio 2008, que ainda está em versão preview e pode ser baixado no link:

http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

Contudo, vale lembrar que antes de instalar o Expression Blend 2, você deve ter instalado o Microsoft .Net Framework 3.5 que pode ser baixado no link:

http://www.microsoft.com/downloads/details.aspx?familyid=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en

O Visual Studio 2008 Professional  pode ser baixado no link:

 http://msdn2.microsoft.com/pt-br/vs2008/products/default(en-us).aspx

E o Silverlight 1.1 Tools Alpha for Visual Studio 2008:

http://www.microsoft.com/downloads/details.aspx?familyid=25144c27-6514-4ad4-8bcb-e2e051416e03&displaylang=en

Eu recomendo instalar na seguinte ordem:

1- Microsoft .Net Framework 3.5

2- Visual Studio 2008 Professional

3- Silverlight 1.1 Tools Alpha for Visual Studio 2008

4- Expression Blend 2

Tutorial 6 – Utilizando o Inking Support do Silverlight com o Visual Studio 2008

Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador o

- Microsoft Visual Studio 2008
- Microsoft Silverlight Tools Alpha for Visual Studio 2008
- E claro o plug-in Silvelight 1.1 Alpha
2- Abra o Visual Studio 2008  vá no menu File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome “inksilverlight” para o projeto.

Figura: Criando um projeto Silverlight no Visual Studio 2008
3- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:

 <InkPresenter x:Name=”inkP” Background=”Gray” Width=”600″ Height=”400″></InkPresenter>
4- Abra o Page.xaml.vb e deixe o código como abaixo:

Partial Public Class Page
    Inherits Canvas

    Dim s As Stroke

    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
        ‘ Required to initialize variables
        InitializeComponent()

    End Sub

    Private Sub inkP_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkP.MouseLeftButtonDown
        ‘ Start capture mouse movevement and drawing
        inkP.CaptureMouse()
        ‘ Create stroke object
        s = New Stroke
        s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP))
        ‘ Set stroke color to red
        s.DrawingAttributes.Color = Colors.Red
        ‘ Set stroke width to 15
        s.DrawingAttributes.Width = 15
        inkP.Strokes.Add(s)
    End Sub

    Private Sub inkP_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkP.MouseLeftButtonUp
        ‘ Stop drawing
        s = Nothing
    End Sub
    Private Sub inkP_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles inkP.MouseMove
        ‘ Drawing in mouse move
        If s IsNot Nothing Then
            s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP))
        End If
    End Sub

End Class
5- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5) e veja o resultado 

Figura: Testando o projeto

Tutorial 5 – Construindo um vídeo player no Silverlight com o Visual Studio 2008

Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador o

- Microsoft Visual Studio 2008
- Microsoft Silverlight Tools Alpha for Visual Studio 2008
- E claro o plug-in Silvelight 1.1 Alpha

2- Abra o Visual Studio 2008  vá no menu File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome “testvideosilverlight” para o projeto.

Figura: Criando um projeto Silverlight no Visual Studio 2008

3- Copie o arquivo de vídeo para a pasta do projeto que criamos, geralmente é “Meus documentos\Visual Studio 2008\Projects\testvideosilverlight\testvideosilverlight“. Clique com o botão direito do mouse sobre o item “testvideosilverlight” selecione “Add -> Existing item…” e selecione o arquivo de vídeo que você acabou de copiar para a pasta do seu projeto.

Figura: Adicionando o arquivo de vídeo ao projeto

4- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:

 <Canvas x:Name=”playButton” Width=”80″ Height=”35″ Canvas.Left=”192″ Canvas.Top=”277″>
  <Rectangle x:Name=”rectangleButton” Width=”80″ Height=”35″ Stroke=”#FF000000″ RadiusX=”7.5″ RadiusY=”7.5″>
   <Rectangle.Fill>
    <LinearGradientBrush EndPoint=”1.15,1.543″ StartPoint=”0.017,-0.343″>
     <GradientStop Color=”#FF28FF00″ Offset=”0″/>
     <GradientStop Color=”#FF0000FF” Offset=”1″/>
    </LinearGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name=”textButton” Width=”72″ Height=”24″ Canvas.Left=”8″ Canvas.Top=”8″ FontFamily=”Arial” FontSize=”18″ FontWeight=”Bold” Foreground=”#FFFFFFFF” TextWrapping=”Wrap” RenderTransformOrigin=”0.5,0.5″ Text=”Play”>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
     <SkewTransform AngleX=”0″ AngleY=”0″/>
     <RotateTransform Angle=”0″/>
     <TranslateTransform X=”0″ Y=”0″/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
 </Canvas>
 <Canvas x:Name=”stopButton” Width=”80″ Height=”35″ Canvas.Left=”336″ Canvas.Top=”277″>
  <Rectangle x:Name=”rectangleButtonStop” Width=”80″ Height=”35″ Stroke=”#FF000000″ RadiusX=”7.5″ RadiusY=”7.5″>
   <Rectangle.Fill>
    <LinearGradientBrush EndPoint=”1.15,1.543″ StartPoint=”0.017,-0.343″>
     <GradientStop Color=”#FF28FF00″ Offset=”0″/>
     <GradientStop Color=”#FF0000FF” Offset=”1″/>
    </LinearGradientBrush>
   </Rectangle.Fill>
  </Rectangle>
  <TextBlock x:Name=”textButtonStop” Width=”72″ Height=”24″ Canvas.Left=”8″ Canvas.Top=”8″ FontFamily=”Arial” FontSize=”18″ FontWeight=”Bold” Foreground=”#FFFFFFFF” TextWrapping=”Wrap” RenderTransformOrigin=”0.5,0.5″ Text=”Stop”>
   <TextBlock.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX=”1″ ScaleY=”1″/>
     <SkewTransform AngleX=”0″ AngleY=”0″/>
     <RotateTransform Angle=”0″/>
     <TranslateTransform X=”0″ Y=”0″/>
    </TransformGroup>
   </TextBlock.RenderTransform>
  </TextBlock>
 </Canvas>
 
 <MediaElement x:Name=”video_test” AutoPlay=”False” Width=”333.333″ Height=”250″ Canvas.Left=”144″ Canvas.Top=”16″ Source=”Lake.wmv” Stretch=”Fill”/>

5- Abra o Page.xaml.vb e insira o código após o End Sub:

  Private Sub playButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles playButton.MouseEnter
        ‘ Set Play text to Black when mouse enter in playButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Black
        Dim tb As TextBlock = Me.playButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub playButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles playButton.MouseLeave
        ‘ Set Play text to White when mouse leave the playButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.White
        Dim tb As TextBlock = Me.playButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub playButton_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles playButton.MouseLeftButtonDown

        ‘ Get object of TextBlock in playButton
        Dim tb As TextBlock = Me.playButton.Children(1)

        ‘ If text in playButton is “Play” then play video and set text to Pause
        If tb.Text = “Play” Then
            video_test.Play()
            tb.Text = “Pause”
            ‘ Else text in playButton is “Pause” then pause video and set text to Play
        Else
            video_test.Pause()
            tb.Text = “Play”
        End If

    End Sub

    Private Sub stopButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles stopButton.MouseEnter
        ‘ Set Stop text to Black when mouse enter in stopButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Black
        Dim tb As TextBlock = Me.stopButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub stopButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles stopButton.MouseLeave
        ‘ Set Stop text to White when mouse leave the stopButton
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.White
        Dim tb As TextBlock = Me.stopButton.Children(1)
        tb.Foreground = buttonBrush
    End Sub

    Private Sub stopButton_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles stopButton.MouseLeftButtonDown
        ‘ Stop video when stopButton was clicked
        video_test.Stop()
    End Sub   

6- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5) e veja o resultado 

Figura: Testando o projeto

Esse “mapa” mostra onde e como o Silverlight interage com outras tecnologias.
Vale a pena dar uma olhada!

Clique na imagem para empliar

Tutorial 4 – Primeiro exemplo de projeto Silverlight no Visual Studio 2008

Download completo do exemplo

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

Tutorial 3 – Contruindo um vídeo player no Silverlight com o Expression Blend

Download completo do exemplo

1- Abra o Microsoft Expression Blend e crie um novo projeto com a opção Silverlight Application (JavaScript) e dê o nome testVideoPlayer

2- Selecione a ferramenta Rectangle no Toolbox e contrua um retângulo de 125px de largura por 35px de altura e arredonde os cantos. Selecione a ferramenta TextBlock e insira um texto “Play”. Selecione o retângulo e o texto e agrupe-os clicando com o botão direito do mouse e selecionando a opção Group into -> Canvas. Renomeie o grupo criado para btPlay.

Figura: Botão btPlay

3- Repita o passo 2 e crie um botão agrupado com o nome btStop e outro botão agrupado com o nome btPause

Figura: Botões btPlay, btStop e btPause

4- Copiar o filme “wmv para a pasta do projeto que criamos (geralmente localizada em Meus Documentos -> Expression -> Expression Blend Projects).  Ir na aba Project e selecionar testVideoPlayer, clicar com botão direito e selecionar Add Existing Item e selecionar o video copiado na pasta do projeto.

Figura: Adicionando o vídeo ao projeto

5- Clique 2 vezes sobre o vídeo adicionado na aba Project para adicionar o vídeo no Canvas. Renomeie o vídeo para testVideo. Redimensione e posicione o vídeo de acordo com sua preferência.

Figura: Vídeo adicionado ao projeto

6- Mudar para a opção XAML no painel Canvas e acrescentar o atributo AutoPlay=”False” para o vídeo:

<MediaElement x:Name=”testVideo” AutoPlay=”False” …

7- Ainda no XAML adicionar o evento MouseLeftButtonDown=”ButtonMouseClick” nos três botões:

<Canvas x:Name=”btPlay” MouseLeftButtonDown=”ButtonMouseClick” …
<Canvas x:Name=”btStop” MouseLeftButtonDown=”ButtonMouseClick” …
<Canvas x:Name=”btPause” MouseLeftButtonDown=”ButtonMouseClick” …

8- Na aba Project clique 2 vezes sobre o arquivo Page.xaml.js (ele será aberto no Bloco de Notas) e acrescente o código no final do código já existente:

function ButtonMouseClick(sender, eventArgs)
{
 if(sender.name==”btPlay”)
 {
  sender.findName(“testVideo”).play();

 } else if(sender.name==”btStop”)
  {
   sender.findName(“testVideo”).stop();

  } else if(sender.name==”btPause”)
   {
    sender.findName(“testVideo”).pause();

   }
}

9- Salve o arquivo Page.xaml.js aberto no Bloco de Notas e feche-o.

10 – No Expression Blend dê um Save All.

11- Teste o projeto com F5 e clique no botão Play para iniciar o vídeo. Clique também sobre os botões Stop e Pause e veja o resultado.

Figura: Projeto sendo executado

Tutorial 2

Animações no Silverlight com o Expression Blend

Download completo do projeto

1- Abra o Microsoft Expression Blend e vá no menu File -> New Project, irá aparecer uma janela onde você poderá escolher vários tipos de projetos. Escolha a opção Silverlight Application (JavaScript) e dê o nome test_animation.

Figura: Criando novo projeto no Expression Blend

2- Selecione a ferramenta Rectangle no Toolbox e contrua um retângulo de 125 x 125. 

3- Ir na aba Properties e alterar o preenchimento do retângulo criado para Gradient de vermelho para amarelo e retirar o fio de contorno.

4- Mudar o nome para rectangleAnimation clicando com o botão direito do mouse sobre o objeto [Rectangle] no painel Objects and Timeline e escolhendo a opção Rename

Figura: Construindo o retângulo

5- Criar um novo Storyboard clicando sobre o botão “>” no painel Objects and Timeline, depois em “+” e dar o nome de animationBox e selecionar a opção Create as a Resource

Figura: Criando Storyboard

6- Irá aparecer um contorno vermelho e a informação “Timeline recording is on“. Com a linha amarela da timeline na posição 0 clique no botão Record Keyframe. Mova a linha amarela até a posição 2 e clique novamente no botão Record Keyframe. E finalmente mova a linha amarela até a posição 1 e clique novamente no botão Record Keyframe.

Figura: Criando keyframes

7- Agora com a linha amarela na posição 1 selecione o keyframe criado da posição 1 e mova o retângulo para baixo e no centro. Em seguida mova a linha amarela até a posição 2, selecione o keyframe da posição 2 e mova o retângulo até o lado superior direito.

Figura: Realizando a animação

8- Clique sobre o círculo vermelho no canto superior esquerdo do Canvas e desabilite a gravação de animação.

9- Agora vamos inserir um objeto que servirá como botão para disparar a animação. Selecione a ferramenta Ellipse no Toolbox (fica junto com o Rectangle) e crie uma circunferência com fundo verde e dê o nome de buttonStart.

Figura: Criando o buttonStart

10- Mudar para a opção XAML no painel Canvas e acrescentar os eventos MouseLeftButtonDown:

<Ellipse x:Name=”buttonStart” MouseLeftButtonDown=”ButtonMouseClick” …

Figura: Código XAML com o evento MouseLeftButtonDown

11- Na aba Project abrir o Page.xaml.js e acrescentar a função abaixo. O Page.xaml.js será aberto no bloco de notas.

function ButtonMouseClick(sender, eventArgs)
  { 
  sender.findName(“animationBox”).begin();
}

Figura: Editando o Page.xaml.js

9- Salvar o arquivo Page.xaml.js

10- Executar com F5 (menu Project -> Test Project).

Clique no círculo verde e veja que a animação é realizada.

Figura: Testando o exemplo construído