こんにちは、あんこ先生です。
アプリを作っているとき、コントロールの色設定で悩んだことありませんか？
PowerAppsでは、コントロール別に色の設定項目が異なり、多岐にわたります。
しかし、どこを変更すればどう反映するのかオフィシャルな資料がありません。
・・・なければ作ればいいじゃない！
そこで、今回は「そもそも色ってどうやって変えるの？」、「シェブロンってなに？」といった疑問を解決するために、色の設定方法を図解でわかりやすく紹介します。
この記事を読めば、もう色付けに迷うことはなくなります。
Contents
PowerAppsでコントロールの色を設定する方法
色を変更できる箇所
異なるコントロールで、共通して色を変更できる箇所はテキスト、背景、境界線の３つです。
それ以外はコントロールの種類によって異なります。
また、日付の選択で表示されるカレンダーなど、変更できない箇所もあります。
具体的には後述しているコントロール別の色設定解説で確認してください。
操作による色の変化
コントロールはその状態によって、次の４パターンに色を変化させます。
これは、視覚情報からいま何を行っているのかをユーザーに伝えるためです。
パターン別にどんな時に色が変わるのか、変えることができるのかを紹介します。
①基本
何もしていない、標準的な状態です。
テキストはColor、背景はFill、境界線はBorderColorで設定します。
②ポイント
マウスカーソル乗っているときの状態です。
テキストはHoverColor、背景はHoverFill、境界線はHoverBorderColorで設定します。
③押下
クリックまたはタップしたときの状態です。
テキストはPressedColor、背景はPressedFill、境界線はPressedBorderColorで設定します。
④フォーカス
クリックまたはタップしたなど、フォーカスされたときの状態です。
境界線のみFocusedBorderColorで設定します。
⑤無効
表示モードを無効にしたときの状態です。
テキストはDisabledColor、背景はDisabledFill、境界線はDisabledBorderColorで設定します。
色を設定するための関数
RGBA関数│色
赤、緑、青の値で色を返し、透過度も設定できます。
RGBA(赤,緑,青,透過度)たとえばテキスト入力のColorプロパティにRGBA(255,165,0,1)を指定します。
するとテキストの色がオレンジに設定されます。
RGBA関数│透過度
RGBA関数は、４つ目のパラメータで透過度を指定でき、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 までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
コメントを残す