Power Apps のギャラリーコントロールの見た目を少し良くする


# はじめに

前回の記事でギャラリーコントロールで最低限おさえておきたいと思うことについて説明しました。今回は、ギャラリーコントロールの見た目をよくする (私は良いと思っている) 方法についてステップバイステップで説明します。

https://qiita.com/Takashi_Masumori/items/63db56c23a83f25b19ee

# Before/After

まず、ギャラリーの見た目の変更前と変更後についてです。
データソース (今回は同僚の勤務状況を格納しているデータソース) はもちろん同じです。

■ギャラリーコントロールにデータソースを追加した状態 (Before)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ed8bf123-ac8f-bde8-8781-0195347fe523.png)

■色々変更した状態 (After)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/a595f1db-338d-ed75-a4e9-6c9fca5f4b86.png)

もはや同じギャラリーとは思えないですよね。(Before は何の情報か全く分からないですね)

今回は、Before から After にしていく流れで説明します。

:::note
アプリ自体はこちらの記事で紹介したものになります。
:::
https://qiita.com/Takashi_Masumori/items/7db650461849b8dab820

# レイアウトの変更

まず、レイアウトを変更していきます。
ギャラリー自体のサイズを大きくして、折り返しの数を 3 にしてテンプレートの高さも程よい感じにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9501553c-d6d1-21e7-d093-112ecf459a24.png)

# デザインの変更

## 背景の設定

ギャラリーの背後に画像を配置します。
画像は何でも構いません。アプリに適してそうなものを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fcce9f67-6267-7882-7842-b4baa69d7720.png)

## ギャラリー自体の色の変更

ギャラリーコントロール内の Rectangle (他のコントロールでもいいです) の `[Fill]`プロパティの色を以下のように白にしつつ透明度を調整します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c4fedaf7-ad84-8ab3-ae72-8eb77ede5673.png)

また、`[BorderColor]`を White にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/edede191-f34d-d08d-a5df-4d0e8a9a615e.png)

全体のデザイン感が出来てきました。

# 部品の配置

## コンテナの配置

コンテナではなくてもいいですが、今回は、ギャラリー内に水平コンテナーを二つ配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/8628a439-01ec-1985-2258-56f58777efb2.png)

追加したコンテナー二つと Rectangle 以外を削除します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/a5a74e58-b266-fb30-4d8f-12f18b2b5b7a.png)

コンテナーについて、片方を上の方に配置して、もう片方を下の方に配置します。

### プロファイル用コンテナーの設定

上側のコンテナーについて、conProfile という名前にして、画像コントロールトラベルコントロールを配置します。

コンテナーの`[ギャップ]`と、`[パディング]`をそれぞれ 10 にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/2fef1a72-93f5-d618-065f-b6a1aa5fd72d.png)

画像コントロールの`[Height]`、`[Width]`、`[境界半径]`を全て 60 にします。
また、ラベルコントロールの`[Height]`も 60 にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ecac5698-5bd6-6fa2-ef0c-e586477d5cb9.png)

画像コントロールの`[Image]`プロパティを設定して画像が表示されるようにします。
設定内容はアプリの作り次第のため割愛しますが、Office 365 ユーザーコネクターを利用しています。
こちらについては以下の記事を参考にしてください。

https://qiita.com/Takashi_Masumori/items/92f4772a73d7f05e6690

ラベルコントロールの`[Text]`プロパティも変更します。
こちらもアプリの作り次第のため、設定する内容自体は割愛します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/899ee2ec-885d-f658-7176-1d6a4a1a3141.png)

### 勤務状況共有用コンテナーの設定

下側に配置したコンテナーには、ボタンコントロール、ラベルコントロール、アイコンコントロールを配置します。

こちらも、コンテナーの`[ギャップ]`と、`[パディング]`をそれぞれ 10 にし、配置 (垂直方向) を"中央揃え"にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fce57bd7-161f-d069-6935-f7cf51d3c5e5.png)

ボタンの`[Fill]`プロパティと`[Text]`プロパティを設定します。こちらはアプリ次第なので割愛しますが、今回は勤務状況次第で色を変えるようにしております。こちらについては、以下の記事を参考になさってください。

https://qiita.com/Takashi_Masumori/items/f90333d7a4a0fbf0e1a6

また、表示モードを"ビュー"にしておきます (今回はあくまで表示用として使うので)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e5c75bae-ea96-ef10-3c1c-6c27c177ffec.png)


あとは、ラベルのサイズを調整し、テキストプロパティし、アイコンについてもサイズを調整して、`[Icon]`プロパティや`[Color]`プロパティを変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/05734eb7-36b7-1f00-c0b3-d37a6da8de9e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/05fdddf5-64b7-0baf-dfe8-e0f045679f57.png)

細かい微調整はいるかもですが、概ね、After のものと同じになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b4ecf1b6-4e2b-abad-1143-5a7bd659d41e.png)

参考までに私が良くやることとしては、以下のように余白を統一するようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/459d2d1b-994c-99ff-e791-63ed7f06870b.png)

# まとめ

今回は、ギャラリーコントロールの見た目を少し良くする方法について、ステップバイステップで紹介してみました。

もちろん見た目の好みは人それぞれだと思いますが、少しでも何かの参考になれば幸いです。