コントロールにブランドを適用する

  • 6 分

組み込みの Microsoft Power Apps テーマがアプリの意図した外観と一致しない場合、多くのコントロール プロパティをカスタマイズできます。 Fill、HoverColor、BorderColor などのプロパティを調整すると、コントロールの外観が大きく変わります。 加えて、Power Apps ではカスタム フォント構成がサポートされます。

Power Apps では、複数の色入力方法を使用できます。 Color.[your selected color] を介して、RGBA 値、16 進コード、または標準の HTML 色名を使用して色を指定できます。 これらのカスタム カラー値をアプリ全体で再利用できます。 次の一覧では、コントロールの最も一般的な色関連プロパティについて説明します。

一般的なプロパティ

これらは、コントロールが操作されていないときに適用されます。

  • Fill - コントロールの背景色

  • Color - テキストの色

  • BorderColor - コントロールの境界線の色

  • BorderStyle - 境界線のスタイル (実線、破線、点線、なし)

Hover プロパティ

これらのプロパティは、ユーザーがマウスでコントロールをポイントしたときに有効になります。

  • HoverFill - カーソルを合わせたときの背景色

  • HoverColor - カーソルを合わせたときのフォントの色

Disabled プロパティ

これらは、コントロールの DisplayMode が Disabled に設定されているときに適用されます。 既定では、Power Apps は、コントロールは存在するが現在は対話型ではないことを示すため、薄い灰色の配色を使用します。

  • DisabledFill - 無効にしたときの背景色

  • DisabledColor - 無効にしたときのテキストの色

テーマによって制御される色設定

一部の色の設定は変更できず、その選択したテーマに固有のものです。 その例として日付の選択コントロールが挙げられます。

アプリに日付の選択コントロールを追加すると、フォントの Color プロパティ、BorderColor、BorderStyle、BorderThickness、および Fill の色を変更するオプションがあることがわかります。 これらのオプションは、すべてコマンド バー インターフェイスで使用できます。

式 (fx) 入力フィールドで、これらを含むさまざまなプロパティを調整できます。 変更できるプロパティには IconBackground や IconFill (カレンダー アイコンの色とフォント) などがあります。 ただし、プレビュー モードでは、カレンダーの内部カラーはテーマによって制御されたままになります。

以下の日付の選択コントロールの画像では、Color をテキストを赤色で表示するように設定し、BorderColor を緑色に (さらに BorderStyle を破線に) 調整し、IconBackground を緑色に変更しました。 アプリをプレビュー モードに設定すると、カレンダーの色として、現在アプリに適用されている青色のテーマが引き続き表示されます。

日付の選択を示すスクリーンショット。

Font プロパティ

テキストを表示するコントロールはすべて Font プロパティをサポートします。 コマンド バーには、Power Apps でサポートされている 14 個の標準フォントのドロップダウンが表示されます。 また、サポートされている任意のフォントの名前を手動で入力することもできます。 たとえば、Algerian フォントを使用するには、Font プロパティに "Algerian" と入力します。

Font プロパティのスクリーンショット。

アプリ全体にカスタム ブランドを適用する

Power Apps では色がデータ型として認識されます。 色またはフォントを変数として定義し、アプリ全体で参照できます。 推奨されるアプローチとして、ツリー ビュー パネルでアプリを選択したときにアクセスできる名前付きの数式を使用できます。

Contoso Coffee Machines アプリのブランド カラーを定義するには、次のようにします。

  1. "Home Screen" のツリー ビュー パネルでアプリを選択します。 式ドロップダウンにプロパティ StartScreen プロパティが表示されます。

    App および StartScreen プロパティが強調表示されたツリー ビューのスクリーンショット。

  2. プロパティ ドロップダウンを開き、Formulas を検索/選択します。

    Formulas プロパティにフォーカスが置かれているプロパティ ドロップダウンのスクリーンショット。

  3. Contoso Electronics のブランド カラーは、濃い青緑、明るい青緑、白の 3 色で構成されています。 Power Apps には白が既に定義されているため、残りの 2 色を定義するだけで済みます。 これらの色を Power Apps では次のように定義します。

    nfBrandingLight = RGBA(3, 131, 135, 1);

    nfBrandingDark = ColorValue("#334A5F");

    ここで、nf は "名前付き式" を表します。 これらの値を、色が指定されているアプリ全体で使用できるようになりました。

    数式バーに Power Fx の色の式が表示された Formulas プロパティのスクリーンショット。

  4. アプリでは、ヘッダーの四角形の Fill プロパティを nfBrandingDark に設定します。

  5. ボタン コントロールの Fill プロパティを nfBrandingLight に設定します。

再利用を簡単にするため、コントロールの外観がブランドと一致したら、それを非表示の画面にコピーし、アプリ全体でテンプレートとして使用します。