DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Storyboarding In C++/Cx

Storyboarding In C++/Cx

Denzel D. user avatar by
Denzel D.
·
Sep. 16, 12 · Interview
Like (0)
Save
Tweet
Share
5.94K Views

Join the DZone community and get the full member experience.

Join For Free

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();

Frame (networking) app Property (programming) Concept (generic programming) Blocks Container dev JavaScript .NET

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • An Introduction to Data Mesh
  • Understanding gRPC Concepts, Use Cases, and Best Practices
  • Stream Processing vs. Batch Processing: What to Know
  • Kotlin Is More Fun Than Java And This Is a Big Deal

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: