Fullsix Blog

[PT]

Na semana passada estive a desenvolver uma aplicação em Silverlight para um cliente, e com algumas modificações que foram solicitadas, foi necessário desenvolver uma animação totalmente dinâmica… portanto o Blend deixou de servir para o efeito e tudo passou a ser feito por código C#.

Ok, então comecei por tentar mapear a mesma estrutura de código na parte de animação em XAML mas em C#. As linhas de código que seguem, serviram para fazer uma pequena animação de fade in e fade out a um usercontrol, instanciado no momento de execução e adicionado ao layoutroot. Uma vez que esta animação seria usada várias vezes.

// Dymanic Storyboard with the animation
var currentStb = new Storyboard();

//EasyDoubleKeyFrames
var stbkey = new EasingDoubleKeyFrame();
stbkey.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
stbkey.Value = 0;
var stbkey2 = new EasingDoubleKeyFrame();
stbkey2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3));
stbkey2.Value = 1;
var stbkey3 = new EasingDoubleKeyFrame();
stbkey3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6));
stbkey3.Value = 0;

//DoubleAnimationKeyFrame declaration
var myDoubleAnim = new DoubleAnimationUsingKeyFrames();
myDoubleAnim.KeyFrames.Add(stbkey);
myDoubleAnim.KeyFrames.Add(stbkey2);
myDoubleAnim.KeyFrames.Add(stbkey3);

//wich property is targeted: opacity
Storyboard.SetTargetProperty(myDoubleAnim, new PropertyPath("(UIElement.Opacity)"));

//adding into the layout resources
this.Resources.Add("uniqueId"+_countName.ToString(),currentStb);

//adding into the current layoutRoot
currentStb.Children.Add(myDoubleAnim);
currentStb.SetValue(Storyboard.TargetNameProperty, newTextBox.Name);

//adding some logical stuff then the stb begins

currentStb.Begin();

Recapitulando, não é assim tão complicado como estava à espera, ou pelo menos no primeiro contacto, mas não é obvio, o truque reside em “copiar” a mesma estrutura que o Blend gera em XAML, mas desta em código. Portanto inicialmente define-se os keyframes que contêm os tempos de animação e o values para as propriedades que pretendemos afectar ao controlo animado. Seguidamente, definimos os “alvos” para os DoubleAnimationKeyFrame que compõe a metada da animação em questão, e por fim, o nosso storyboard recebe esta informação e define qual é o tipo de objecto “afectado”, neste caso, um UIElement, e que tipo de animação será feita. Daí a afectação da propriedade Opacity.

É importante reter o seguinte, após criar um storyboard por esta maneira, é necessário dar-lhe um nome único e adicioná-lo aos resources do nosso layoutRoot. É só desta forma que tudo funcionará correctamente, e uma vez que a nossa animação fica a pertencer aos recursos locais do controlo, podemos usar a mesma várias vezes na aplicação

Espero que vos seja útil, e deixou uma leitura muito recomendável sobre este assunto.

http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx 

Merci.

[EN]

Last week I was developing a Silverlight application for a customer, and after a few modifications it was necessary to make an dynamic animation … so no storyboards with Blend… get in the code and do everything with C#.

Okay… so I started by mapping the same XAML animation structure, into the code. The next few lines show us a simple fade in and fade out animation effect with a new usercontrol (a simple textbox) created at the moment and placed on LayoutRoot. This animation is used several times, during the application.

// Dymanic Storyboard with the animation
var currentStb = new Storyboard();

//EasyDoubleKeyFrames
var stbkey = new EasingDoubleKeyFrame();
stbkey.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
stbkey.Value = 0;
var stbkey2 = new EasingDoubleKeyFrame();
stbkey2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3));
stbkey2.Value = 1;
var stbkey3 = new EasingDoubleKeyFrame();
stbkey3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6));
stbkey3.Value = 0;

//DoubleAnimationKeyFrame declaration
var myDoubleAnim = new DoubleAnimationUsingKeyFrames();
myDoubleAnim.KeyFrames.Add(stbkey);
myDoubleAnim.KeyFrames.Add(stbkey2);
myDoubleAnim.KeyFrames.Add(stbkey3);

//wich property is targeted: opacity
Storyboard.SetTargetProperty(myDoubleAnim, new PropertyPath("(UIElement.Opacity)"));

//adding into the layout resources
this.Resources.Add("uniqueId"+_countName.ToString(),currentStb);

//adding into the current layoutRoot
currentStb.Children.Add(myDoubleAnim);
currentStb.SetValue(Storyboard.TargetNameProperty, newTextBox.Name);

//adding some logical stuff then the stb begins

currentStb.Begin();

To recap, it’s not so complicated, first we create the storyboard, then the keyframes that contains the times and the values for the animation sequence, then we define the target properties, such as the DoubleAnimation, the Opacity property target and the storyboard to apply on the current usercontrol or the UIElement.

Just regard that after you create an Storyboard this has to belong into the current layout resource in order to work, with a unique Id. So that can be re-used in your application.

A recommended lecture:

http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx 

Thanks.