Post
Ask Question

Rotate 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();  
  15.   
  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:


Similar Articles