キャンバス アプリ ギャラリーに異なる高さの項目を表示する

同じフィールド内の異なる項目に異なる量のデータが含まれている場合は、データが少ない項目の後に余分な空き領域を追加することなく、より多くのデータを含む項目を表示できます。 伸縮可能な高さギャラリー コントロールを追加し、次の操作を行えるように構成します。

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

この記事では、 フレキシブル高さ ギャラリー コントロールの床材製品に関するデータを示します。 各製品の画像は、概要が 2 行か 5 行かにかかわらず、概要テキストの 5 ピクセル下に表示されます。

注

ギャラリーにコントロールを追加したことがない場合は、続行する前に、「 ギャラリー内の項目の一覧を表示 する」の手順を完了してください。

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

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

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

3. 空白のアプリ を Phone レイアウトで作成します。

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

   詳細については、「 データ接続の追加」を参照してください。

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

1. [挿入] タブで、[ギャラリー]>[可変の高さ] を選択します。

   

2. ギャラリーのサイズを変更して画面全体を表示します。

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

製品名を表示する

1. ギャラリーの左上隅で、鉛筆アイコンを選択してテンプレート編集モードに入ります。

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

3. Label コントロールの Text プロパティを次の値に設定します。

   ThisItem.Name
   

製品の概要を表示する

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

2. 2 番目のラベルの Text プロパティを次の値に設定します。

   ThisItem.Overview
   

3. 2 番目のラベルが選択されている状態で、[コンテンツ] タブの名前タグ アイコンを使用して OverviewText に名前を変更します。

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

   ヒント

   ラベルで AutoHeight を true に設定すると、コンテンツに合わせて拡大または縮小されます。 これは、柔軟な高さギャラリーを正しく動作させるために重要です。これを使用しないと、すべての項目が同じ固定の高さでレンダリングされます。

製品画像を表示する

1. 下の端をドラッグして現在の高さを約 2 倍にすることで、テンプレートの高さを高くします。

   アプリをビルドすると、テンプレートにコントロールをより簡単に追加できます。 この変更は、実行時のアプリの外観には影響しません。

2. ギャラリー テンプレートを選択した状態で、 イメージ コントロールを追加し、 OverviewText ラベルの下に配置します。

3. Image コントロールの Image プロパティが次に設定されていることを確認します。

   ThisItem.Image
   

4. Image コントロールの Y プロパティを、概要テキストの下に動的に配置するように設定します。

   OverviewText.Y + OverviewText.Height + 5
   

   

   追加のコントロールにも同じ概念を適用します。コントロールのすぐ上にあるコントロールの Y と Height に基づいて、各コントロールの Y プロパティを設定します。

次の手順

• ギャラリー コントロールを追加して構成する
• ギャラリーを操作するためのベスト プラクティス
• キャンバス アプリの数式の使用を始める