マイカ素材

[アーティクル]
05/18/2023

マイカは、アプリや設定などの長時間のウィンドウの背景を塗り分け、テーマとデスクトップの壁紙を組み込んだ不透明で動的な素材です。アプリケーションの背景に Mica を適用して、フォーカスのあるウィンドウをいっそう明確にすることで、ユーザーを満足させ、視覚階層を作成し、生産性を向上させることができます。 Mica は、視覚エフェクトを作成するためにデスクトップの壁紙を 1 回サンプリングするだけであり、アプリのパフォーマンスを目的として特に設計されています。マイカは、Windows 11 バージョン 22000 以降で実行中に、WinUI 2 を使用する UWP アプリと Windows App SDK 1.1 以降を使用するアプリで使用できます。

ライトテーマのマイカ
Mica in light theme

ダークテーマでのマイカ
Mica in dark theme

Mica Alt はマイカのバリエーションで、ユーザーのデスクトップ背景色の濃淡が強くなります。 Mica Alt をアプリの背景に適用すると、特にタブ付きのタイトルバーを使用してアプリを作成する場合に、マイカよりも深いビジュアル階層を提供できます。 Mica Alt は、Windows 11 バージョン 22000 以降で実行中に、Windows App SDK 1.1 以降を使用するアプリで使用できます。

これらの画像は、タブ付きのタイトルバーでのマイカと Mica Alt の違いを示しています。最初の画像はマイカを使用し、2 番目の画像は Mica Alt を使用しています。

Screenshot of Mica in a title bar with tabs.

Screenshot of Mica Alt in a title bar with tabs.

マイカまたは Mica Alt をいつ使用するべきか

マイカと Mica Alt は、他のすべてのコンテンツの背後で、アプリケーションの背景に表示される素材です。各素材は、ユーザーのテーマとデスクトップの壁紙を組み込み、高度にカスタマイズされた外観を作成する不透明な素材です。ユーザーが画面上でウィンドウを動かすと、マイカ素材が動的に適応し、アプリケーションの下にある壁紙を使用して豊富な視覚エフェクトを作成します。さらに、この素材は、アプリが非アクティブな場合に中間色に戻ることで、ユーザーが現在のタスクに集中するのに役立ちます。

マイカまた Mica Alt をアプリの基本レイヤーとして適用し、タイトルバー領域の可視性を優先することをお勧めします。より具体的なレイヤーのガイダンスについては、レイヤー化と昇格に関する記事および「マイカを使用したアプリのレイヤー化」を参照してください。

使いやすさと適応性

マイカ素材の外観は、さまざまなデバイスやコンテキストに合うように自動的に対応します。背景の壁紙を 1 回だけキャプチャして視覚エフェクトが作成されるため、パフォーマンスを考慮した設計になっています。

ハイコントラストモードでは、ユーザーにはマイカまたは Mica Alt の代わりに、選択した使い慣れた背景色が引き続き表示されます。さらに、マイカ素材は、次の場合に、単色のフォールバックカラー (マイカの場合は SolidBackgroundFillColorBase、Mica Alt の場合は SolidBackgroundFillColorBaseAlt) として表示されます。

ユーザーが [設定] > [個人用設定] > [色] で透明度をオフにしている。
バッテリー節約機能モードがアクティブになっている。
アプリがローエンドハードウェアで実行されている。
アプリウィンドウがデスクトップで非アクティブ化される。
Windows アプリが Xbox または HoloLens で実行されている。
Windows バージョンが 22000 より前。

マイカを使用したアプリのレイヤー化

標準パターンコンテンツレイヤー
Standard content layer

カードパターンコンテンツレイヤー
Card pattern content layer

マイカは、非アクティブとアクティブの状態があり、微妙なパーソナル化が可能なため、アプリの階層内の基板レイヤーとして最適です。 2 層のレイヤー化と昇格システムに従う場合は、アプリの基本レイヤーとしてマイカを適用し、基本レイヤーの上に配置される追加のコンテンツレイヤーを追加してください。コンテンツレイヤーでは、背景として低不透明度の単色である LayerFillColorDefaultBrush を使用して、その背後にある素材であるマイカを選択する必要があります。推奨されるコンテンツレイヤーパターンは次のとおりです。

標準パターン: 基本レイヤーとは異なる階層的な区別を必要とする大きな領域の隣接した背景。 LayerFillColorDefaultBrush は、WinUI アプリサーフェスのコンテナーの背景 (グリッド、StackPanel、フレームなど) に適用する必要があります。
カードパターン: 複数のセクション化された不連続な UI コンポーネントで設計されたアプリ用のセグメント化カード。 LayerFillColorDefaultBrush を使用したカード UI の定義については、レイヤー化と昇格に関するガイダンスを参照してください。

アプリのウィンドウをシームレスに見えるようにするには、アプリに素材を適用する場合に、マイカがタイトルバーに表示されている必要があります。マイカをタイトルバーに表示するには、アプリをクライアント以外の領域に拡張し、透過的なカスタムタイトルバーを作成します。詳しくは、「タイトルバー」をご覧ください。

次の例では、タイトルバー領域にマイカが表示される NavigationView を使用したレイヤー戦略の一般的な実装を紹介しています。

左側の NavigationView の標準パターン。
上部の NavigationView の標準パターン。
左側の NavigationView のカードパターン。

左側の NavigationView の標準パターン。

既定では、左モードの NavigationView にはコンテンツ領域にコンテンツレイヤーが含まれます。この例では、マイカをタイトルバー領域に拡張し、カスタムタイトルバーを作成します。

Nav View in standard pattern with custom title bar in Left mode

上部の NavigationView の標準パターン

既定では、上部モードの NavigationView にはコンテンツ領域にコンテンツレイヤーが含まれます。この例では、マイカをタイトルバー領域に拡張し、カスタムタイトルバーを作成します。

NavigationView in standard pattern with custom title bar in Top mode

左側の NavigationView のカードパターン

NavigationView を使用してカードパターンに従う場合は、背景と境界線のテーマリソースをオーバーライドして、既定のコンテンツレイヤーを削除する必要があります。次に、コントロールのコンテンツ領域にカードを作成できます。この例では、複数のカードを作成し、マイカをタイトルバー領域に拡張して、カスタムタイトルバーを作成します。カード UI の詳細については、レイヤー化と昇格に関するガイダンスを参照してください。

NavigationView in standard pattern with custom title bar in Left mode

Mica Aｌｔを使用したアプリのレイヤー化

Mica Alt は、アプリの階層内の基盤レイヤーとしてマイカに代わるもので、非アクティブおよびアクティブの状態と繊細なパーソナル化などの同じ機能を備えています。タイトルバー要素とアプリのコマンド領域 (ナビゲーション、メニューなど) のコントラストが必要な場合は、Mica Alt をアプリの基本レイヤーとして適用することをお勧めします。

Mica Alt を使用する一般的なシナリオは、タブ付きのタイトルバーを使用してアプリケーションを作成する場合です。レイヤーと昇格のガイダンスに従うには、Mica Alt をアプリの基本レイヤーとして適用し、ベースレイヤーの上に配置するコマンドレイヤーを追加し、最後にコマンドレイヤーの上に配置する追加のコンテンツレイヤーを追加することをお勧めします。コマンドレイヤーは、その背後にあるマテリアルMica AltをピックアップしLayerOnMicaBaseAltFillColorDefaultBrush、背景として不透明度の低いソリッドカラーを使用します。コンテンツレイヤーは、その下のレイヤーをピックアップしLayerFillColorDefaultBrush、別の不透明度の低いソリッド・カラーを使用します。レイヤーシステムは次のとおりです。

Mica Alt
コマンドレイヤー: ベースレイヤーとの階層的な区別が必要です。 LayerOnMicaBaseAltFillColorDefaultBrushWinUIアプリサーフェスのコマンド領域（MenuBar、ナビゲーション構造など）に適用する必要があります。
コンテンツレイヤー: コマンドレイヤーとは異なる階層的な区別を必要とする大きな領域の隣接した背景。 LayerFillColorDefaultBrushWinUIアプリサーフェスのコンテナ背景（Grids、StackPanels、Framesなど）に適用する必要があります。

アプリのウィンドウをシームレスに見えるようにするには、アプリに素材を適用する場合に、Mica Alt がタイトルバーに表示されている必要があります。 Mica Alt をタイトルバーに表示するには、アプリを非クライアント領域に拡張し、透過的なカスタムタイトルバーを作成します。

Recommendations

背景素材は最背面レイヤーに適用します (ApplicationPageBackgroundThemeBrush が存在する場合は置き換えます)。
推奨マイカを表示する背景レイヤーはすべて "透明" に設定して、マイカが透けて見えるようにします。
アプリケーションで背景素材を 2 回以上を適用しないでください。
UI 要素に対して背景素材を適用しないでください。背景素材は、要素自体には表示されません。 UI 要素とウィンドウの間のすべてのレイヤーが透過的に設定されている場合にのみ表示されます。

マイカの使用方法

Mica は、WinUI 2 を使用する UWP アプリ、または Windows App SDK 1.1 以降を使用するアプリで使用できます。 Mica Alt は、Windows App SDK 1.1 以降を使用するアプリで使用できます。

Windows App SDKでマイカを使用する

Windows App SDKと WinUI 3 を使用する XAML アプリでマイカを使用するには、Window.SystemBackdrop プロパティを MicaBackdrop に設定します。

これらの例では、XAML とコードでこれを行う方法を示します。

Mica

<Window
    ... >

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

</Window>

public MainWindow()
{
    this.InitializeComponent();

    SystemBackdrop = new MicaBackdrop() 
                        { Kind = MicaKind.BaseAlt };
}

Composition MicaController API の使用方法の詳細については、「Windows 11用のデスクトップアプリでマイカまたはアクリルの素材を適用する」を参照してください。

Win32 アプリで背景素材を使用するには、「Windows 11 向け Win32 デスクトップアプリでマイカを適用する」を参照してください。

UWP 用の WinUI 2 でマイカを使用する

重要な API: BackdropMaterial クラス

UWP アプリでマイカを適用するには、BackdropMaterial クラスを使用します。コンテンツ領域全体 (Window など) に適用される XAML コンテンツのルートである XAML 要素に対して、BackdropMaterial 添付プロパティを設定することをお勧めします。アプリに複数のページ間を移動する Frame がある場合は、Frame にこのプロパティを設定する必要があります。それ以外の場合は、アプリの Page でこのプロパティを設定する必要があります。

<Page muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <TextBlock>Hello world</TextBlock>
</Page>

次の例は、前に示した標準レイヤーパターンを実装する方法を示しています。これらの各例では、最後の例に示したのと同じタイトルバー分離コードを使用する必要があります。

例: 左側の NavigationView の標準パターン

<Page
    x:Class="LeftNavView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LeftNavView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <!--This top margin is the height of the custom TitleBar-->
        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
    </Page.Resources>
    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="48"
                Canvas.ZIndex="1" 
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12, 0, 0, 0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>
        <muxc:NavigationView x:Name="NavigationViewControl"
            IsTitleBarAutoPaddingEnabled="False"            
            IsBackButtonVisible="Visible"           
            Header="Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Canvas.ZIndex="0">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
            </muxc:NavigationView.MenuItems>
            <Grid>
                <Frame x:Name="contentFrame">
                    <Grid>
                        <TextBlock Padding="56,16,0,0">Page content!</TextBlock>
                    </Grid>
                </Frame>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>

例: 上部の NavigationView の標準パターン

<Page
    x:Class="TopNavView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TopNavView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>
    </Page.Resources>
    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="32"
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>
            <muxc:NavigationView x:Name="NavigationViewControl"          
            Header="Page Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            PaneDisplayMode="Top">
                <muxc:NavigationView.MenuItems>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
            </muxc:NavigationView.MenuItems>
                <Grid>
                    <Frame x:Name="contentFrame">
                        <Grid>
                            <TextBlock Padding="56,16,0,0">Page content!</TextBlock>
                        </Grid>
                    </Frame>
                </Grid>
            </muxc:NavigationView>
    </Grid>
</Page>

例: 左側の NavigationView のカードパターン

<Page
    x:Class="CardLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CardLayout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <!--This top margin is the height of the custom TitleBar-->
        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
        <Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
        <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent"></SolidColorBrush>
    </Page.Resources>

    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="48"
                Canvas.ZIndex="1" 
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>

        <muxc:NavigationView x:Name="NavigationViewControl"
            IsTitleBarAutoPaddingEnabled="False"            
            IsBackButtonVisible="Visible"           
            Header="Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Canvas.ZIndex="0">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
            </muxc:NavigationView.MenuItems>
            <Grid>
                <Frame x:Name="contentFrame">
                    <StackPanel Orientation="Vertical" Margin="40,16,0,0">
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16" 
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                    </StackPanel>
                </Frame>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>

タイトルバーの分離コード

前の 3 つのアプリレイアウト XAML ページでは、この分離コードを使用して、アプリの状態と可視性に適応するカスタムタイトルバーを作成します。

詳細については、「タイトルバーのカスタマイズ」を参照してください。

public MainPage()
{
    this.InitializeComponent();
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;

    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

    // Hide default title bar.
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    UpdateTitleBarLayout(coreTitleBar);

    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    // For example, when the app moves to a screen with a different DPI.
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;

    //Register a handler for when the window changes focus
    Window.Current.Activated += Current_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;

    // Ensure the custom title bar does not overlap window caption controls
    Thickness currMargin = AppTitleBar.Margin;
    AppTitleBar.Margin = new Thickness(currMargin.Left, currMargin.Top, coreTitleBar.SystemOverlayRightInset, currMargin.Bottom);
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

// Update the TitleBar based on the inactive/active state of the app
private void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
{
    SolidColorBrush defaultForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorPrimaryBrush"];
    SolidColorBrush inactiveForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorDisabledBrush"];

    if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
    {
        AppTitle.Foreground = inactiveForegroundBrush;
    }
    else
    {
        AppTitle.Foreground = defaultForegroundBrush;
    }
}

// Update the TitleBar content layout depending on NavigationView DisplayMode
private void NavigationViewControl_DisplayModeChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewDisplayModeChangedEventArgs args)
{
    const int topIndent = 16;
    const int expandedIndent = 48;
    int minimalIndent = 104;

    // If the back button is not visible, reduce the TitleBar content indent.
    if (NavigationViewControl.IsBackButtonVisible.Equals(Microsoft.UI.Xaml.Controls.NavigationViewBackButtonVisible.Collapsed))
    {
        minimalIndent = 48;
    }

    Thickness currMargin = AppTitleBar.Margin;
    
    // Set the TitleBar margin dependent on NavigationView display mode
    if (sender.PaneDisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top)
    {
        AppTitleBar.Margin = new Thickness(topIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }
    else if (sender.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
    {
        AppTitleBar.Margin = new Thickness(minimalIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }          
    else
    {
        AppTitleBar.Margin = new Thickness(expandedIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }
}

マイカ素材

マイカまたは Mica Alt をいつ使用するべきか

使いやすさと適応性

マイカを使用したアプリのレイヤー化

左側の NavigationView の標準パターン。

上部の NavigationView の標準パターン

左側の NavigationView のカードパターン

Mica Aｌｔを使用したアプリのレイヤー化

Recommendations

マイカの使用方法

Windows App SDKでマイカを使用する

Mica

UWP 用の WinUI 2 でマイカを使用する

例: 左側の NavigationView の標準パターン

例: 上部の NavigationView の標準パターン

例: 左側の NavigationView のカードパターン

タイトルバーの分離コード

フィードバック

その他のリソース

マイカ素材

マイカまたは Mica Alt をいつ使用するべきか

使いやすさと適応性

マイカを使用したアプリのレイヤー化

左側の NavigationView の標準パターン。

上部の NavigationView の標準パターン

左側の NavigationView のカード パターン

Mica Aｌｔ を使用したアプリのレイヤー化

Recommendations

マイカの使用方法

Windows App SDKでマイカを使用する

Mica

UWP 用の WinUI 2 でマイカを使用する

例: 左側の NavigationView の標準パターン

例: 上部の NavigationView の標準パターン

例: 左側の NavigationView のカード パターン

タイトル バーの分離コード

関連記事

フィードバック

その他のリソース

左側の NavigationView のカードパターン

Mica Aｌｔを使用したアプリのレイヤー化

例: 左側の NavigationView のカードパターン

タイトルバーの分離コード