次の方法で共有


Windows 11用のデスクトップ アプリでマイカまたはアクリル素材を適用する

Windows 11 の素材は、実際のアーティファクトに似た UX サーフェスに適用される視覚効果です。 マイカやアクリルなどのオクルード素材は、対話型 UI コントロールの下で、基本レイヤーとして使用されます。

マイカは、ユーザーのテーマとデスクトップの壁紙を組み込み、高度にカスタマイズされた外観を作成する不透明な素材です。 マイカは、視覚エフェクトを作成するために背景の壁紙を 1 回しかキャプチャしないため、パフォーマンス向けに設計されており、特にタイトル バー領域で、アプリの基礎レイヤーに適しています。

アクリルは、すりガラスの効果を再現する、半透明の素材です。 これは、ポップアップやコンテキスト メニューなどの、軽量な一時表示サーフェスにのみ使用されます。

この記事では、Windows App SDK/WinUI 3 XAML アプリの基本レイヤーとして Mica または Acrylic を適用する方法について説明します。

  • Win32 アプリで背景資料を使用するには、「Windows 11 用 Win32 デスクトップ アプリの Apply Mica」を参照してください。
  • (ウィンドウの背景ではなく) UI 要素に適用されるアプリ内アクリルについては、「 アプリ内アクリル」を参照してください。

背景素材の使用方法

  • 重要な API: Window.SystemBackdrop プロパティ、MicaBackdrop クラス、DesktopAcrylicBackdrop クラス、SystemBackdropConfiguration クラス

WinUI 3 ギャラリー アプリを開き、システムの背景の動作を確認する

WinUI 3 ギャラリー アイコン WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

マイカまたはアクリル素材をアプリに適用するには、 プロパティを XAML SystemBackdrop (通常は、組み込みの背景の 1 つである MicaBackdrop または DesktopAcrylicBackdrop) に設定します。

これらの要素には、 プロパティがあります。

  • CommandBarFlyoutCommandBar.SystemBackdrop
  • ContentIsland.SystemBackdrop
  • DesktopWindowXamlSource.SystemBackdrop
  • FlyoutBase.SystemBackdrop
  • MenuFlyoutPresenter.SystemBackdrop
  • ポップアップ・システムバックドロップ
  • Window.SystemBackdrop

これらの例では、XAML でシステムの背景を設定する方法を示します。

Mica

マイカは通常、アプリ ウィンドウの背景として使用されます。

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Mica Alt

Mica Alt バリアントを使用するには、 プロパティを に設定します。

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

アクリル

デスクトップアクリルは、ウィンドウの背景として使用することができます。

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

一時的な UI 上のアクリル

アクリルは、ポップアップなどの一時的な UI の背景としても一般的に使用されます。 ポップアップは動的に作成されることが多いため、XAML またはコードでこれを設定できます。

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>
Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

詳細: システムの背景コントローラーを使用する方法

Windows App SDK 1.3 以降では、前のセクションで説明したように、Window.SystemBackdrop プロパティを XAML SystemBackdrop に設定することで、マテリアルを適用できます。 これは、ほとんどのアプリにマテリアルを適用するための推奨される方法です。

この記事の残りの部分では、Composition MicaController API と DesktopAcrylicController API を使用する方法について説明します。これにより、背景の動作をより詳細に制御できます。

アプリで背景素材を使用するには、ISystemBackdropController インターフェイス (MicaController または DesktopAcrylicController) を実装するコントローラーのいずれかを使用できます。 これらのクラスは、システム背景素材のレンダリングと、素材に関するシステム ポリシーの処理の両方を管理します。

背景素材としてマイカを使用するには、MicaController オブジェクトを作成します。 アクリルを使用するには、DesktopAcrylicController オブジェクトを作成します。 セットアップとサポートのコードは、システム背景素材の種類ごとに同じです。

MicaController を作成する

  • C#
  • C++
MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

DesktopAcrylicController を作成する

  • C#
  • C++
DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

コントローラーは、既定でシステムのライト テーマとダーク テーマに反応します。 この動作をオーバーライドするには、コントローラーに次のプロパティを設定します。

  • フォールバックカラー
  • 輝度不透明度
  • 色合い
  • ティント不透明度

コントローラーの 4 つのプロパティのいずれかをカスタマイズした後、関連付けられている SystemBackdropConfiguration.Theme が変更されたときに、既定の Light または Dark 値が適用されなくなります。 これらのプロパティは、新しいテーマに合わせて手動で更新する必要があります。

アプリで背景素材を使用するには、次の項目が必要です。

  • システムのサポート

    アプリが実行されるシステムで、背景素材がサポートされている必要があります。 背景素材が実行時にサポートされていることを確認するには、MicaController.IsSupported または DesktopAcrylicController.IsSupported メソッドを呼び出します。

  • 有効なターゲット

    ICompositionSupportsSystemBackdrop インターフェイスを実装するターゲットを指定する必要があります。 XAML アプリでは、XAML Window がこのインターフェイスを実装しており、背景ターゲットとして使用されます。

  • SystemBackdropConfiguration オブジェクト

    SystemBackdropConfiguration は、システムの背景素材を適切に構成するためのアプリ固有のポリシー情報をシステムの背景コントローラーに提供します。

  • DispatcherQueue オブジェクト

    メイン XAML スレッドで使用可能な Windows.System.DispatcherQueue が必要です。 呼び出しを実行して、存在するかどうか確認します。

例: WinUI アプリでコントローラーで Mica を使用する

この例では、XAML アプリでコントローラーを使用して Mica 背景マテリアルを設定する方法を示します。

ヒント

また、GitHubのプロジェクト例を参照してください。

C#: WinUI ギャラリーの SampleSystemBackdropsWindow

C++/WinRT: Windows App SDK Mica サンプル

  • C#
  • C++
using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()

public sealed partial class MainWindow : Window
{
    MicaController micaController;
    SystemBackdropConfiguration configurationSource;

    public MainWindow()
    {
        this.InitializeComponent();

        TrySetMicaBackdrop(false);
    }

    bool TrySetMicaBackdrop(bool useMicaAlt)
    {
        if (MicaController.IsSupported())
        {
            DispatcherQueue.EnsureSystemDispatcherQueue();

            // Hooking up the policy object.
            configurationSource = new SystemBackdropConfiguration();
            Activated += Window_Activated;
            Closed += Window_Closed;
            ((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;

            // Initial configuration state.
            configurationSource.IsInputActive = true;
            SetConfigurationSourceTheme();

            micaController = new MicaController
            {
                Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
            };

            // Enable the system backdrop.
            // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
            micaController.AddSystemBackdropTarget(
                this.As<ICompositionSupportsSystemBackdrop>());
            micaController.SetSystemBackdropConfiguration(configurationSource);
            return true; // Succeeded.
        }

        return false; // Mica is not supported on this system.
    }

    private void Window_Activated(object sender, WindowActivatedEventArgs args)
    {
        if (configurationSource != null)
            configurationSource.IsInputActive = 
                args.WindowActivationState != WindowActivationState.Deactivated;
    }

    private void Window_Closed(object sender, WindowEventArgs args)
    {
        // Make sure any Mica/Acrylic controller is disposed
        // so it doesn't try to use this closed window.
        micaController?.Dispose();
        micaController = null;
        Activated -= Window_Activated;
        configurationSource = null;
    }

    private void Window_ThemeChanged(FrameworkElement sender, object args)
    {
        if (configurationSource != null)
            SetConfigurationSourceTheme();
    }

    private void SetConfigurationSourceTheme()
    {
        if (configurationSource != null)
            configurationSource.Theme = 
                (SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
    }
}