最新のテーマを使用する

モデル駆動型アプリのための モダンでリフレッシュされた外観を持つモデル駆動型アプリ のユーザーは、Microsoft Fluent 2 デザインシステムに沿った更新されたスタイリングを体験できます。 このモダンでリフレッシュされた外観には新しいテーマ システムが付属しているため、クラシック テーマ は尊重されません。ただし、メーカーは、モダンでリフレッシュされた外観を有効にしているユーザーのために、アプリのヘッダーで使用される色を変更できます。 この記事では、刷新されたモダンな外観で使用できるスタイルの上書きと、それらを組織に実装する方法について説明します。

アプリのヘッダーの色を変更する

アプリでは 刷新されたモダンな外観が有効 になっており、作成者は組織のブランドに合わせてアプリのヘッダーで使用される色を変更できます。 これを実現するには、目的の色を XML リソースにカプセル化し、アプリ設定を使用してこの Web リソースをポイントし、色の変更が期待どおりであることを確認します。

アプリ ヘッダーの色に使用する XML リソースの概要

アプリ ヘッダーのスタイルを変更する最初のステップは、さまざまな色を選択した XML ファイルを作成することです。 その後、AppHeaderColors タグ内で以下の属性を 1 つ以上定義した XML Web リソースを作成します。

• Background – アプリ ヘッダーの背景色。 変更を有効にするには、この要素を定義する必要があります。
• Foreground – アプリ ヘッダーのテキスト色。 これが指定されていない場合、システムは、指定された背景色に対して十分なコントラストを持つ適切な色を計算しようとします。
• BackgroundHover – カーソルを合わせたときのアプリ ヘッダー上のボタンの背景色。 値が指定されていない場合、システムは背景色に基づいて色を計算します。
• ForegroundHover – カーソルを合わせたときのアプリ ヘッダー上のボタンのテキスト色。 値が指定されていない場合、システムは、backgroundHover の色に対して十分なコントラストを持つ適切な色を計算しようとします。
• BackgroundPressed – 押されたときのアプリ ヘッダー上のボタンの背景色。 デフォルトのロジックは、backgroundHover と同じです。
• ForegroundPressed – 押されたときのアプリ ヘッダー上のボタンのテキスト色。 デフォルトのロジックは、foregroundHover と同じです。
• BackgroundSelected – 選択されたときのアプリ ヘッダー上のボタンの背景色。 デフォルトのロジックは、backgroundHover と同じです。
• ForegroundSelected – 選択されたときのアプリ ヘッダー上のボタンのテキスト色。 デフォルトのロジックは、backgroundHover と同じです。

最新のテーマの XML の例

例として、この XML は、アプリ ヘッダーの背景色を緑色、テキストを白色、さまざまなボタンの操作状態の背景色を濃く指定します。 最適な使いやすさを実現するために、各状態に対して異なる色の値を指定することをお勧めします。

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Web リソースを作成する

1. テキスト エディタまたは XML エディタを使用して、Web リソースの作成に使用される XML を保存します。 最新のテーマの XML の例
2. Power Apps にサインインします。
3. 左側のナビゲーション ペインで ソリューション を選択し、新規ソリューション を作成します。
4. 新規 > その他 > Web リソース を選択します。
5. 新しい Web リソース プロパティ ペインで、以下の値を入力します:
   • 表示名: 最新のテーマの XML などの表示名を入力します。
   • 名前。 Web リソースの一意の名前を入力します。
   • 種類: データ (XML)
6. ファイルを選択を選択し、テーマを使用して先ほど作成した XML ファイルを参照して選択します。
7. 保存 を選択します。 このカスタマイズを次のセクションの手順で公開します。

環境内のアプリにカスタム アプリ ヘッダーの色を適用する

色を選択して Web リソースを作成したら、次の手順に従って、新デザイン が有効化された環境内のすべてのアプリでこのアプリヘッダースタイルを有効にします。

1. Web リソースの作成 に使用したソリューションで、既存を追加 > その他 > 設定 を選択します。
2. 検索 ボックスに 上書き と入力し、アプリ ヘッダーの色を上書き を選択して、次へ を選択し、追加 を選択します。
3. ソリューションで アプリ ヘッダーの色を上書き を選択し、コマンドバーで 編集 を選択します。
4. 右側の アプリ ヘッダーの色を上書きの編集 プロパティ ペインで、環境値の設定 を選択し、前に作成した Web リソースの一意の名前を入力します。 Web リソースの発行者の接頭辞を必ず付け、引用を含めないようにしてください。 たとえば、名前はこの例のように contoso_xmlfor-modern-theme となります。
5. 保存 を選択します。
6. コマンド バーで すべてのカスタマイズの公開 を選びます。 (このコマンドは、ソリューション内のコンポーネントが選択されていない場合に表示されます)。

色の例 では、アプリを再生すると、アプリのヘッダーは次のようになります (ブラウザ タブを更新する必要がある場合があります)。

新しいアプリ ヘッダーの色を確認する

新しいアプリ ヘッダーの色を公開した後、すべてのボタンの状態を含むアプリ ヘッダーのビジュアルを検証して、すべてが期待どおりに表示され、アクセシビリティに十分なコントラスト比があることを確認します。 次の色の選択を確認する必要があります:

• 目的の色は、静止時のアプリ ヘッダーと各ボタンの操作状態に対して表示されます。
• 静止状態および各ボタンの操作状態では、前景色と背景色の間に少なくとも 4.5:1 のコントラスト比があります。

参照

刷新されたモダンな外観