Nesta postagem irei mostrar duas coisas interessantes em WPF: como é fácil fazer uma animação e como podemos dar um efeito interessante, mais realista a ela, de maneira muito simples.

Uma animação em WPF é criada usando-se um Storyboard. Nele colocamos os efeitos de animação que queremos dar a um elemento do desenho. Um efeito de animação pode ser gerado, por exemplo, com o DoubleAnimation. O DoubleAnimation, como o nome já diz, anima uma propriedede do objeto que tem tipo Double, como por exemplo a posição (Canvas.Left ou Canvas.Top).

O seguinte código faz que uma elipse fique ziguezagueando na janela quando ela é carregada:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse Width="100" Height="100" Fill="Red">
    <Ellipse.Triggers>
      <EventTrigger RoutedEvent="Ellipse.Loaded">
        <BeginStoryboard>
          <Storyboard >
            <DoubleAnimation From="300" To="0" RepeatBehavior="Forever"
               AutoReverse="True" Duration="0:0:0.5"
               Storyboard.TargetProperty="(Canvas.Top)" />
            <DoubleAnimation From="0" To="600" RepeatBehavior="Forever"
               Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3"
               AutoReverse="True"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Ellipse.Triggers>
  </Ellipse>
</Canvas>

Esta linha anima a posição vertical (Canvas.Top), da posição 300 até a posição 0, com duração de 5 segundos. Esta animação é repetida indefinidamente e, ao final, o movimento é revertido

<DoubleAnimation From="300" To="0" RepeatBehavior="Forever" AutoReverse="True"  
  Duration="0:0:0.5" Storyboard.TargetProperty="(Canvas.Top)" />

A outra linha anima a posição horizontal, com duração de 3 segundos. A composição das duas animações faz com que a elipse fique fazendo um ziguezague até que a aplicação seja fechada. Mas isso não é tudo. Podemos ainda dar o efeito da gravidade à elipse, fazendo que ela simule uma bola pulando. Para isso usamos o DecelerationRatio. Esta propriedade varia entre 0 e 1 e irá dizer o percentual da animação que será desacelerada. Por exemplo, se o valor dela for 0.33, então o último terço do movimento será desacelerado. Para simularmos o efeito da gravidade, aplicamos o DecelerationRatio na animação da posição vertical:

<DoubleAnimation From="300" To="0" RepeatBehavior="Forever" AutoReverse="True"  
 Duration="0:0:0.5" Storyboard.TargetProperty="(Canvas.Top)" DecelerationRatio="1"/>

Com esta alteração simples, nossa animação que era um simples ziguezague, passa a simular uma bola pulando, com o efeito da gravidade.

Se você ainda não está convencido do que é possível fazer com o WPF, sugiro que teste a seguinte linha no XamlPad (ou então crie um arquivo no bloco de notas e salve-o com extensão XAML):

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

Você acabou de criar um tablet. No XamlPad, você pode desenhar usando o mouse ou, se tiver um tablet, usando a caneta. Você pode ainda incrementar um pouco seu desenho mudando as cores de desenho, com

<InkCanvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <InkCanvas.DefaultDrawingAttributes>
    <DrawingAttributes Color="Red" />
  </InkCanvas.DefaultDrawingAttributes>
</InkCanvas>

Se quiser, pode ainda suavizar as curvas desenhadas, transformando-as em splines com o atributo FitToCurve:

<InkCanvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <InkCanvas.DefaultDrawingAttributes>
    <DrawingAttributes Color="Red" FitToCurve="True"/>
  </InkCanvas.DefaultDrawingAttributes>
</InkCanvas>

Fácil, não? Mas isso não é tudo. Se você salvar este código em um arquivo com extensão XAML e abri-lo no Internet Explorer, você terá transformado seu browser num tablet.

Para mostrar um pouco do poder do data binding (ligação de dados – para ver mais, dê uma olhada aqui) no WPF, vamos criar uma lista de fontes do sistema.

Esta lista mostra todos os fontes instalados e mostra um exemplo do texto quando selecionamos um dos fontes da lista.

No XamlPad (se você não tiver instalado o Windows SDK, pode usar outro editor XAML, como o XamlCruncher ou o KaXaml), digite o seguinte código:

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>
        <ListBox HorizontalAlignment="Stretch"
           Margin="0,0,5,0" x:Name="ListBox"
           VerticalAlignment="Stretch" 
           ItemsSource="{Binding Source={x:Static
           Fonts.SystemFontFamilies}}" 
           IsSynchronizedWithCurrentItem="True"/>
        <GridSplitter HorizontalAlignment="Right"
           VerticalAlignment="Stretch" Width="5"/>
        <TextBox HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch"
          FontFamily="{Binding Path=SelectedItem,
          ElementName=ListBox, Mode=Default}"
          FontSize="48" Grid.Column="1"
          Text="The quick brown fox jumps over the lazy dog"
          TextWrapping="Wrap"/>
    </Grid>
</Window>

Pronto. Ao teclar F5 (ou F7, no XamlCruncher) você tem uma nova janela que mostra todos os fontes do sistema.

image

O segredo está nos seguintes códigos:

ItemsSource="{Binding Source={x:Static Fonts.SystemFontFamilies}}" 

FontFamily="{Binding Path=SelectedItem, ElementName=ListBox, Mode=Default}"

O primeiro liga os itens da ListBox à coleção SystemFontFamilies da classe Fonts da CLR e a segunda liga o nome do fonte da caixa de texto ao item selecionado da ListBox.

Fácil, não? Isto é só um pequeno exemplo do que pode ser feito…

Até agora, programas WPF só podiam rodar no Windows como aplicações desktop, ou no IE6/IE7, como XBAPs (para dar uma olhada como isso funciona, abram o link http://scorbs.com/workapps/woodgrove/FinanceApplication.xbap no IE – o .net Framework 3.0 deve estar instalado), sem necessidade de alterar o código fonte.

Já com Silverlight é uma outra história: ele roda em IE/FireFox/Safari para Windows ou Mac, mas é mais limitado que um programa WPF e só roda no browser.

Mas, sem muito alarde, foi anunciado que os programas WPF deverão rodar em FireFox, com o .net Framework 3.5. Veja aqui: http://blogs.zdnet.com/Stewart/?p=320. Quando isso acontecer, teremos mais uma plataforma para rodar os programas WPF, expandindo ainda mais as possibilidades de uso.

O WPF (Windows Presentation Foundation) foi introduzido com o .net Framework 3.0 e tem muitos recursos para o desenvolvimento de aplicações ricas:

  • Independente de resolução
  • Mesmo código para Windows e Web
  • Layouts dinâmicos
  • Estilos
  • Modelos (Templates) – possibilidade de skins
  • Data binding
  • Gráficos vetoriais
  • Visual rico
  • Animações
  • 3D
  • Internacionalização, Reconhecimento de voz, Ink…

Se você ainda não conhece o WPF, aqui vai uma introdução de como você pode se aprofundar um pouco mais:

  • Baixe o .net Framework 3.0 (se você está usando Vista, não precisa, pois ele já vem instalado)
  • Instale o Visual Studio 2005 Express ou o Visual Studio 2008 (“Orcas”)
  • Se você instalou o VS2005, instale as extensões para o Visual Studio 
  • Opcionalmente, instale o Windows SDK. Não é obrigatório, mas ele tem muitos exemplos e ferramentas para ajudar no desenvolvimento
  • Baixe o Expression Blend. A versão 1 é paga, você pode baixar um trial e a versão 2 está em beta e pode ser baixada aqui

Uma vez que você baixou e instalou os programas necessários, é hora de conhecer o WPF. Uma boa sugestão é a coleção de artigos que eu e meu filho Roberto criamos para o MSDN:

Vale a pena conhecer esta nova tecnologia que, sem dúvida, irá revolucionar a maneira que fazemos programas.