はじめに

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

Before/After

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

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

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

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

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

アプリ自体はこちらの記事で紹介したものになります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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