Power Apps で角丸デザインを実現したいと思っても、DropdownやDatePickerなど一部のコントロールは BorderRadius プロパティを持っていません。コンテナで包んでしまえばこの問題は解決します。しかも、アプリ全体の角丸を変数1つで一括管理できるようになります。
角丸が設定できないコントロールが存在する
Power Apps のコントロールには、モダンコントロールとクラシックコントロールの2種類があります。モダンコントロールはネイティブに BorderRadius プロパティを持っているので、プロパティパネルから直接角丸の値を指定できます。問題はクラシックコントロールです。Dropdown・DatePicker・ComboBox といったよく使うコントロールの多くがクラシック扱いで、BorderRadius プロパティが存在しません。
モダンコントロールに全面移行すればこの問題は解決しますが、既存アプリをそのまま使い続けている場合や、モダンコントロールではまだサポートされていない機能が必要な場合は、クラシックコントロールを使い続ける必要があります。私のアプリでもDatePickerはクラシックを使い続けており、どうしても角丸が揃わない箇所が出てしまっていました。これを解決したのがコンテナを使ったラップのテクニックです。
コンテナクラスターの全体像はPower Apps コンテナ完全ガイドにまとめています。このテクニックを使いこなすために、コンテナの基本概念を先に押さえておくと理解が深まります。
コンテナで包むと BorderRadius が子要素に伝播する
Power Apps のコンテナには、BorderRadius を設定すると内側の子要素にも角丸が適用される仕組みがあります。つまり、BorderRadius を持たないクラシックコントロールをコンテナに入れて、コンテナ側に BorderRadius を設定すれば、見た目上は角丸になります。
手順はシンプルです。まずコンテナを追加し、角丸を付けたいコントロールをその中に移動します。次にコンテナの BorderRadius プロパティに値を入れます。これだけで、コンテナの形状に沿った角丸がコントロール全体に適用されます。
// コンテナ側の設定例
BorderRadius: 8注意点が一つあります。コンテナの Width と Height をコントロールと完全に一致させてください。コンテナがコントロールより大きかったり小さかったりすると、角丸の位置がずれて見えます。コントロールを親コンテナ（Auto Layout）内に配置している場合は、Flexible Width / Flexible Height を活用してサイズを自動追従させるのが確実です。
変数でアプリ全体の角丸を一元管理する
コンテナごとに BorderRadius を個別に設定していくと、後から「やっぱり角丸を少し小さくしたい」となったときに全コンテナを修正して回らなければなりません。コントロールが50個あれば50回修正が必要です。これは現実的ではないです。
そこで有効なのが、角丸の値を変数として管理する方法です。App.OnStart または App.Formulas で変数を定義し、全コンテナの BorderRadius をその変数で参照するようにします。
// App.OnStart に定義
Set(varRadiusBI, 8);各コンテナの BorderRadius プロパティには固定値ではなくこの変数を指定します。
// 各コンテナの BorderRadius
BorderRadius: varRadiusBIこうしておけば、varRadiusBI の値を変えるだけでアプリ全体の角丸が一括で変わります。デザインの方向性が途中で変わっても、1か所を書き換えるだけで済む。これは実際に開発していてとても助かっています。以前は個別に設定していたのですが、デザインレビューで角丸を変えることになった際に全部修正が必要で、かなり時間を取られました。それ以来、見た目に関わる値はできるだけ変数に逃がすようにしています。
上だけ角丸にするパターン
角丸は4辺すべてに均等に設定するだけではありません。上辺だけ角丸にして下辺はフラットにする、というデザインもよく使います。カードコンポーネントの上部だけ丸くして、下部はボーダーレスにする場合などです。
Power Apps のコンテナには BorderRadius とは別に、RadiusTopLeft・RadiusTopRight・RadiusBottomLeft・RadiusBottomRight という4辺個別のプロパティがあります。これを使えば非対称な角丸が実現できます。
// 上だけ角丸にするパターン
RadiusTopLeft: varRadiusBI
RadiusTopRight: varRadiusBI
RadiusBottomLeft: 0
RadiusBottomRight: 0私のアプリでは cntCard_3rd1〜3 という3枚のKPIカードでこのパターンを使っています。カードの上部は varRadiusBI で丸く、下部は 0 にしてフラットにすることで、カードを並べたときに視覚的にすっきり見えるようにしています。上下の角丸を変えるだけでカードの印象がかなり変わるので、一度試してみることをおすすめします。
モダンコントロールとの使い分け
ここまで説明してきたコンテナラップのテクニックは、あくまでクラシックコントロールを使い続ける場合の対処法です。モダンコントロールに移行できるなら、コンテナでラップする必要はなく、直接 BorderRadius を設定できます。
ではどちらを選ぶべきか。私の判断基準はシンプルで、新規アプリはモダンコントロールを基本にして、クラシックが必要な箇所だけ使う。既存アプリは全面移行のコストが高いのでクラシックのまま維持して、このコンテナラップで角丸を対応する。これで大半のケースはカバーできています。
半分正解、半分間違いという感じですが、モダン一択にはまだなれない現実があります。ComboBox のカスタム候補表示や DatePicker の細かい制御はクラシックにしかない機能もあるので、過信しすぎは禁物です。コントロールの選択と UI 設計の考え方についてはPower Apps の見た目と使いやすさにこだわった設計の記事で詳しく触れています。
まとめ
クラシックコントロールの角丸問題は、コンテナで包む・変数で一元管理する、この2ステップで解決します。個別に設定して回る時代はもう終わりにしましょう。varRadiusBI を一つ定義しておくだけで、アプリのデザイン変更に柔軟に対応できるようになります。地道なようですが、こういった設計の積み重ねがメンテナンスしやすいアプリにつながっていきます。
