Rotate Image In Windows 10 Universal App

In this article we are going to see how to rotate the image in Windows 10 universal app.

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.


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