PowerApps의 그림 컨트롤 추가Add picture control in PowerApps

사진을 촬영하거나 로컬 장치에서 이미지를 로드 합니다.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 media button. 이미지가 업로드되지 않은 경우 이미지 컨트롤은 업로드된 이미지 또는 자리 표시자를 표시합니다.The Image control shows the uploaded image or a placeholder if no image has been uploaded. 미디어 단추 추가는 이미지를 업로드할지 묻는 메시지를 표시합니다.The Add media button prompts for an image to be uploaded.

Image 속성에 대해서는 이미지 컨트롤 참조를 참조하세요.See the Image control reference for Image properties.

미디어 단추 추가 속성Add media button properties

AccessibleLabel – 화면 읽기 프로그램의 레이블입니다.AccessibleLabel – Label for screen readers. 그림 추가의 목적을 설명해야 합니다.Should describe the purpose of adding a picture.

Align - 컨트롤의 가로 가운데를 기준으로 한 텍스트의 위치입니다.Align – The location of text in relation to the horizontal center of its control.

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

ChangePictureText – 이미지가 업로드되었을 때 단추에 나타나는 텍스트입니다.ChangePictureText – Text that appears on the button when an image has been uploaded.

Color – 컨트롤의 텍스트 색입니다.Color – The color of text in a control.

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Error -이미지를 업로드하는 중에 문제가 있어 이 속성이 적절한 오류 문자열이 포함됩니다.Error - If there is a problem uploading an image, this property will contain an appropriate error string.

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.Font – The name of the family of fonts in which text appears.

FontWeight - 컨트롤의 텍스트 굵기입니다. Bold, Semibold, Normal 또는 Lighter로 설정합니다.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.Italic – Whether the text in a control is italic.

Media – 오디오 또는 비디오 컨트롤에서 재생하는 클립에 대한 식별자입니다.Media – An identifier for the clip that an audio or video control plays.

OnChange – 사용자가 컨트롤의 값을 변경할 때(예: 슬라이더 조절) 앱이 응답하는 방식입니다.OnChange – How the app responds when the user changes the value of a control (for example, by adjusting a slider).

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

Padding – 가져오기 또는 내보내기 단추의 텍스트와 단추의 가장자리 사이의 간격입니다.Padding – The distance between the text on an import or export button and the edges of that button.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user taps or clicks that control.

Reset – 컨트롤이 기본값으로 되돌아가는지 여부입니다.Reset – Whether a control reverts to its default value.

Size -컨트롤에 표시되는 텍스트의 글꼴 크기입니다.Size – The font size of the text that appears on a control.

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Text – 이미지가 업로드되지 않았을 때 단추에 나타나는 텍스트입니다.Text – Text that appears on the button when an image has not been uploaded.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – 컨트롤의 세로 가운데를 기준으로 한 텍스트의 위치입니다.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.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 )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. 단추 컨트롤을 추가하고 그림 추가 컨트롤에서 이동하고 단추 컨트롤에 대한 OnSelect 속성을 이 수식으로 설정합니다.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)Collect(MyPix, AddMediaButton1.Media)

    Collect 함수 또는 다른 함수에 대해 더 알고 싶으신가요?Want more information about the Collect function or other functions?

  4. 이미지 갤러리 컨트롤을 추가하고 Items 속성을 MyPix로 설정합니다.Add an Image gallery control, and set its Items property to MyPix.

  5. F5 키를 누르고 단추 컨트롤을 클릭하거나 탭합니다.Press F5, and then click or tap the Button control.

    그림 추가 컨트롤의 이미지가 이미지 갤러리 컨트롤에 나타납니다.The image from the Add picture control appears in the Image gallery control. 이미지가 Image gallery 컨트롤에서 가로 세로 비율이 이미지 와 동일하지 않을 경우, Image 컨트롤의 ImagePosition 속성을 Fit로 설정합니다.If your image doesn't have the same aspect ratio as the Image control in the Image gallery control, set the ImagePosition property of the Image control to Fit.

  6. 그림 추가 컨트롤을 클릭하거나 탭하고 다른 이미지 파일을 클릭하거나 탭하고, 열기를 클릭하거나 탭한 다음, 사용자가 추가한 단추 컨트롤을 클릭하거나 탭합니다.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.

  7. (선택 사항) 이전 단계를 1회 이상 반복한 다음, Esc 키를 눌러 기본 작업 영역으로 돌아갑니다.(optional) Repeat the previous step one or more times, and then return to the default workspace by pressing Esc.

SaveData 함수를 사용하여 이미지를 로컬에서 저장하거나, Patch 함수를 사용하여 데이터 원본을 업데이트합니다.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 media button must have adequate contrast between its text and background. 업로드된 이미지의 색은 다양할 수 있으므로 미디어 단추 추가에서 불투명 Fill 을 사용하여 일관적인 대비를 보장합니다.Since the uploaded image may have varying colors, use an opaque Fill on the Add media button to ensure consistent contrast.

화면 판독기 지원Screen reader support

  • 미디어 단추 추가에는 사용자에게 그림을 추가하거나 변경할지 묻는 메시지를 표시하는 TextChangePictureText가 있어야 합니다.Add media button must have Text and ChangePictureText that prompts the user to add or change a picture.

키보드 지원Keyboard support

  • 미디어 단추 추가에는 키보드 사용자가 탐색할 수 있도록 0 이상의 TabIndex 가 있어야 합니다.Add media button must have TabIndex of zero or greater so that keyboard users can navigate to it.
  • 미디어 단추 추가에는 명확하게 표시되는 포커스 표시기가 있어야 합니다.Add media button must have clearly visible focus indicators. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.Use FocusedBorderColor and FocusedBorderThickness to achieve this.