データ セットの各アイテムの同一フィールドに含まれるデータ量が異なる場合、含まれるデータを量が少ないアイテムの後にスペースを挿入しなくても、データ量が多いアイテムの全体を表示することができます。 高さ可変ギャラリーを追加し、次の操作を行えるように構成します。

  • コンテンツに合わせて伸縮するようにラベル コントロールを構成する。
  • 各コントロールを、上にあるコントロールのすぐ下に自動で表示されるように配置する。

このチュートリアルでは、高さ可変ギャラリー コントロールにフローリング製品に関するデータを表示します。 各製品画像は、概要の行数が 5 行と 2 行のどちらの場合でも概要の 5 ピクセル下に表示します。

完成版のアプリ

推奨記事

ギャラリーにコントロールを追加したことがない場合は、このトピックの先へ進む前にアイテムのリストの表示に関するページを参照してください。

空のアプリにデータを追加する

  1. この Excel ファイルをダウンロードします。このファイルには、フローリング製品の名前、概要、画像へのリンクが含まれています。

    フローリング製品

  2. Excel ファイルを、OneDrive、Dropbox、Google Drive などのクラウドストレージ アカウントにアップロードします。

  3. PowerApps Studio の [ファイル] メニューの [新規] をクリックまたはタップします。

  4. [空のアプリ] タイルで、[携帯電話レイアウト] をクリックまたはタップします。

    [File (ファイル)] メニューの [New (新規)] オプション

  5. Excel ファイル内の FlooringEstimates テーブルへの接続を追加します。

    詳細については、接続の追加に関するページを参照してください。

ギャラリーにデータを追加する

  1. [挿入] タブの [ギャラリー] をクリックまたはタップし、[変動する高さ] をクリックまたはタップします。

    ギャラリーの追加

  2. 画面全体を占めるようにギャラリーのサイズを変更します。

  3. ギャラリーの Items プロパティを FlooringEstimates に設定します。

製品名を表示する

  1. ギャラリーの左上隅にある鉛筆アイコンをクリックまたはタップして、ギャラリー テンプレートを選択します。

    鉛筆のアイコン

  2. ギャラリー テンプレートを選択した状態で、ラベル コントロールを追加します。

  3. ラベル コントロールの Text プロパティに次の式を設定します。
    ThisItem.Name

    ラベルの追加

製品の概要を表示する

  1. ギャラリー テンプレートを選択した状態で、別のラベル コントロールを追加し、1 番目のラベル コントロールの下に移動させます。

  2. 2 番目のラベル コントロールの Text プロパティに、次の式を設定します。
    ThisItem.Overview

  3. 2 番目のラベル コントロールを選択した状態で、[コンテンツ] タブの名前タグ アイコンをクリックまたはタップし、コントロールの名前を OverviewText (概要テキスト) に変更します。

    ラベルの名前を変更する

  4. OverviewText ボックスの AutoHeight プロパティを true に設定します。

    この手順により、ボックスがそのコンテンツに合わせて伸縮するようになります。

    テキストの高さの自動設定

製品画像を表示する

  1. テンプレートのサイズを、高さが 2 倍になるように変更します。

    アプリの作成時にテンプレートへコントロールを追加しやすくなりました。この変更はアプリの実行時の見た目に影響しません。

  2. ギャラリー テンプレートを選択した状態で、イメージ コントロールを追加し、OverviewText ボックスの下に移動させます。

  3. イメージ コントロールの Image プロパティに次の式を設定します。
    ThisItem.Image

  4. 次の式のように、OverviewText ボックスの位置とサイズを基にイメージ コントロールの Y プロパティを設定します。
    OverviewText.Y + OverviewText.Height + 5

    完成版のアプリ

他のコントロールを追加する場合も考え方は同じです。各コントロールの Y プロパティを、その上にあるコントロールの Y プロパティと Height プロパティに基づいて設定します。

次の手順

ギャラリー コントロールと数式の使用方法について確認してください。