PowerApps│図解でわかる!コントロールごとの色設定

アイキャッチ




こんにちは、あんこ先生です。

アプリを作っているとき、コントロールの色設定で悩んだことありませんか?

PowerAppsでは、コントロール別に色の設定項目が異なり、多岐にわたります。

しかし、どこを変更すればどう反映するのかオフィシャルな資料がありません。

・・・なければ作ればいいじゃない!

そこで、今回は「そもそも色ってどうやって変えるの?」、「シェブロンってなに?」といった疑問を解決するために、色の設定方法を図解でわかりやすく紹介します。

この記事を読めば、もう色付けに迷うことはなくなります。

PowerAppsでコントロールの色を設定する方法


色を変更できる箇所

異なるコントロールで、共通して色を変更できる箇所はテキスト、背景、境界線の3つです。

それ以外はコントロールの種類によって異なります。

また、日付の選択で表示されるカレンダーなど、変更できない箇所もあります。

具体的には後述しているコントロール別の色設定解説で確認してください。


操作による色の変化

コントロールはその状態によって、次の4パターンに色を変化させます。

これは、視覚情報からいま何を行っているのかをユーザーに伝えるためです。

パターン別にどんな時に色が変わるのか、変えることができるのかを紹介します。

①基本

何もしていない、標準的な状態です。

テキストはColor、背景はFill、境界線はBorderColorで設定します。

②ポイント

マウスカーソル乗っているときの状態です。

テキストはHoverColor、背景はHoverFill、境界線はHoverBorderColorで設定します。

③押下

クリックまたはタップしたときの状態です。

テキストはPressedColor、背景はPressedFill、境界線はPressedBorderColorで設定します。

④フォーカス

クリックまたはタップしたなど、フォーカスされたときの状態です。

境界線のみFocusedBorderColorで設定します。

⑤無効

表示モードを無効にしたときの状態です。

テキストはDisabledColor、背景はDisabledFill、境界線はDisabledBorderColorで設定します。

色を設定するための関数


RGBA関数│色

赤、緑、青の値で色を返し、透過度も設定できます。

RGBA(赤,緑,青,透過度)

たとえばテキスト入力のColorプロパティにRGBA(255,165,0,1)を指定します。

するとテキストの色がオレンジに設定されます。


RGBA関数│透過度

RGBA関数は、4つ目のパラメータで透過度を指定でき、1以外なら背面の色と混ざり合います。

また、0を指定すると色は見えなくなります。


その他の関数│色

他にもColor列挙体やColorValue関数で設定できます。

ただ、使い慣れているなど特段理由がなければオススメしません。

なぜなら、PowerAppsはデフォルトがRGBA表記であり、表示させられる色も変わらないからです。

そのため、RGBA関数を使うことをオススメします。


ColorFade関数│明度

色の明度を指定して返します。

ColorFade(色,透過度)

明度は完全に黒になる-1から、完全に白になる1まで変化します。

RGBA関数などで指定した色を明るくしたり、暗くしたりできます。

コントロールによっては表示モードが無効の場合に、-50%に設定されています。


色や明度など、複数のコントロールをまとめて設定することもできます。

詳しくはこちらの記事で紹介していますので、読んでみてください。

図解│ラベルコントロールの色設定


基本│Default


ポイント│Hover


押下│Pressed

存在しません。


フォーカス│Focused


無効│Disabled

図解│テキスト入力コントロールの色設定


基本│Default


ポイント│Hover


押下│Pressed


フォーカス│Focused


無効│Disabled

図解│ドロップダウンコントロールの色設定


基本│Default


ポイント│Hover


押下│Pressed


無効│Disabled

図解│コンボボックスコントロールの色設定


基本│Default


展開時│Default


押下│Pressed


フォーカス│Focused


無効│Disabled

図解│日付の選択コントロールの色設定


基本│Default


ポイント│Hover

存在しません。カレンダーは変更不可。


押下│Pressed

存在しません。


フォーカス│Focused


無効│Disabled

図解│リストボックスコントロールの色設定


基本│Default


押下│Pressed


フォーカス│Focused


無効│Disabled

図解│チェックボックスコントロールの色設定


基本│Default


ポイント│Hover


押下│Pressed


フォーカス│Focused


無効│Disabled

図解│ラジオコントロールの色設定


基本│Default


ポイント│Hover


押下│Pressed


フォーカス│Focused


無効│Disabled

図解│スライダーコントロールの色設定


基本│Default


ポイント│Hover


押下│Pressed


フォーカス│Focused


無効│Disabled

色設定のまとめ

今回は色の設定方法を図解で紹介しました。

プロパティだけ見ると理解に苦しみますが、図解するとわかりやすいですね。

別記事で紹介している疑似スタイルシートと絡めて利用すると、ユーザーや気分によって配色を簡単に変更できるので、オススメです。

細かいところまで設定してもアプリの機能性におおきく影響しませんが、自己満足度はすこぶる高まります。

さっそく塗りぬりしちゃいましょう!

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。