다음을 통해 공유


Power Apps의 이미지 컨트롤

로컬 파일 또는 데이터 원본과 같은 이미지를 보여 주는 컨트롤입니다.

Description

앱에 이미지 컨트롤을 하나 이상 추가하는 경우 데이터 집합에 속하지 않은 개별 이미지를 표시하거나 데이터 원본에 레코드의 이미지를 통합할 수 있습니다.

키 속성

이미지 – 이미지 , 오디오 또는 마이크 컨트롤에 표시되는 이미지의 이름 또는 URL입니다.

비고

  • 모든 외부 이미지에 HTTPS를 사용하여 최신 브라우저와의 호환성을 보장합니다.
  • 외부 이미지는 익명으로 액세스할 수 있어야 합니다(인증 없이).

추가 속성

AccessibleLabel – 화면 읽기 프로그램에 대한 레이블입니다.

ApplyEXIFOrientation – 이미지에 포함된 EXIF 데이터에 지정된 방향을 자동으로 적용할지 여부입니다.

AutoDisableOnSelect – OnSelect 동작이 실행되는 동안 컨트롤을 자동으로 사용하지 않도록 설정합니다.

BorderColor – 컨트롤 테두리의 색입니다.

BorderStyle – 컨트롤의 테두리가 Solid, Dashed, Dotted 또는 None인지 여부입니다.

BorderThickness – 컨트롤 테두리의 두께입니다.

CalculateOriginalDimensionsOriginalHeightOriginalWidth 속성을 사용하도록 설정합니다.

DisplayMode – 컨트롤에서 사용자 입력(편집)을 허용하는지 여부, 데이터만 표시(보기) 또는 사용 안 함(사용 안 함)입니다.

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.

DisabledFillDisplayMode 속성이 Disabled 로 설정된 경우 컨트롤의 배경색입니다.

채우기 – 컨트롤의 배경색입니다.

FlipHorizontal – 이미지를 표시하기 전에 가로로 대칭 이동해야 하는지 여부입니다.

FlipVertical – 이미지를 표시하기 전에 세로로 대칭 이동할지 여부입니다.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.

높이 – 컨트롤의 위쪽 가장자리와 아래쪽 가장자리 사이의 거리입니다.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 유지할 때 컨트롤의 테두리 색입니다.

HoverFill – 사용자가 마우스 포인터를 유지할 때 컨트롤의 배경색입니다.

ImagePosition – 화면의 이미지 위치(채우기, 맞춤, 스트레치, 타일 또는 가운데)이거나 이미지와 크기가 같지 않은 경우 컨트롤입니다.

ImageRotation – 이미지를 표시하기 전에 회전하는 방법입니다. 값은 없음, 시계 방향(CW) 90도, CCW(시계 반대 방향) 90도 및 시계 방향 180도일 수 있습니다.

OnSelect – 사용자가 컨트롤을 탭하거나 클릭할 때 수행할 작업입니다.

OriginalHeightCalculateOriginalDimensions 속성으로 사용하도록 설정된 이미지의 원래 높이입니다.

OriginalWidthCalculateOriginalDimensions 속성으로 사용하도록 설정된 이미지의 원래 너비입니다.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 아래쪽 가장자리 사이의 거리입니다.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 위쪽 가장자리 사이의 거리입니다.

PressedBorderColor – 사용자가 해당 컨트롤을 탭하거나 클릭할 때 컨트롤의 테두리 색입니다.

PressedFill – 사용자가 해당 컨트롤을 탭하거나 클릭할 때 컨트롤의 배경색입니다.

RadiusBottomLeft – 컨트롤의 왼쪽 아래 모서리가 반올림되는 정도입니다.

RadiusBottomRight – 컨트롤의 오른쪽 아래 모서리가 반올림되는 정도입니다.

RadiusTopLeft – 컨트롤의 왼쪽 위 모서리가 반올림되는 정도입니다.

RadiusTopRight – 컨트롤의 오른쪽 위 모서리가 반올림되는 정도입니다.

TabIndex – 다른 컨트롤과 관련된 키보드 탐색 순서입니다.

도구 설명 – 사용자가 컨트롤을 마우스로 가리킬 때 표시되는 설명 텍스트입니다.

투명도 – 이미지 뒤에 컨트롤이 표시되는 정도입니다. 10진수 값의 범위는 0에서 1까지입니다. 0이 불투명한 경우 0.5는 반투명하고 1은 투명합니다.

표시 – 컨트롤이 표시되는지 숨겨지는지 여부입니다.

너비 – 컨트롤의 왼쪽 가장자리와 오른쪽 가장자리 사이의 거리입니다.

X – 컨트롤의 왼쪽 가장자리와 부모 컨테이너의 왼쪽 가장자리 사이의 거리입니다(부모 컨테이너가 없는 경우 화면).

Y – 컨트롤의 위쪽 가장자리와 부모 컨테이너의 위쪽 가장자리 사이의 거리입니다(부모 컨테이너가 없는 경우 화면).

Remove( DataSource, ThisItem )

예시

로컬 파일의 이미지 표시

  1. 파일 메뉴에서 미디어를 클릭하거나 탭한 다음 찾아보기를 클릭하거나 탭합니다.

  2. 추가하려는 이미지 파일을 클릭하거나 탭하고 열기를 클릭하거나 탭한 다음 Esc 키를 눌러 기본 작업 영역으로 돌아갑니다.

  3. 이미지 컨트롤을 추가하고 이미지 속성을 추가한 파일의 이름으로 설정합니다.

    컨트롤을 추가하고 구성하는 방법을 모르시나요?

    이미지 컨트롤은 지정한 이미지를 표시합니다.

데이터 원본의 이미지 집합 표시

  1. Excel 파일을 다운로드하고 로컬 장치에 저장합니다.

  2. Power Apps Studio에서 앱을 만들거나 연 다음 오른쪽 창에서 데이터 원본 추가 를 클릭하거나 탭합니다.

    오른쪽 창에 데이터 원본 추가 가 표시되지 않으면 왼쪽 탐색 모음에서 화면을 클릭하거나 탭합니다.

  3. 앱에 정적 데이터 추가를 클릭하거나 탭하고 다운로드한 Excel 파일을 클릭하거나 탭한 다음 열기를 클릭하거나 탭합니다.

  4. 바닥재 예측 확인란을 선택한 다음 연결을 클릭하거나 탭 합니다.

  5. 이미지가 있는 갤러리 컨트롤을 추가하고 Items 속성을 FlooringEstimates로 설정합니다.

    컨트롤을 추가하고 구성하는 방법을 모르시나요?

    갤러리 컨트롤은 다운로드한 Excel 파일의 링크를 기반으로 카펫, 견목 및 타일 제품의 이미지를 표시합니다.

내게 필요한 옵션 지침

색 대비

  • 그래픽을 단추로 사용하는 경우 표준 색 대비 요구 사항이 적용됩니다.
  • 순전히 장식용이 아닌 경우 이미지 내에서 대비 문제를 확인하는 것이 좋습니다.

화면 읽기 프로그램 지원

  • 중요한 그래픽에 대해 AccessibleLabel을 설정해야 합니다.

  • 그래픽이 장식용이거나 중복 정보를 제공하는 경우 AccessibleLabel 을 비워 두거나 빈 문자열 "" 로 설정합니다. 화면 읽기 프로그램은 이러한 그래픽을 무시합니다.

예를 들어 이 양식을 수정할 수 없다는레이블 옆에 자물쇠 이미지를 배치할 수 있습니다. 레이블이 이미 의미를 설명하므로 이미지에 AccessibleLabel이 필요하지 않습니다.

중요합니다

TabIndex가 0 이상이면 이미지가 단추가 됩니다. 모양은 변경되지 않지만 화면 읽기 프로그램은 이를 단추로 처리합니다. AccessibleLabel이 비어 있더라도 컨트롤을 무시하지 않습니다.

키보드 지원

  • 그래픽이 단추로 사용되는 경우 TabIndex는 0 이상이어야 합니다. 그러면 키보드 사용자가 키보드로 이동할 수 있습니다.

  • 그래픽을 단추로 사용하는 경우 포커스 표시기를 명확하게 표시해야 합니다. 이 결과를 얻으려면 FocusedBorderColorFocusedBorderThickness 를 사용합니다.