キャンバス アプリ ギャラリーで異なる高さのアイテムを表示する
データ セットの各アイテムの同一フィールドに含まれるデータ量が異なる場合、含まれるデータを量が少ないアイテムの後にスペースを挿入しなくても、データ量が多いアイテムの全体を表示することができます。 伸縮可能な高さギャラリー コントロールを追加し、次の操作を行えるように構成します。
- コンテンツに合わせて伸縮するように ラベル コントロールを構成する。
- 各コントロールを、上にあるコントロールのすぐ下に自動で表示されるように配置します。
このチュートリアルでは、伸縮可能な高さギャラリー コントロールにフローリング製品に関するデータを表示します。 各製品画像は、概要の行数が 5 行と 2 行のどちらの場合でも概要の 5 ピクセル下に表示します。
推奨記事
ギャラリーにコントロールを追加したことがない場合は、このトピックの先へ進む前に「アイテムのリストの表示」の手順を参照してください。
空のアプリにデータを追加する
この Excel ファイル をダウンロードします。このファイルには、フローリング製品の名前、概要、画像へのリンクが含まれています。
Excel ファイルを、OneDrive、Dropbox、Google Drive などのクラウド ストレージ アカウントにアップロードします。
電話 レイアウト付きの 空白のキャンバス アプリ を作成します。
Excel ファイル内の FlooringEstimates テーブルへの接続を追加します。
詳細については、「接続の追加」を参照してください。
ギャラリーにデータを追加する
挿入タブのギャラリーをクリックまたはタップし、伸縮可能な高さをクリックまたはタップします。
スクリーン全体を占めるようにギャラリーのサイズを変更します。
ギャラリーの Items プロパティを FlooringEstimates に設定します。
製品名を表示する
ギャラリーの左上隅にある鉛筆アイコンをクリックまたはタップして、ギャラリー テンプレートを選択します。
ギャラリー テンプレートを選択した状態で、ラベル コントロールを追加します。
ラベル コントロールの Text プロパティに次の式を設定します。
ThisItem.Name
製品の概要を表示する
ギャラリー テンプレートを選択した状態で、別の ラベル コントロールを追加し、1 番目の ラベル コントロールの下に移動させます。
2 番目の ラベル コントロールの Text プロパティに、次の式を設定します。
ThisItem.Overview2 番目の ラベル コントロールを選択した状態で、コンテンツ タブの名前タグ アイコンをクリックまたはタップし、コントロールの名前を OverviewText に変更します。
OverviewText ボックスの AutoHeight プロパティを true に設定します。
この手順により、ボックスがそのコンテンツに合わせて伸縮するようになります。
製品画像を表示する
テンプレートのサイズを、高さが 2 倍になるように変更します。
アプリの作成時にテンプレートへコントロールを追加しやすくなりました。この変更はアプリの実行時の見た目に影響しません。
ギャラリー テンプレートを選択した状態で、画像 コントロールを追加し、OverviewText ボックスの下に移動させます。
画像 コントロールの 画像 プロパティに次の式を設定します。
ThisItem.Image次の式のように、OverviewText ボックスの位置とサイズを基に 画像 コントロールの Y プロパティを設定します。
OverviewText.Y + OverviewText.Height + 5
他のコントロールを追加する場合も考え方は同じです。各コントロールの Y プロパティを、その上にあるコントロールの Y プロパティと Height プロパティに基づいて設定します。
次の手順
ギャラリー コントロールと数式 の使用方法について説明します。
注意
ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)
この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示