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,

Rotating An Image In Power Apps

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

Rotating An Image In Power Apps

Step 2

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

Rotating An Image In Power Apps

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

Rotating An Image In Power Apps

Step 3

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

Rotating An Image In Power Apps

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.

Rotating An Image In Power Apps

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

Rotating An Image In Power Apps

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

Rotating An Image In Power Apps

Rotating An Image In Power Apps

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

Rotating An Image In Power Apps

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})
)

Rotating An Image In Power Apps

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})
)

Rotating An Image In Power Apps

Set the ImageRotation property in ImgTest as imgRot,

Rotating An Image In Power Apps

Step 4

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

Rotating An Image In Power Apps

After Clicking the clockwise button,

Rotating An Image In Power Apps

After Clicking the counter-clockwise button,

Rotating An Image In Power Apps

Summary

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


Similar Articles