PowerApps 갤러리에서 높이가 다른 항목 표시Show items of different heights in a PowerApps gallery

데이터 집합에 있는 다양한 항목이 같은 필드에 다른 양의 데이터를 포함하고 있다면 적은 데이터가 포함된 항목 다음에 빈 공백을 추가하지 않고 더 많은 데이터를 포함하는 항목을 완전히 포함할 수 있습니다.If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain less data. 유연한 높이 갤러리 컨트롤을 추가 및 구성하여 다음 작업을 수행할 수 있습니다.Add and configure a Flexible height gallery control so that you can:

  • 콘텐츠에 따라 확장 또는 축소하도록 레이블 컨트롤을 구성합니다.Configure Label controls to expand or shrink based on their contents.
  • 위의 컨트롤 바로 아래에 자동으로 나타나도록 각 컨트롤을배치합니 다.Position each control so that it automatically appears just under the control above it.

이 자습서에서는 유연한 높이 갤러리 컨트롤의 바닥재 제품에 대한 데이터를 보여줍니다.In this tutorial, you show data about flooring products in a Flexible height gallery control. 각 제품의 이미지는 개요에 다섯 줄의 텍스트 또는 두 줄을 포함하던지 개요 아래에 5픽셀을 나타냅니다.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

최종 앱

참고 자료Suggested reading

갤러리에 컨트롤을 추가하지 않았다면 이 항목에서 계속하기 전에 항목 목록 표시의 단계를 따르세요.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

비어 있는 앱에 데이터 추가Add data to a blank app

  1. 바닥재 제품의 이름, 개요 및 이미지 링크가 포함된 이 Excel 파일을 다운로드합니다.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    바닥재 제품

  2. Excel 파일을 OneDrive, Dropbox 또는 Google Drive와 같은 클라우드 저장소 계정에 업로드합니다.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. PowerApps Studio에서 파일 메뉴에서 새로 만들기를 클릭하거나 탭합니다.In PowerApps Studio, click or tap New on the File menu.
  4. 비어 있는 앱 타일에서 휴대폰 레이아웃을 클릭하거나 탭합니다.On the Blank app tile, click or tap Phone layout.

    파일 메뉴의 새 옵션

  5. Excel 파일의 FlooringEstimates 테이블에 연결을 추가합니다.Add a connection to the FlooringEstimates table in the Excel file.

    자세한 내용은 연결 추가를 참조하세요.For more information, see Add a connection.

  1. 삽입 탭에서 갤러리를 클릭하거나 탭한 다음, 유연한 높이를 클릭하거나 탭합니다.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    갤러리 추가

  2. 전체 화면을 차지하도록 갤러리의 크기를 조정합니다.Resize the gallery to take up the entire screen.
  3. 갤러리의 Items 속성을 FlooringEstimates로 설정합니다.Set the gallery's Items property to FlooringEstimates.

제품 이름 표시Show the product names

  1. 갤러리의 왼쪽 위 모서리에서 연필 아이콘을 클릭하거나 탭하여 갤러리 템플릿을 선택합니다.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    연필 아이콘

  2. 갤러리 템플릿이 선택된 상태에서 레이블 컨트롤을 추가합니다.With the gallery template selected, add a Label control to it.
  3. 레이블 컨트롤의 Text 속성을 다음 식으로 설정합니다.Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    레이블 추가

제품 개요 표시Show the product overviews

  1. 갤러리 템플릿이 선택된 상태에서 또 다른 레이블 컨트롤을 추가하고 레이블 컨트롤 아래로 이동합니다.With the gallery template selected, add another Label control, and move it below the first Label control.
  2. 두 번째 레이블 컨트롤의 Text 속성을 다음 식으로 설정합니다.Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. 두 번째 레이블 컨트롤이 선택된 상태에서 콘텐츠 탭의 이름 태그 아이콘을 클릭하거나 탭하고 이 컨트롤의 이름을 OverviewText로 변경합니다.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    레이블 이름 바꾸기

  4. OverviewText 상자의 AutoHeight 속성을 true로 설정합니다.Set the AutoHeight property of the OverviewText box to true.

    이 단계를 통해 해당 상자가 콘텐츠에 맞게 늘어나거나 축소됩니다.This step ensures that the box will grow or shrink to fit its contents.

    텍스트 자동 높이

제품 이름 표시Show the product images

  1. 높이가 두 배가 되도록 템플릿 크기를 조정합니다.Resize the template so that it's twice as tall as it was.

    앱을 빌드할 때 컨트롤을 템플릿에 더 쉽게 추가할 수 있으며, 이 변경 사항은 앱 실행 시 보이는 방식에 영향을 미치지 않습니다.You can add controls to the template more easily as you build the app, and this change won't affect how the app looks when it runs.

  2. 갤러리 템플릿이 선택된 상태에서 이미지 컨트롤을 추가하고 OverviewText 상자 아래로 이동합니다.With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. 이미지 컨트롤의 Image 속성이 다음 식으로 설정됩니다.Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. 다음 식에 있는 대로 OverviewText 박스의 위치와 크기에 따라 이미지 컨트롤의 Y 속성을 설정합니다.Set the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
    OverviewText.Y + OverviewText.Height + 5OverviewText.Y + OverviewText.Height + 5

    최종 앱

컨트롤을 더 추가하려는 경우 동일한 개념을 적용합니다. 즉, 위에 있는 컨트롤의 YHeight 속성에 따라 각 컨트롤의 Y 속성을 설정합니다.Apply the same concept if you want to add more controls: set each control's Y property based on the Y and Height properties of the control above it.

다음 단계Next steps

갤러리 컨트롤과 수식 사용 방법에 대해 자세히 알아보세요.Learn more about how to work with a gallery control and formulas.