Iniciando com WPF - Animação simples passo a passo

Hoje vou mostrar uma pequena animação feita em WPF, mostrando desde a criação do projeto, tirando assim pequenas duvidas de quem está iniciando nessa tecnologia .NET.
no nosso exemplo usarei o Expression blend 4.
logo que abrimos o programa temos uma tela inicial com os últimos projetos abertos, um help e uns exemplos de aplicações, vamos em New Project.












agora será mostrado as opções de projetos, temos WPF que é uma aplicação desktop, Silverlight que é uma aplicação rica para web, e no meu caso tenho também instalado o template para Windows Phone que é a nova plataforma móvel da microsoft, vamos escolher WPF application.
Aqui também podemos definir qual será a linguagem usada no code-behind da aplicação que pode ser C# ou VB.NET, no nosso caso não usaremos nem uma linha de código, mas vou deixar selecionado C#.

pronto nosso projeto está criado, temos uma janela em branco para trabalharmos, do lado esquerdo temos uma paleta com os componentes existentes e opções para manipulação dos objetos, uma paleta com varias abas com o conteúdo do projeto, as triggers dos objetos ( que vamos ver já já ), os controles disponíveis e as states e parts deles, em baixo temos os objetos e a timeLine.

do lado direito temos as propriedades, os eventos, nosso resource e data do projeto.

primeiro vamos dar uma corzinha no fundo da janela, afinal estamos mexendo com WPF..rsrs...selecione na paleta de objetos o LayoutRoot, nas propriedades dele temos o backgroud, vai estar selecionado a opção solid color brush, que é a segunda opção, vamos colocar na terceira que é Gradient brush, vamos ter um degradê com duas cores, preto e brando, podemos adicionar quantas cores quisermos e mesclar de diversas maneiras, no meu caso só mudei o preto para azul, você pode ficar a vontade e pintar do seu gosto.

agora vamos colocar um botão, que vai acionar nossa animação, e um textbox que vai ser o objeto animado, vá a paleta da esquerda e arraste esses dois componentes para a tela, deve ficar mais ou menos assim:

agora só para explorarmos um pouquinho mais os recursos, vamos colocar uma sombra no textbox, selecione ele e nas propriedades do lado direito vai encontrar uma opção EFECT, clique no botão New ao lado dessa opção e na janela que abrir seleciona o DropShadowEffect, depois de selecionar essa opção, você tera uma série de propriedades referentes ao efeito que podem ser customizadas conforme seu gosto, vou deixar padrão mesmo mas pode fuçar a vontade... =D

agora vou partir para a animação, mas se você quiser ( e deve ) pode dar mais uma fuçada nas opções.

na paleta Objects and TimeLine clique no botão com um sinal de + e será mostrado uma janela para dar o nome da animação, darei o nome de Animacao mesmo.

vai aparecer uma linha de tempo onde podemos mudar os estados dos objetos conforme o tempo da animação

vamos selecionar o textbox que será nosso objeto animado, no tempo 0 de um clique no botão 

cada vez que clicamos nesse botão e grava o estado do objeto na linha de tempo, então o que estamos fazendo é gravar no tempo zero o estado inicial do textbox, depois arrastamos a timeLine para o tempo 1 que é um segundo da animação, movimente o textbox na tela para onde vc quiser e clique no botão para salvar o estado de novo, no tempo 2 movimente de novo o textbox e clique no botão, quando achar necessário basta fechar a storeboard e a animação está pronta, veja conforme você vai gravando o estado do objeto, a timeLine vai sendo preenchida na linha do objeto selecionado.

no exemplo fiz uma animação de 2 segundos usando apenas o textbox, vc pode usar todos os objetos que quiser, colocar até mais, e mexer nas propriedades que quiser, aconselho que faça isso mesmo para ir entendendo o funcionamento.

se você rodar a aplicação assim, já vai funcionar, porem no carregamento da janela já será executado a animação e queremos que ela seja executada no click do botão, para isso iremos mexer nas triggers que vimos no começo do post.

va na paleta do lado esquerdo na parte superior, e seleciona a aba trigger, você verá que tem um evento criado lá, que é o Window.Loaded e nesse evento a nossa animação está sendo iniciada:

vamos mudar isso para o click do botão, selecione o evento e na parte de baixo dele poderemos alterar, onde esta "When" mude de Window, para button, (se não aparecer o button, selecione o botão na janela que ele aparece nas opções), agora do lado do button, temos os eventos dele, selecione o click e logo abaixo está o nome da Animação e a opção Begin, deixe assim mesmo.

resumindo, quando o botão for clicado a Animação sera iniciada, é isso que queremos.

agora é só compilar a aplicação, clicar no botão e ver o resultado... =D

solte a imaginação e crie aplicações ricas para seus usuários.

espero que tenham gostado, e até a próxima !!! ( não esqueçam da clicadinha no anuncio...rsrs)