Image control in PowerApps

A control that shows an image from, for example, a local file or a data source.

Description

If you add one or more Image controls to your app, you can show individual images that aren't part of a data set, or you can incorporate images from records in data sources.

Key properties

Image – The name of the image that appears in an image, audio, or microphone control.

Additional properties

AccessibleLabel – Label for screen readers.

ApplyEXIFOrientation – Whether to automatically apply the orientation specified in the EXIF data embedded with the image.

AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is executing.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

CalculateOriginalDimensions – Enables the OriginalHeight and OriginalWidth properties.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – The background color of a control.

FlipHorizontal – Whether to flip the image horizontally before displaying it.

FlipVertical – Whether to flip the image vertically before displaying it.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

ImagePosition – The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or a control if it isn't the same size as the image.

ImageRotation – How to rotate the image before displaying it. Values can be none, clockwise (CW) 90 degrees, counter-clockwise (CCW) 90 degrees and clockwise 180 degrees.

OnSelect – How the app responds when the user taps or clicks a control.

OriginalHeight – Original height of an image, enabled with the CalculateOriginalDimensions property.

OriginalWidth – Original width of an image, enabled with the CalculateOriginalDimensions property.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – The degree to which the top-right corner of a control is rounded.

TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Transparency – The degree to which controls behind an image remain visible.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Remove( DataSource, ThisItem )

Examples

Show an image from a local file

  1. On the File menu, click or tap Media, and then click or tap Browse.

  2. Click or tap the image file that you want to add, click or tap Open, and then press Esc to return to the default workspace.

  3. Add an Image control, and set its Image property to the name of the file that you added.

    Don't know how to add and configure a control?

    The Image control shows the image that you specified.

Show a set of images from a data source

  1. Download this Excel file, and save it on your local device.

  2. In PowerApps Studio, create or open an app, and then click or tap Add data source in the right-hand pane.

    If Add data source doesn't appear in the right-hand pane, click or tap a screen in the left navigation bar.

  3. Click or tap Add static data to your app, click or tap the Excel file that you downloaded, and then click or tap Open.

  4. Select the Flooring Estimates check box, and then click or tap Connect.

  5. Add a Gallery control with images, and set its Items property to FlooringEstimates.

    Don't know how to add and configure a control?

    The Gallery control shows images of carpet, hardwood, and tile products based on links in the Excel file that you downloaded.

Accessibility guidelines

Color contrast

Screen reader support

  • AccessibleLabel must be present, if the graphic is used as a button or is otherwise not just for decoration.
  • AccessibleLabel must be empty or the empty string "", if the graphic is purely for decoration. This causes screen readers to ignore the graphic.
  • AccessibleLabel can be empty or the empty string "", if the graphic provides redundant information.
    • For example, an Image of gears with its AccessibleLabel set to Settings. This image is not used as a button. It is next to a Label that also says Settings. Screen readers will read the image as Settings, and the label as Settings again. This is unnecessarily verbose. In this case, the Image does not need an AccessibleLabel.

      Important

      Screen readers will always read Images that have TabIndex of zero or greater, even if AccessibleLabel is empty. This is because they are rendered as buttons. If no AccessibleLabel is provided, screen readers will simply read the graphic as button.

Keyboard support

  • TabIndex must be zero or greater, if the graphic is used as a button. This allows keyboard users to navigate to it.

  • Focus indicators must be clearly visible, if the graphic is used as a button. Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    Note

    When TabIndex is zero or greater, the Image is rendered as a button. There is no change to the visual appearance, but screen readers will correctly identify the image as a button. When TabIndex is less than zero, the Image is identified as an image.