Prerequisites

Now let's get started with the following steps:

Step 1 : Create Windows Universal Project

Open Visual Studio 2015 and Click File -> New -> Project Option for New Universal App.

New

Step 2: Giving the Project Name

Then, New Project Window will open, there you can select an Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank App (Universal Windows).

Type Project Name ImageApp and click the OK button

Blank App

Step 3: Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows application and click OK button

Versions

Step 4: Choose Designer Window

Now we go to the Solution Explorer and select MainPage.xaml

Solution Explore

Step 5: Designing the App

Click on the XAML file and Add the following coding

Designing

The Window looks like this,

code

  1. <Page.BottomAppBar>
  2. <AppBar IsOpen="True" IsSticky="True">
  3. <StackPanel Orientation="Horizontal">
  4. <AppBarButton Icon="RepeatAll" Label="Rotate" Click="Pitch_Click" />
  5. <AppBarButton Icon="Rotate" Label="Flip" Click="Flip_Click" /> </StackPanel>
  6. </AppBar>
  7. </Page.BottomAppBar>
  8. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  9. <Grid>
  10. <Grid.RowDefinitions>
  11. <RowDefinition Height="Auto" />
  12. <RowDefinition Height="*" /> </Grid.RowDefinitions>
  13. <Image Grid.Row="1" Margin="60" Stretch="Uniform" Name="Display" Source="Assets/UWP.png">
  14. <Image.Projection>
  15. <PlaneProjection/> </Image.Projection>
  16. </Image>
  17. </Grid>
  18. </Grid>
  19. </Page>
Step 6: Add the Coding

Now we want to rotate and flip the Image. Add the following code in the MainPage.xaml.cs. Add the following code.

code

code
  1. using Windows.UI.Xaml.Media;
  2. using Windows.UI.Xaml.Media.Animation;
  1. private Storyboard rotation = new Storyboard();
  2. private bool rotating = false;
  1. public void Rotate(string axis, ref Image target) {
  2. if (rotating) {
  3. rotation.Stop();
  4. rotating = false;
  5. } else {
  6. DoubleAnimation animation = new DoubleAnimation();
  7. animation.From = 0.0;
  8. animation.To = 360.0;
  9. animation.BeginTime = TimeSpan.FromSeconds(1);
  10. animation.RepeatBehavior = RepeatBehavior.Forever;
  11. Storyboard.SetTarget(animation, Display);
  12. Storyboard.SetTargetProperty(animation, "(UIElement.Projection).(PlaneProjection.Rotation" + "Y" + ")");
  13. rotation.Children.Clear();
  14. rotation.Children.Add(animation);
  15. rotation.Begin();
  16. rotating = true;
  17. }
  18. }
  1. private void Pitch_Click(object sender, RoutedEventArgs e) {
  2. Rotate("X", ref Display);
  3. }
  4. private void Flip_Click(object sender, RoutedEventArgs e) {
  5. ScaleTransform transform = new ScaleTransform();
  6. transform.ScaleY = -1;
  7. Display.RenderTransform = transform;
  8. }
Step 7: Run the Application

Now we are ready to run our Project, So Click the Local Machine for running the Application.

Application

Output

  1. Click on the Rotate Button,

    Rotate

  2. It Rotates,

    Rotate

  3. Next, Stop the Rotation by again clicking on the rotate button,

    Rotate

  4. Now Click on the Flip Button,

    Flip

  5. Next Click on the Rotate button, it rotates in the Flip position.

    Flip

Conclusion: I hope you understood how to rotate and Flip the Image in Universal Windows and how to run it.