キャンバス アプリで最新のテーマを使用する (プレビュー)

[この記事はリリース前のドキュメントであり、変更される場合があります。]

事前に設定されたスタイル セットである最新のテーマを使用すると、アプリの外観を変えることができます。 これらのテーマは、Microsoft の Fluent デザイン言語に基づいており、色、タイポグラフィ、境界線、影などのさまざまなスタイルの側面を変更して、視覚的に美しく一貫性のあるインターフェイスを保証します。 最新のテーマ設定によりカスタマイズ プロセスが合理化され、作成者は統一された一貫した視覚的魅力を備えたアプリを簡単に設計できるようになります。

重要

• これはプレビュー機能です。
• プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。

前提条件

最新のテーマを使用するには、それを有効にする必要があります。 詳細については、アプリの最新のコントロールとテーマを有効にする を参照してください。

注意

最新のコントロールとテーマが有効になっていると、コマンド バーからクラシック テーマを選択できなくなります。 廃止されたクラシック テーマを使用するには、廃止されたクラシック テーマを保持アプリ設定を有効にする必要があります。

テーマを作成する

アプリのスタイル設定に使用できるすぐに使えるテーマがいくつかあります。 よりパーソナライズされた視覚的な美しさを実現するために、独自のテーマをデザインすることもできます。

1. アプリ作成メニューで、> テーマを選択します。
2. テーマ ペインで、テーマの追加を選択します。
3. テーマの作成ダイアログ ボックスに次の情報を入力します:
   • テーマの名称: テーマの名称は一意である必要があります。
   • フォント: テーマが適用されたときにアプリ内のコントロールが使用する既定のフォントを選択します。
   • シード カラー: テーマのベースとなる色を選択するか、色の 16 進数または RGB 表現を手動で入力します。 システムは、アクセシビリティに最適化された 16 スロットのパレットを生成します。
   • 色相/鮮やかさ: 調節モード 生成パレット、特に明るい色を、 色相 と 鮮やかさ スライダーで調整します。 色相 は色の色合いに影響し、 鮮やかさ はパレットの明るさや暗さに影響します。
4. 必要に応じて、新しいテーマの静的プレビューを確認します。 サンプル コントロールを操作して、テーマが休止状態やさまざまな操作状態にどのように適用されるかを確認できます。
5. 作成 を選択します。

新しいテーマが作成され、アプリに適用されます。

最新のテーマの適用

1. アプリ作成メニューで、> テーマを選択します。
2. テーマ ペインで、既定のテーマのひとつを選択します。

モダン テーマを選択すると、テーマのスタイルがアプリ内のコントロールに自動的に適用されます。 このアクションにより、App.Theme プロパティが設定されます。

注意

モダン テーマは、モダン テーマの変数を参照する Power Fx 数式でクラシック コントロールのプロパティを設定することで、クラシック コントロールに影響を与えるようになりました。

テーマの編集

テーマを編集し、カスタム テーマのひとつつ以上のパラメータを変更できます。

1. アプリ作成メニューで、> テーマを選択します。
2. テーマ ペインで、編集するテーマに対応するタイルを見つけて、 オプション > 編集 を選択します。
3. テーマの編集 ペインで、必要に応じてテーマを調整します。

注意

既定のテーマは編集できません。

テーマの削除

アプリでカスタム テーマが不要になった場合は、削除できます。

1. アプリ作成メニューで、> テーマを選択します。
2. テーマ ペインで、編集するテーマを見つけて、(...) オプション > 削除を選択します。
3. 確認ダイアログ ボックスで、テーマの削除 を選択します。

アプリ内にこのテーマを参照する Power Fx 数式がある場合は、数式を手動で更新する必要があります。

注意

既定のテーマは削除できません。

Power Fx でテーマを使用する

モダン テーマ オブジェクトは、メーカーが Power Fx を介して使用できるようになります。 現在アクティブなテーマ オブジェクトは、 App.Theme によって参照でき、アプリに読み込まれたテーマは、RedTheme などのインスタンス名によって参照できます。 テーマの変更に応じて色の選択が確実に適応されるように、App.Theme を使用してテーマ オブジェクトを参照することをお勧めします。

各テーマ オブジェクトには、次の情報が含まれています。

• Name: テーマの名前。
• 色: テーマのブランド ランプを構成する 16 色のコレクション。 このランプの各色は、名前によって個別にアクセスできます。

この画像は、Colors コレクション内のスロット変数と、例として、Steel テーマに対応する色を示しています。

テーマ ブランド ランプを使用すると、Button.Fill = App.Theme.Colors.Primary などの現在のモダン テーマに基づいてクラシック コントロールのスタイルを手動で設定できます。

注意

フィードバックを提供するには、Microsoft にフィードバックを提供する を参照してください。

参照

最新のコントロールのブログ投稿