Edit

Add picture control in canvas apps

  • Article

Takes a photo or loads images from the local device.

Description

With this control users can take photos or upload image files from their device and update the data source with this content. On a mobile device the user is presented with the device's choice dialog to choose between taking a photo or selecting one already available.

This control is a grouped control containing two controls: an Image and an Add picture button. The Image control shows the uploaded image or a placeholder if no image has been uploaded. The Add picture button prompts for an image to be uploaded.

See the Image control reference for Image properties.

Limitations

The picture control has these limitations:

  • When using the Add Picture control on iOS, images imported by using the camera or gallery don't contain meta-data like orientation, location information, or camera settings.

Add picture button properties

AccessibleLabel – Label for screen readers. Should describe the purpose of adding a picture.

Align – The location of text in relation to the horizontal center of its control.

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.

ChangePictureText – Text that appears on the button when an image has been uploaded.

Color – The color of text in a control.

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

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

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

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

Error - If there is a problem uploading an image, this property will contain an appropriate error string.

Fill – The background color of a control.

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.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

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.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

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

Italic – Whether the text in a control is italic.

Media – An identifier for the clip that an audio or video control plays.

OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).

OnSelect – Actions to perform when the user taps or clicks a control.

Padding – The distance between the text on an import or export button and the edges of that button.

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

PressedColor – The color of text in a control when the user taps or clicks that control.

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

Reset – Whether a control reverts to its default value.

Size – The font size of the text that appears on a control.

Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Keyboard navigation order in relation to other controls.

Text – Text that appears on the button when an image has not been uploaded.

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

Underline – Whether a line appears under the text that appears on a control.

UseMobileCamera – Whether to use a mobile camera directly, when available. For Android devices, this property requires the experimental setting Improved Media Capture turned on.

VerticalAlign – The location of text on a control in relation to the vertical center of that control.

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

Patch( DataSource, BaseRecord, ChangeRecord )

Examples

  1. Add an Add picture control, and then triple-click it.

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

  2. In the Open dialog box, click or tap an image file, and then click or tap Open.

  3. Add a Button control, move it under the Add picture control, and set the OnSelect property for the Button control to this formula:
    Collect(MyPix, AddMediaButton1.Media)

    Want more information about the Collect function or other functions?

  4. Add a Vertical gallery control, and set its Items property to MyPix.

  5. Select the Image control in the gallery and set it's Image property to ThisItem.Value.

  6. Press F5, and then click or tap the Button control.

    The image from the Add picture control appears in the Vertical Gallery control. If your image doesn't have the same aspect ratio as the Image control in the Vertical gallery control, set the ImagePosition property of the Image control to Fit.

  7. Click or tap the Add picture control, click or tap another image file, click or tap Open, and then click or tap the Button control that you added.

    The second image appears in the Image gallery control.

  8. (optional) Repeat the previous step one or more times, and then return to the default workspace by pressing Esc.

Use the SaveData function to save the images locally or the Patch function to update a data source.

Accessibility guidelines

The same guidelines for Button and Image apply. In addition, consider the following:

Color contrast

  • Add picture button must have adequate contrast between its text and background. Since the uploaded image may have varying colors, use an opaque Fill on the Add picture button to ensure consistent contrast.

Screen reader support

  • Add picture button must have Text and ChangePictureText that prompts the user to add or change a picture.

Keyboard support