Rotating An Image In Power Apps

Power Apps is a suite of apps, services, connectors, and data platforms that provides a rapid application development environment to build custom apps for your business needs. Click here for more details.

ImageRotation has rotated the image before displaying it. Rotation can be 4 different values as none, clockwise (CW) 90 degrees, counter-clockwise (CCW) 90 degrees, and clockwise 180 degrees.

Reading this article, you can learn how to rotate an image in Microsoft Power Apps.

Step 1

Open the URL https://powerapps.microsoft.com/en-us/ in the browser for Power apps,

Create an account with your Organisation Mail ID and login it, After login your Power Apps account,

Step 2

First, Click Create (+ ) and Select the Canvas app from blank.

Next, Give the App name as PAImageRotate and Format as Phone, and then click Create.

Step 3

For Rotating an Image, Rename the Screen name as ScrImgRot and set the OnVisible Property as UpdateContext({imgRot:ImageRotation.None}),

Add the following controls in the screen for Rotating Image with clockwise and counter-clockwise feature view,

Insert the Label Control and set the Name property as LblName and Text Property as Image Rotation in Power Apps.

Insert the Image Control and set the Name property as ImgTest.

For adding images, go to File Menu - > Select Media -> Upload the image.

Now set the Image control ImgTest - Image property as 'C# Corner'.

Insert the Button Control and set the Name property as BtnClockwise and OnSelect Property as

Switch(imgRot,
    ImageRotation.None, UpdateContext({imgRot:ImageRotation.Rotate90}),
    ImageRotation.Rotate90, UpdateContext({imgRot:ImageRotation.Rotate180}),
    ImageRotation.Rotate180, UpdateContext({imgRot:ImageRotation.Rotate270}),
    ImageRotation.Rotate270, UpdateContext({imgRot:ImageRotation.None}),
    UpdateContext({imgRot:ImageRotation.None})
)

Insert the Button Control and set the Name property as BtnCounterClockwise and OnSelect Property as

Switch(imgRot,
    ImageRotation.None, UpdateContext({imgRot:ImageRotation.Rotate90}),
    ImageRotation.Rotate90, UpdateContext({imgRot:ImageRotation.Rotate180}),
    ImageRotation.Rotate180, UpdateContext({imgRot:ImageRotation.Rotate270}),
    ImageRotation.Rotate270, UpdateContext({imgRot:ImageRotation.None}),
    UpdateContext({imgRot:ImageRotation.None})
)

Set the ImageRotation property in ImgTest as imgRot,

Step 4

Now we can see the preview of your App in Power Apps Studio, and The output of the PAImageRotate is,

After Clicking the clockwise button,

After Clicking the counter-clockwise button,

Summary

Now you have successfully tested Image Rotation- PAImageRotatein Power Apps Studio environment.