Storyboarding In C++/Cx

If you are a Silverlight or WPF developer, then you are already well-aware of the concept of a Storyboard. It is an element that allows you to perform UI animations and transitions without having to worry about the "plumbing" part of the process, where you actually have to code the animation and the object movement. Now, with Windows 8 coming up, you are able to create XAML apps that are based on C++/Cx, and despite the fact that you are still applying the same idea, some parts of the storyboarding fun are different.

Let's say you have this scenario:

• You want to use a Storyboard
• You want to use DoubleAnimationUsingKeyFrames
• You need LinearDoubleKeyFrame

XAML for this wouldn't look too bad. But what about code-behind? In some cases, you need to create and modify an animation dynamically. Creating the Storyboard itself is not really complicated:

Storyboard^ yourStoryboard = ref new Storyboard();
yourStoryboard ->Duration = DurationHelper::Forever; 

Here I am simply creating a new Storyboard instance and setting a fixed duration. Obviously, you could set a custom value for that property, but about that a little bit later. For now, you have the fundamental block for the dynamic animation.

Now you need a DoubleAnimationUsingKeyFrames instance, that will handle the details of the keyframe-based actions.

DoubleAnimationUsingKeyFrames^ doubleAnimation = ref new DoubleAnimationUsingKeyFrames();
TimeSpan span = TimeSpan();
span.Duration = 0;
doubleAnimation->BeginTime = span;

Here, the begin time is set to whenever the Storyboard is activated - point zero, so 0:0:0 in XAML values. Next step - adding LinearDoubleKeyFrame. But before that, you need to make sure that the DoubleAnumationUsingKeyFrames knows what to animate. For this sample, I have a TextBlock control, with a TranslateTransform.

However, since it is set through RenderTransform, and is the only transform used, I can reference it through (RenderTransform).X, where X shows that I am translating the control on the X axis.

Storyboard::SetTarget(doubleAnimation,yourTextBlock);
Storyboard::SetTargetProperty(doubleAnimation,"(RenderTransform).X");

Obviously, you can adjust this to a variety of transforms that you are using in your case. Let's get to key frames, though, and we are starting with LinearDoubleKeyFrame.

LinearDoubleKeyFrame^ kf = ref new LinearDoubleKeyFrame();
kf->Value = 20;
TimeSpan span = TimeSpan();
span.Duration = 5000000;
kf->KeyTime = KeyTime(span);
doubleAnimation->KeyFrames->Append(kf);

When this key frame will bcome active, it will move my TextBlock to the right of the X-axis, given the positive value I set for the Value property. That is the target that will be achieved when the animation will be completed. The confusing part comes when I am trying to set the KeyTime - when exactly the key frame will be activated. You see a huge value here that I am setting through a TimeSpan: 5000000.

This is not an error. As a matter of fact, this shows how the WinRT TimeSpan is different from what you used before. And this is specific to C++/Cx and JavaScript, used for Windows 8 apps. There is only one field that you can modify - Duration. And unlike the values you used to set for a stock .NET TimeSpan, this one relies on 100-nanosecond units.

5000000 is effectively 5000000 * 100 nanoseconds. That gives us 0.5 seconds. You will have to do a little bit of basic algebra here, especially with large animation chunks done in the code-behind. 

When I set everything up for the LinearDoubleKeyFrame instance, I am appending it to my core DoubleAnimationUsingKeyFrames instance. The same applies to any other key frame type. Last but not least, don't forget to append the code key frame container to the Storyboard instance:

yourStoryboard->Children->Append(doubleAnimation);

Whenever you want to trigger the animation, simply use yourStoryboard->Begin();