We will discuss in detail how to rotate an image using C# code in Windows 10 universal app and see how to use Storyboard objects to apply animations.

Storyboard is a place where animated images or manipulated video is stored. A storyboard determines at what point in time a frame with a specific position X, Y and Z.

Storyboard can be used for all kinds of animations: Scaling, Rotation and Skewing are also possible.

Let’s see the steps.

Create a new Windows 10 universal app and add image control in your UI page “MainPage.XAML”.

  1. <Image Stretch="Uniform" Name="Display" Source="Assets/WATPSD.png">
  2. <Image.Projection>
  3. <PlaneProjection/>
  4. </Image.Projection>
  5. </Image>
Set the image source and image project type.

Next, go to code behind page and write the following code.
  1. private Storyboard rotation = new Storyboard();
  2. public MainPage()
  3. {
  4. this.InitializeComponent();
  5. DoubleAnimation animation = newDoubleAnimation();
  6. animation.From = 0.0;
  7. animation.To = 360.0;
  8. animation.BeginTime = TimeSpan.FromSeconds(1);
  9. animation.RepeatBehavior = RepeatBehavior.Forever;
  10. Storyboard.SetTarget(animation, Display);
  11. Storyboard.SetTargetProperty(animation, "(UIElement.Projection).(PlaneProjection.Rotation" + "Y" + ")");
  12. rotation.Children.Clear();
  13. rotation.Children.Add(animation);
  14. rotation.Begin();
  16. }
Create instance for storyboard and double animation.

Se the animation from and to 0 to 360 degree then timespan 1 second.

Finally, set the animation proprieties to storyboard.

Run the application and see the expected output looks like the following screen.

output

For more information on Windows 10 UWP, refer to my e-book:
Read more articles on Universal Windows Platform: