Add picture control in canvas apps
Takes a photo or loads images from the local device.
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.
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.
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.
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).
Add images to an Image gallery control
Add an Add picture control, and then triple-click it.
Don't know how to add, name, and configure a control?
In the Open dialog box, click or tap an image file, and then click or tap Open.
Add a Vertical gallery control, and set its Items property to MyPix.
Select the Image control in the gallery and set it's Image property to ThisItem.Value.
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.
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.
(optional) Repeat the previous step one or more times, and then return to the default workspace by pressing Esc.
- 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.