こんにちは、あんこ先生です。
アプリを作っているとき、コントロールの色設定で悩んだことありませんか?
PowerAppsでは、コントロール別に色の設定項目が異なり、多岐にわたります。
しかし、どこを変更すればどう反映するのかオフィシャルな資料がありません。
・・・なければ作ればいいじゃない!
そこで、今回は「そもそも色ってどうやって変えるの?」、「シェブロンってなに?」といった疑問を解決するために、色の設定方法を図解でわかりやすく紹介します。
この記事を読めば、もう色付けに迷うことはなくなります。
Contents
PowerAppsでコントロールの色を設定する方法
色を変更できる箇所
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-95.png?resize=728%2C401&ssl=1)
異なるコントロールで、共通して色を変更できる箇所はテキスト、背景、境界線の3つです。
それ以外はコントロールの種類によって異なります。
また、日付の選択で表示されるカレンダーなど、変更できない箇所もあります。
具体的には後述しているコントロール別の色設定解説で確認してください。
操作による色の変化
コントロールはその状態によって、次の4パターンに色を変化させます。
これは、視覚情報からいま何を行っているのかをユーザーに伝えるためです。
パターン別にどんな時に色が変わるのか、変えることができるのかを紹介します。
①基本
何もしていない、標準的な状態です。
テキストはColor、背景はFill、境界線はBorderColorで設定します。
②ポイント
マウスカーソル乗っているときの状態です。
テキストはHoverColor、背景はHoverFill、境界線はHoverBorderColorで設定します。
③押下
クリックまたはタップしたときの状態です。
テキストはPressedColor、背景はPressedFill、境界線はPressedBorderColorで設定します。
④フォーカス
クリックまたはタップしたなど、フォーカスされたときの状態です。
境界線のみFocusedBorderColorで設定します。
⑤無効
表示モードを無効にしたときの状態です。
テキストはDisabledColor、背景はDisabledFill、境界線はDisabledBorderColorで設定します。
色を設定するための関数
RGBA関数│色
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-96.png?resize=728%2C65&ssl=1)
赤、緑、青の値で色を返し、透過度も設定できます。
RGBA(赤,緑,青,透過度)
たとえばテキスト入力のColorプロパティにRGBA(255,165,0,1)を指定します。
するとテキストの色がオレンジに設定されます。
RGBA関数│透過度
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-97.png?resize=309%2C280&ssl=1)
RGBA関数は、4つ目のパラメータで透過度を指定でき、1以外なら背面の色と混ざり合います。
また、0を指定すると色は見えなくなります。
その他の関数│色
他にもColor列挙体やColorValue関数で設定できます。
ただ、使い慣れているなど特段理由がなければオススメしません。
なぜなら、PowerAppsはデフォルトがRGBA表記であり、表示させられる色も変わらないからです。
そのため、RGBA関数を使うことをオススメします。
ColorFade関数│明度
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-98.png?resize=728%2C58&ssl=1)
色の明度を指定して返します。
ColorFade(色,透過度)
明度は完全に黒になる-1から、完全に白になる1まで変化します。
RGBA関数などで指定した色を明るくしたり、暗くしたりできます。
コントロールによっては表示モードが無効の場合に、-50%に設定されています。
色や明度など、複数のコントロールをまとめて設定することもできます。
詳しくはこちらの記事で紹介していますので、読んでみてください。
図解│ラベルコントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-100.png?resize=728%2C243&ssl=1)
ポイント│Hover
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-101.png?resize=728%2C244&ssl=1)
押下│Pressed
存在しません。
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-102.png?resize=516%2C174&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-103.png?resize=728%2C224&ssl=1)
図解│テキスト入力コントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-105.png?resize=728%2C243&ssl=1)
ポイント│Hover
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-106.png?resize=728%2C244&ssl=1)
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-104.png?resize=728%2C227&ssl=1)
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-107.png?resize=506%2C159&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-108.png?resize=728%2C224&ssl=1)
図解│ドロップダウンコントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-109.png?resize=728%2C455&ssl=1)
ポイント│Hover
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-110.png?resize=509%2C166&ssl=1)
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-111.png?resize=728%2C227&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-112.png?resize=728%2C190&ssl=1)
図解│コンボボックスコントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-116.png?resize=728%2C198&ssl=1)
展開時│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-117.png?resize=728%2C474&ssl=1)
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-119.png?resize=728%2C227&ssl=1)
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-118.png?resize=498%2C153&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-120.png?resize=728%2C190&ssl=1)
図解│日付の選択コントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-113.png?resize=728%2C211&ssl=1)
ポイント│Hover
存在しません。カレンダーは変更不可。
押下│Pressed
存在しません。
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-114.png?resize=728%2C219&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-115.png?resize=728%2C196&ssl=1)
図解│リストボックスコントロールの色設定
基本│Default
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-138.png?resize=728%2C441&ssl=1)
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-139.png?resize=501%2C447&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-137.png?resize=728%2C432&ssl=1)
図解│チェックボックスコントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-135.png?resize=728%2C244&ssl=1)
ポイント│Hover
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-136.png?resize=728%2C221&ssl=1)
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-133.png?resize=728%2C252&ssl=1)
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-134.png?resize=500%2C151&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-132.png?resize=728%2C269&ssl=1)
図解│ラジオコントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-126.png?resize=728%2C264&ssl=1)
ポイント│Hover
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-128.png?resize=667%2C184&ssl=1)
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-130.png?resize=628%2C200&ssl=1)
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-129.png?resize=434%2C203&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-131.png?resize=728%2C264&ssl=1)
図解│スライダーコントロールの色設定
基本│Default
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-125.png?resize=723%2C213&ssl=1)
ポイント│Hover
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-124.png?resize=687%2C207&ssl=1)
押下│Pressed
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-122.png?resize=728%2C246&ssl=1)
フォーカス│Focused
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-123.png?resize=514%2C140&ssl=1)
無効│Disabled
![](https://i0.wp.com/anko7793.com/wp-content/uploads/2022/04/image-121.png?resize=728%2C223&ssl=1)
色設定のまとめ
今回は色の設定方法を図解で紹介しました。
プロパティだけ見ると理解に苦しみますが、図解するとわかりやすいですね。
別記事で紹介している疑似スタイルシートと絡めて利用すると、ユーザーや気分によって配色を簡単に変更できるので、オススメです。
細かいところまで設定してもアプリの機能性におおきく影響しませんが、自己満足度はすこぶる高まります。
さっそく塗りぬりしちゃいましょう!
コメントを残す