Power Appsでアプリを作成していて、「塗りつぶされているけれど、きちんと罫線も表示されたアイコンボタンが欲しい」と思ったことはありませんか？

標準の設定だけでは、なかなか理想通りのデザインにならないことがあります。実は、ちょっとした工夫をすることで、見た目も美しい罫線付きの塗りつぶしアイコンを作ることが可能です。

今回は、モダンコントロールのボタンを活用して、罫線付き塗りつぶしアイコンを作成する手順をご紹介します。

基本の塗りつぶしアイコンを作成する

まず、通常の塗りつぶしアイコンの作成から始めましょう。

ステップ1: ボタンコントロールの基本設定

既定のコントロールで塗りつぶしアイコンを作成する場合は、モダンコントロールのボタンコントロールの設定を変更していきます。

以下の設定を順番に変更してください：

1. レイアウト を IconOnlyに変更
2. 種類 を Transparent に変更

ステップ2: アイコンを塗りつぶし状態にする

次に、アイコンの中身を塗りつぶすために、アイコンのスタイル を Filled に変更します。

この設定により、アイコンの中が塗りつぶされる形になります。

ステップ3: 塗りつぶしの色を調整する

フォントの色 を変更することで、塗りつぶしの色が変更できます。好きな色に変更してみましょう。

ここまでで、基本的な塗りつぶしアイコンの完成です。

罫線が追加できない問題と解決策

問題: 通常の方法では罫線が表示されない

この状態で罫線の設定をしても、残念ながらこのアイコンに罫線が引かれることはありません。

解決策: 2つのボタンを重ねる手法

そこで使えるのが、もう一つ同じモダンコントロールのボタンを追加する という方法です。

実装手順: 2つのボタンで罫線付きアイコンを実現

ステップ1: 2つ目のボタンを追加

1つ目のボタンと同じ設定のモダンコントロールのボタンをもう一つ追加します。

ステップ2: ボタンを重ねて配置

2つのボタンを同じ位置に配置して、完全に重ねます。

この時点で、見た目は変わりませんが、実際には2つのボタンが重なっている状態になっています。

ステップ3: 片方をアウトラインに変更

重ねた2つのボタンのうち、片方のアイコンのスタイル を Outlineに変更します。

これにより、Outline のアイコンが罫線として機能します。

ステップ4: 色の調整で完成

最後に、Outlineに変更したボタンコントロールのフォントの色 を黒（または任意の罫線色）に変更して完成です。

完成したアイコンの特徴

この方法で作成したアイコンは以下の特徴があります：

• 内側は指定した色で塗りつぶされている
• 外側にくっきりとした罫線が表示される
• モダンコントロールの機能をそのまま活用できる
• 色の組み合わせを自由に調整可能

コピペで使えるYAMLもご紹介します。

- ButtonCanvas3:
    Control: Button@0.0.45
    Group: Group1
    Properties:
      Appearance: ='ButtonCanvas.Appearance'.Transparent
      BorderStyle: =BorderStyle.None
      BorderThickness: =0
      FontColor: =RGBA(255, 191, 0, 1)
      FontSize: =60
      Height: =172
      Icon: ="Mail"
      IconStyle: ='ButtonCanvas.IconStyle'.Filled
      Layout: ='ButtonCanvas.Layout'.IconOnly
      Text: ="Mail"
      Width: =281
      X: =162
      Y: =387
- ButtonCanvas3_1:
    Control: Button@0.0.45
    Group: Group1
    Properties:
      Appearance: ='ButtonCanvas.Appearance'.Transparent
      BorderStyle: =BorderStyle.None
      BorderThickness: =0
      FontColor: =RGBA(0, 0, 0, 1)
      FontSize: =60
      Height: =172
      Icon: ="Mail"
      IconStyle: ='ButtonCanvas.IconStyle'.Outline
      Layout: ='ButtonCanvas.Layout'.IconOnly
      Text: ="Mail"
      Width: =281
      X: =162
      Y: =387

まとめ

いかがでしたでしょうか？一見複雑そうに見える罫線付き塗りつぶしアイコンも、2つのボタンを重ねるという発想で実現できることがお分かりいただけたと思います。

この手法は、Power Appsでより洗練されたUIを作成したい時に非常に便利です。ぜひ実際のアプリ開発で試してみてください。

参考になれば幸いです！