垂直ギャラリーで横方向にはみ出した領域を列名付きで横スクロール対応させる【Power Apps キャンバス】

垂直ギャラリーで要素を表示するとき、列名も一緒に作ったりしますよね。なんでもできますが、自分はコンテナ好きなので水平コンテナで作ったりします。

で、その時には項目数がかさんでしまって横幅が伸びて画面外までいっちゃう、なんてこともあります。場合によっては2行とか、表示方法を工夫したり、そもそもの項目数を減らしたりしますが諸事情によりそうもできない場合もあります。

そんな時には、横スクロール対応ができるということを知っておくと選択の幅が広がります。

以下に手順を記していますので、ご参考にしてください。

サンプル：左の領域が横スクロール対応領域

ざっくり手順

・垂直コンテナを配置する。

　・水平方向のオーバーフローをスクロールに設定する。

・垂直コンテナ配下に以下を追加する。

　・水平コンテナ（列名用）追加

　・垂直ギャラリー追加

・列名とギャラリーの横幅をはみ出し領域分を含めて設定する。

詳細な手順を以下に記します。

列名付き Gallery の横スクロール対応手順

垂直コンテナを配置

始めに垂直コンテナを配置します。

この中に横方向に横スクロールして、はみ出し領域を描画したいコントロールを含めます。

（今回は列名＋ギャラリー本体を入れていきます。）

挿入 > 垂直コンテナ から追加して、適当に配置しましょう。

水平方向のオーバーフローをスクロールに設定

垂直コンテナを配置したら、次に横スクロールに対応させます。

以下のプロパティに値を設定していきます。

Container設定値

プロパティ名	数式
LayoutOverflowX	LayoutOverflow.Scroll

※右のプロパティパネルからも設定可能です。水平方向のオーバーフローをスクロールに設定しましょう。

これで、コンテナ内の要素がコンテナの大きさを超えた場合に横スクロールするようになりました。

垂直コンテナ配下に以下を追加

下準備ができたので、コンテナに列名用のコントロールとギャラリーを追加していきます。

水平コンテナ（列名用）を追加

垂直コンテナを選択した状態で、水平コンテナを挿入します。

垂直ギャラリーを追加

垂直コンテナを選択した状態で、垂直ギャラリーを挿入します。

ツリービューを確認して、以下のようになっていればOKです。

列名とギャラリーの横幅をはみ出し領域分を含めて設定

列名用のコンテナとギャラリーを適当に構成します。（手順省略）

横幅がはみ出すくらい構成したとして、はみ出した分だけ横幅を設定しておきます。

列名用水平コンテナ

プロパティ名	数式
Width	1000 //任意の値

Gallery

プロパティ名	数式
Width	1000 //任意の値

列名用水平コンテナとGalleryの幅は合わせておきます。

GalleryのWidthは、列名用水平コンテナ.Width でもよいかもですね。

これで、垂直コンテナ配下のコントロールが横スクロールするようになったはずです。F5プレビューで試してみましょう。

サンプル：画像の左エリアが横スクロール対応

以上で横スクロール対応の手順は完了です。

まとめ

手順を簡単にまとめると、

・親コンテナを配置。横スクロールする設定に変更する。

・子コントロールを挿入、作成。はみ出した分大きく横幅を設定する。

これだけで横スクロールするようになります。簡単ですね。

今回は垂直ギャラリーの横スクロール対応を例に挙げましたが、ギャラリーに限らず応用が可能です。

コンテナは使いこなすと結構楽しいのでキャンバスに慣れてきた方には習得をおススメしたいコントロールです。