如果您資料集中的不同項目在相同欄位包含不同的資料量,您可以完全顯示含有更多資料的項目,而無須在包含較少資料的項目之後新增空格。 新增和設定彈性高度控制項,以便您可以︰

  • 設定標籤控制項來根據其內容展開或壓縮。
  • 放置每個控制項,使其剛好自動出現在它上方控制項之下。

在本教學課程中,您會在彈性高度藝廊控制項中顯示有關地板產品的資料。 每項產品的影像會在概觀下出現 5 個像素,無論概觀包含五行或兩行文字。

最終應用程式

建議閱讀資料

如果您從未將控制項新增至藝廊,請遵循顯示項目清單中的步驟後,再繼續進行本主題。

將資料新增至空白的應用程式

  1. 下載這個 Excel 檔案,其中包含地板產品的名稱、概觀和影像的連結。

    地板產品

  2. 將這個 Excel 檔案上傳到雲端儲存體帳戶,例如 OneDrive、Dropbox 或 Google Drive。

  3. 在 PowerApps Studio 中,按一下或點選 [檔案] 功能表中的 [新增]。

  4. 在 [空白應用程式] 圖格上,按一下或點選 [手機配置]。

    檔案功能表上的新增選項

  5. 新增連接至 Excel 檔案中的 FlooringEstimates 資料表。

    如需詳細資訊,請參閱新增連接

將資料新增至藝廊

  1. 在 [插入] 索引標籤上,按一下或點選 [資源庫],然後按一下或點選 [高度有彈性]。

    新增資源庫

  2. 將藝廊的大小調整為佔用整個螢幕。

  3. 將藝廊的 Items 屬性設定為 FlooringEstimates

顯示產品名稱

  1. 在藝廊的左上角,按一下或點選鉛筆圖示可選取藝廊範本。

    鉛筆圖示

  2. 選取資源庫範本後,為它新增標籤控制項。

  3. 標籤控制項的 Text 屬性設定為這個運算式︰
    ThisItem.Name

    新增標籤

顯示產品概觀

  1. 選取資源庫範本後,新增另一個標籤控制項,並將它移到第一個標籤控制項之下。

  2. 將第二個標籤控制項的 Text 屬性設定為這個運算式︰
    ThisItem.Overview

  3. 選取第二個標籤控制項後,在 [內容] 索引標籤上按一下或點選名稱標記圖示,然後將控制項重新命名為 OverviewText

    重新命名標籤

  4. OverviewText 方塊的 AutoHeight 屬性設定為 true

    這個步驟可確保方塊中會放大或縮小以符合其內容。

    文字自動高度

顯示產品影像

  1. 調整範本的大小,使它成為原本高度的兩倍。

    您可以更輕鬆地在建置應用程式時將控制項新增至範本,這項變更不會影響應用程式執行時的外觀。

  2. 選取藝廊範本後,新增一個影像控制項,並將它移到 OverviewText 方塊之下。

  3. 請確認影像控制項的 Image 屬性設定為這個運算式:
    ThisItem.Image

  4. 根據 OverviewText 方塊的位置和大小設定影像控制項的 Y 屬性,如這個運算式所示︰
    OverviewText.Y + OverviewText.Height + 5

    最終應用程式

如果您想要新增更多控制項,請套用相同的概念︰根據每個控制項上方控制項的 YHeight 屬性設定每個控制項的 Y 屬性。

後續步驟

深入了解如何使用藝廊控制項和公式