Rotate Image In Windows 10 Universal App

Suresh M
8y
6.5k
0
0

Article

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”.

<Image Stretch="Uniform" Name="Display" Source="Assets/WATPSD.png">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>

Set the image source and image project type.

Next, go to code behind page and write the following code.

private Storyboard rotation = new Storyboard();
public MainPage()
{
this.InitializeComponent();
DoubleAnimation animation = newDoubleAnimation();
animation.From = 0.0;
animation.To = 360.0;
animation.BeginTime = TimeSpan.FromSeconds(1);
animation.RepeatBehavior = RepeatBehavior.Forever;
Storyboard.SetTarget(animation, Display);
Storyboard.SetTargetProperty(animation, "(UIElement.Projection).(PlaneProjection.Rotation" + "Y" + ")");
rotation.Children.Clear();
rotation.Children.Add(animation);
rotation.Begin();
}

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