Criando Storyboard no Silverlight pelo C#

Nesse artigo vamos explorar construir animações simples através do C#.

por Lucas Defacio

Introdução

Como já foi provado, Silverlight é uma poderosa ferramenta de aplicações ricas. Com ele, você pode construir uma interface com forte interatividade. Outra característica do Silverlight é a aproximação entre os desenvolvedores e designers por trabalhar no mesmo ambiente (na maioria das vezes). Porém, uma grande dificuldade dos desenvolvedores é justamente criar um ambiente mais rico para a aplicação. Alguns detalhes podem diferenciar sua aplicação, mas como criar estes detalhes sem o Expression Blend? É o que vamos explorar neste artigo: construir animações simples através do C#.

Layout

Para este artigo, iremos utilizar um layout e uma animação simples. O conceito para fazer algo mais complexo é o mesmo, apenas irá demandar mais tempo.

Vamos adicionar ao nosso projeto dois objetos: um do tipo Rectangle e outro do tipo Button. Para ordená-los na tela, usaremos um StackPanel com a propriedade Orientation com o valor Vertical. Para nosso objeto Button criaremos o evento Click. O Quadro 1 ilustra nosso layout.

<Grid x:Name="LayoutRoot" Background="White">

        <StackPanel Orientation="Vertical" Margin="50">

            <Rectangle x:Name="recAnimacao" Width="100" Height="100" Fill="Green" Margin="20" />

            <Button x:Name="btnAnimacao" Click="btnAnimacao_Click" Width="100" Height="25" Content="Animação" Margin="20" />

        </StackPanel>

    </Grid>

Quadro 1: layout para nossa aplicação.

Criando a Storyboard (animação) pelo C#

Com o layout pronto, vamos criar um método que irá receber os dados da nossa animação. Os parâmetros que deverão ser recebidos são:

        public void Animacao(FrameworkElement Objeto, double dbFrom, double dbTo, double dbTime)

        {

            Storyboard sb = new Storyboard();

            DoubleAnimation da = new DoubleAnimation();

            //Definindo o status inicial e o final

            da.From = dbFrom;

            da.To = dbTo;

            //Definindo o tempo

            da.Duration = new Duration(TimeSpan.FromMilliseconds(dbTime));

            //Definindo o objeto animado e o tipo de animação

            Storyboard.SetTarget(da, Objeto);

            Storyboard.SetTargetProperty(da, new PropertyPath(Canvas.OpacityProperty));

            //Adicionando o Double Animation e iniciando a animação

            sb.Children.Add(da);

            sb.Begin();

        }

Quadro 2: método que irá construir nossa Storyboard.

Através do método Page() gerado automaticamente, chamaremos nossa função Animacao(), passando como parâmetros o botão criado em nosso layout, o valor 0 para a propriedade From, o valor 1 para a propriedade To, e o tempo de 1500 milisegundos. Em nosso método chamado pelo evento Click de nosso Button, chamaremos novamente a função Animacao() e passando como parâmetros o nosso retângulo, o valor 1, o valor 0 e o tempo 1500. O Quadro 3 representa este trecho do código.

        public Page()

        {

            InitializeComponent();

            Animacao(btnAnimacao, 0, 1, 1500);

        }

        private void btnAnimacao_Click(object sender, RoutedEventArgs e)

        {

            Animacao(recAnimacao, 1, 0, 1500);

        }

Quadro 3: chamadas para nosso método Animacao().

Conclusão

Em alguns cenários onde precisamos de animações simples, podemos deixar de lado todo o código gerado pelo Expression Blend e construí-las de forma simples através de nosso código C#. Desta forma, os desenvolvedores poderão criar animações em um ambiente que já estão acostumado (VisualStudio), e de uma forma que possam utilizar esta mesma animação em diferentes cenários e objetos.