キャンバス アプリ ギャラリーで異なる高さのアイテムを表示する

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

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

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

Dynamics アプリ。

推奨記事

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

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

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

    フローリング製品。

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

  3. 電話 レイアウト付きの 空白のキャンバス アプリ を作成します。

  4. 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. 画像 コントロールの 画像 プロパティに次の式を設定します。
    ThisItem.Image

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

    完成版のアプリ。

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

次の手順

ギャラリー コントロールと数式 の使用方法について説明します。

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。