コンテナーでドロップシャドウ ! ダイアログ・ボタン・アイコン・ギャラリーにも適用する！

はじめに

NOTEこちらの記事は以前自社ブログへ掲載した記事のリライト版となります。
※一部内容重複がございますがご容赦ください。

今回は最近（2023年5月頃？）のアップデートで追加された、コンテナーのドロップシャドウの活用について記事にいたしました。
通常のコンテナー自体にドロップシャドウを付ける方法と合わせて、ダイアログやギャラリー、ボタン、アイコンなどにも応用したサンプルをご紹介していきます。

TIPSパチスロアプリでもこのテクニックで、浮き出る感やボタンの押し込み感などを作っています。
こちらについては【パワスロシリーズ】で別途記事にする予定です。

実装サンプル

ダイアログをコンテナーで作成しドロップシャドウを付けたサンプル

外側コンテナー、内側にもコンテナーを入れドロップシャドウを付けたサンプルと普通のギャラリーとの比較

ボタンやアイコンをコンテナーに入れてドロップシャドウを付けたサンプル

ドロップシャドウ（DropShadow）プロパティ

コンテナーにドロップシャドウ（DropShadow）のプロパティが追加されています。対象は以下の3つのコンテナーです。
設定箇所は同じですので、今回は普通のコンテナーで実装したサンプルの紹介です。

コンテナーの種類

1. コンテナー
2. 水平コンテナー
3. 垂直コンテナー

ドロップシャドウの種類

設定できるドロップシャドウの種類（重さ）は以下です。なしと、軽め～重めに6段階の調整が出来ます。
デフォルトでは「Light」がかかってます。各種類のイメージは以下ご参考ください。

1. None
2. Light
3. Semilight
4. Regular
5. Semibold
6. Bold
7. ExtraBold

TIPSまた、このアップデートの少し前に境界半径（Radius）プロパティも追加されています。
こちらはボタンなどには前からあった角丸の設定です。この設定で角丸や丸型のコンテナーの作成が可能です。

使いどころなど

以前まではドロップシャドウを使うような浮き出た感じの見た目はプロパティにはなかったので、疑似的に背景を重ねたり、HTMLで作成するなどのカスタマイズが必要でした。
今回コンテナーにドロップシャドウが追加されたので、プロパティを調整するのみで作ることが出来ます。

ただし、ドロップシャドウのプロパティがあるのはコンテナーのみです。（現状は） ボタンやアイコンなどには同じプロパティはありません。。

ぴーたくん

安心してください！ボタンやアイコンにもシャドウつける方法があるよ！

考え方を変えればコンテナーにはいろんなコントロールを入れれます。ですので、
コンテナーにボタンやアイコンなどの各コントロールを入れ込めば、すべてのコントロールにドロップシャドウの見た目が付けれるとも言えます。
そういった点もあってコンテナーのみに適用されたのかもしれません（勝手な想像）

次からはコンテナーのドロップシャドウを各コントロールに適用したサンプルをご紹介していきます。

NOTE コンテナーを追加するためその分コントロール数が増加します。
パフォーマンスの影響はほぼないレベルとは思いますが、気になる場合は実施するかはご検討ください。
またその他の影響があるかについては未検証です。
※1画面の推奨コントロール数は300以下です。ある程度超えてしまってもそれほど遅いとは感じませんが（個人の感想）

ダイアログにドロップシャドウ

これが一番使いどころとしてイメージしやすいかと思います。いままでもダイアログ画面を作成する際には背景をオーバーレイなどでそれっぽく作れましたが、ドロップシャドウを入れることで、より浮き出た感じを出してダイアログ感が増します。というかダイアログです。
このサンプルでは重さはBoldにしています。もともと枠線を入れていたのですが、ないほうがいい感じになったので無くしました。ドロップシャドウは後ろが暗いとあまり目立たないため、オーバーレイは薄めに再調整してます。

上記は少し特殊なダイアログで、添付ファイルを使う用途でフォームコントロールを使ってます。その親にコンテナーを追加しています。
通常はメッセージやボタンを四角形やラベルで枠を作って表現する事が多いかと思います。その場合はダイアログの枠として使う四角形などをコンテナーにしてしまえばOKです。

TIPS既存を修正する際の参考手順
・コンテナーを追加してサイズや位置をもともとあるコントロール（この場合はフォーム）に合わせる
・その後にコンテナー内にコントロールを移動する（カットして貼り付ける）

NOTE※コンテナーに入れるとそのコントロールのParent（親）はコンテナーになります。
そのため、Parent.〇〇のような親のプロパティを参照する実装がある場合は調整が必要です。

上記の手順は元々あるものを調整する場合の手順ですので、最初から作成する場合はシンプルにコンテナーを作成してその中に同じサイズのコントロールを入れればOKです。

ギャラリーにドロップシャドウ

こちらは2つのコンテナーを使ったサンプルです。

左は普通のギャラリーのみ、右は外側にコンテナーを用意してその中にギャラリーを入れてます。
さらに、各レコードにもコンテナーを入れ込み、その中に各要素を入れなおしてます。

特にレコード単位でコンテナーを入れ込んだ部分はカードタイプの選択がわかりやすくオシャレにできますよね！？
これは自分も今後活用しようと思います。作り方と注意点です。

作り方と注意点

ギャラリーの中に埋め込む場合は、Parent.〇〇というのが最初から入っているので、コンテナーに入れ込んだ段階でエラーが出ます。その調整が必要です。

ギャラリーへのコンテナー埋め込み手順

1. ギャラリーの中にコンテナーを追加
2. その他コントロールを全選択して切り取り
3. コンテナーの中に貼り付け

エラーの解消手順

以下3つのどれかなのでそれぞれ対応します。　Select（Parent）はいったん空にしてます。処理が必要な場合は後で調整すればOKです。→Select（ギャラリー名）にするなど

※すでにカスタム済みのギャラリーにて適用する場合は上記以外のエラーが出る可能性がありますが、同様に置き換えれば解消するはずです。

1. Select(Parent)のエラー　→空にする
2. Parent.TemplateHeightのエラー　→Parent.Heightに置換する
3. Parent.TemplateWidthのエラー　→Parent.Widthに置換する

ドロップシャドウやパディングで浮き出る感の調整
これでエラーはなくなります。ここから以下の調整をしてカードが浮き出ている感じにしています。

1. パディング（TemplatePadding）を付ける（10くらい）　※コンテナーの横幅はその分縮める必要あり
2. ドロップシャドウを強めにする(レギュラーくらい)　→パディングを開けた分ドロップシャドウが良い感じになる
3. 切替え（Transition）をポップに変更する　→選択したレコードが浮き出る設定

ボタン・アイコンにドロップシャドウ

これはシンプルにコンテナーを用意してその中にボタンやアイコンを入れ込みます。

ボタン

1. コンテナーの角丸の設定や枠線の設定をボタンのみの場合と同じにする
2. コンテナーにボタンを入れ込む
3. コンテナーのドロップシャドウを調整する

アイコン

1. コンテナーの角丸の設定や枠線の設定をする　※境界半径を幅、高さの半分より大きくすれば丸になる
2. コンテナーにアイコンを入れ込む
3. コンテナーのドロップシャドウを調整する　※左はSemiBold、右はBold

おわりに

今回は新機能のドロップシャドウについて、通常のコンテナーに利用する方法とあわせて、各コントロールにも適用する方法をご紹介しました。
個人的にはギャラリーの中に入れるコンテナーのドロップシャドウでカードっぽく浮き出る感を出せるのが特に気に入ってます。ボタンやアイコンについては対象が多いと若干手間がかかるので必要に応じてという感じですね。

ドロップシャドウを使いすぎたり、強すぎたりするのはあまりよくない気もしますが、クリックできる部分であるということを認識してもらい易いので、見た目以外にもユーザービリティの点でより良いデザインにできるのではないかと思います。

現時点ではコンテナーのみのプロパティであるため、その他のコントロールへの適用は少し手間をかけての実現となりますが、将来的に各コントロールにドロップシャドウプロパティが追加されればこのTipsも不要となります。
そうなる日が来ることを願いつつ、来なければ本記事をご参考にカスタムしていただければと思います。それでは。