Share via


Matériau Mica

Mica est un nouveau matériau opaque et dynamique qui incorpore le thème et la papier peint du Bureau pour peindre l’arrière-plan des fenêtres à longue durée de vie, comme les applications et les paramètres. Vous pouvez appliquer le matériau Mica au fond de votre application pour faire plaisir aux utilisateurs et créer une hiérarchie visuelle, qui facilite la productivité, en permettant de voir quelle est la fenêtre active. Le matériau Mica est spécifiquement conçu pour les performances de l’application, car il échantillonne une seule fois le papier peint du Bureau pour créer sa visualisation. Mica est disponible pour les applications UWP qui utilisent WinUI 2 et les applications qui utilisent le SDK d’application Windows 1.1 ou ultérieur, tout en s’exécutant sur Windows 11 version 22000 ou ultérieure.

hero image

Mica dans le thème Clair
Mica in light theme

Mica dans le thème Foncé
Mica in dark theme

Mica Alt est une variante de Mica, avec une teinte plus prononcée de la couleur d’arrière-plan du Bureau de l’utilisateur. Vous pouvez appliquer Mica Alt à la toile de fond de votre application pour fournir une hiérarchie visuelle plus profonde que Mica, en particulier lors de la création d’une application avec une barre de titre à onglets. Mica Alt est disponible pour les applications qui utilisent le SDK d’application Windows 1.1 ou ultérieur, tout en s’exécutant sur Windows 11 version 22000 ou ultérieure.

Ces images montrent la différence entre Mica et Mica Alt dans une barre de titre avec des onglets. La première image utilise Mica, et la deuxième Mica Alt.

Screenshot of Mica in a title bar with tabs.

Screenshot of Mica Alt in a title bar with tabs.

Quand utiliser Mica ou Mica Alt

Mica et Mica Alt sont des matériaux qui apparaissent sur la toile de fond de votre application, derrière tout autre contenu. Chaque matériau est opaque, et intègre le thème et le papier-peint de l’utilisateur pour créer une apparence très personnalisée. Lorsque l’utilisateur déplace la fenêtre sur l’écran, le matériau Mica s’adapte dynamiquement pour créer une visualisation enrichie à l’aide du papier peint sous l’application. En outre, le matériau aide les utilisateurs à se concentrer sur la tâche actuelle en revenant à une couleur neutre lorsque l’application est inactive.

Nous vous recommandons d’appliquer Mica ou Mica Alt comme couche de base de votre application, et de donner la priorité à la visibilité dans la zone de la barre de titre. Pour obtenir des conseils plus spécifiques sur la superposition, consultez Superposition et élévation et Superposition d’application avec Mica.

Convivialité et capacité d’adaptation

Les matériaux Mica adaptent automatiquement leur apparence à une grande variété d’appareils et de contextes. Ils sont conçus pour de bonnes performances, car ils capturent le papier peint d’arrière-plan une seule fois pour créer leurs visualisations.

En mode Contraste élevé, les utilisateurs continuent de voir la couleur d’arrière-plan familière de leur choix à la place de Mica ou de Mica Alt. En outre, les matériaux Mica apparaissent avec une couleur par défaut unie (SolidBackgroundFillColorBase pour Mica, SolidBackgroundFillColorBaseAlt pour Mica Alt) quand :

  • L’utilisateur désactive la transparence dans Paramètres > Personnalisation > Couleur.
  • Le mode Économiseur de batterie est activé.
  • L’application est exécutée sur du matériel bas de gamme.
  • Une fenêtre d’application sur le Bureau se désactive.
  • L’application Windows s’exécute sur Xbox ou HoloLens.
  • La version de Windows est antérieure à 22000.

Superposition d’application avec Mica

Couche de contenu de modèle Standard
Standard content layer

Couche de contenu de modèle Carte
Card pattern content layer

Mica est idéal comme couche de base dans la hiérarchie de votre application en raison de ses états inactifs et actifs, et de sa personnalisation avancée. Pour suivre le système de Superposition et élévation à deux couches, nous vous encourageons à appliquer Mica comme couche de base de votre application et à ajouter une couche de contenu supplémentaire par-dessus la couche de base. La couche de contenu doit récupérer le matériau qui est derrière elle, Mica, en utilisant comme arrière-plan LayerFillColorDefaultBrush, une couleur unie à faible opacité. Nos modèles de couche de contenu recommandés sont les suivants :

  • Modèle Standard : un arrière-plan contigu pour les grandes zones qui ont besoin d’une différenciation hiérarchique distincte de la couche de base. LayerFillColorDefaultBrush doit être appliqué aux arrière-plans des conteneurs de vos surfaces d’application WinUI (par exemple les grilles, les StackPanels, les frames, etc.).
  • Modèle Carte : des cartes segmentées pour les applications qui sont conçues avec plusieurs composants d’interface utilisateur sectionnés et discontinus. Pour obtenir la définition de l’interface utilisateur de carte en utilisant LayerFillColorDefaultBrush, consultez les instructions de Superposition et élévation.

Pour donner à la fenêtre de votre application un aspect homogène, Mica doit être visible dans la barre de titre si vous choisissez d’appliquer le matériau à votre application. Vous pouvez afficher Mica dans la barre de titre en étendant votre application dans la zone non cliente et en créant une barre de titre personnalisée transparente. Pour plus d’informations, consultez Barre de titre.

Les exemples suivants illustrent les implémentations courantes de la stratégie de superposition avec NavigationView, où Mica est visible dans la zone de la barre de titre.

  • Modèle Standard dans NavigationView - Gauche.
  • Modèle Standard dans NavigationView - Haut.
  • Modèle Carte dans NavigationView - Gauche.

Modèle Standard dans NavigationView - Gauche

Par défaut, NavigationView en mode Gauche inclut la couche de contenu dans sa zone de contenu. Cet exemple étend Mica dans la zone de la barre de titre et crée une barre de titre personnalisée.

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

Modèle Standard dans NavigationView - Haut

Par défaut, NavigationView en mode Haut inclut la couche de contenu dans sa zone de contenu. Cet exemple étend Mica dans la zone de la barre de titre et crée une barre de titre personnalisée.

NavigationView in standard pattern with custom title bar in Top mode

Modèle Carte dans NavigationView - Gauche

Pour suivre le modèle Carte en utilisant une NavigationView, vous devez supprimer la couche de contenu par défaut en remplaçant les ressources d’arrière-plan et de thème de bordure. Ensuite, vous pouvez créer les cartes dans la zone de contenu du contrôle. Cet exemple crée plusieurs cartes, étend Mica dans la zone de la barre de titre et crée une barre de titre personnalisée. Pour plus d’informations sur l’interface utilisateur de carte, consultez les instructions de Superposition et élévation.

NavigationView in standard pattern with custom title bar in Left mode

Superposition d’application avec Mica Alt

Mica Alt est une alternative à Mica en tant que couche de base dans la hiérarchie de votre application avec les mêmes fonctionnalités, comme les états inactifs et actifs, et la personnalisation avancée. Nous vous encourageons à appliquer Mica Alt comme couche de base de votre application quand vous avez besoin d’un contraste entre les éléments de la barre de titre et les zones de commande de votre application (par exemple la navigation, les menus).

Un scénario courant d’utilisation de Mica Alt est le cas où vous créez une application avec une barre de titre à onglets. Pour suivre les instructions de Superposition et élévation, nous vous encourageons à appliquer Mica Alt comme couche de base de votre application, à ajouter une couche de commande par-dessus la couche de base et enfin à ajouter une couche de contenu supplémentaire par-dessus la couche de commande. La couche de commande doit reprendre le matériau situé derrière lui, Mica Alt, en utilisant le LayerOnMicaBaseAltFillColorDefaultBrush, une couleur unie de faible opacité, comme arrière-plan. La couche de contenu doit reprendre les calques situés en dessous de lui, en utilisant le LayerFillColorDefaultBrush, une autre couleur unie de faible opacité. Le système des couches est le suivant :

  • Mica Alt
  • Couche de commande : nécessite une différenciation hiérarchique distincte de la couche de base. Le LayerOnMicaBaseAltFillColorDefaultBrush doit être appliqué aux zones dominantes des surfaces de votre application WinUI (par exemple, MenuBar, la structure de navigation, etc.)
  • Couche de contenu : un arrière-plan contigu pour les grandes zones qui ont besoin d’une différenciation hiérarchique distincte de la couche de commande. Le LayerFillColorDefaultBrush doit être appliqué aux arrière-plans des conteneurs des surfaces de votre application WinUI (par exemple, les grilles, les StackPanels, les cadres, etc.)

Pour donner à la fenêtre de votre application un aspect homogène, Mica Alt doit être visible dans la barre de titre si vous choisissez d’appliquer le matériau à votre application. Vous pouvez afficher Mica Alt dans la barre de titre en étendant votre application dans la zone non cliente et en créant une barre de titre personnalisée transparente.

Recommandations

  • Appliquez le matériau de toile de fond à la couche la plus en arrière (en remplaçant ApplicationPageBackgroundThemeBrush s’il est présent).
  • Définissez toutes les couches d’arrière-plan où vous voulez voir Mica sur transparent pour que Mica s’affiche à travers celles-ci.
  • N’appliquez pas un matériau de toile de fond plusieurs fois dans une application.
  • N’appliquez pas un matériau de toile de fond à un élément d’interface utilisateur. Le matériau de toile de fond n’apparaîtra pas sur l’élément lui-même. Il apparaîtra seulement si toutes les couches entre l’élément d’interface utilisateur et la fenêtre sont définies sur transparent.

Comment utiliser Mica

Vous pouvez utiliser Mica dans les applications UWP qui utilisent WinUI 2, ou dans les applications qui utilisent le SDK d’application Windows 1.1 ou ultérieur. Vous pouvez utiliser Mica Alt dans les applications qui utilisent le SDK d’application Windows 1.1 ou ultérieur.

Utiliser Mica avec le SDK d’application Windows

Pour utiliser Mica dans une application XAML qui utilise le SDK d’application Windows et WinUI 3, définissez la propriété Window.SystemBackdrop sur MicaBackdrop.

Ces exemples montrent comment procéder en XAML et dans le code.

Mica

<Window
    ... >

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

</Window>
public MainWindow()
{
    this.InitializeComponent();

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

Pour plus d’informations sur l’utilisation des API MicaController de composition, consultez Appliquer des matériaux Mica ou Acrylic dans des applications de bureau pour Windows 11.

Pour utiliser des matériaux de toile de fond dans une application Win32, consultez Appliquer Mica dans les applications de bureau Win32 pour Windows 11.

Utiliser Mica avec WinUI 2 pour UWP

API importantes : classe BackdropMaterial

Vous pouvez appliquer Mica dans une application UWP avec la classe BackdropMaterial. Nous vous recommandons de définir la propriété attachée BackdropMaterial sur un élément XAML qui est la racine de votre contenu XAML, car elle va s’appliquer à l’ensemble de la région du contenu (par exemple une fenêtre). Si votre application a un frame qui navigue sur plusieurs pages, vous devez définir cette propriété sur le frame. Sinon, vous devez définir cette propriété sur la page de votre application.

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

Les exemples suivants montrent comment implémenter les modèles de superposition Standard montrés précédemment. Chacun de ces exemples utilise et nécessite le même code-behind de la barre de titre, montré dans le dernier exemple.

Exemple : Modèle Standard dans NavigationView - Gauche

Par défaut, NavigationView en mode Gauche inclut la couche de contenu dans sa zone de contenu. Cet exemple étend Mica dans la zone de la barre de titre et crée une barre de titre personnalisée.

<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>

Exemple : Modèle Standard dans NavigationView - Haut

Par défaut, NavigationView en mode Haut inclut la couche de contenu dans sa zone de contenu. Cet exemple étend Mica dans la zone de la barre de titre et crée une barre de titre personnalisée.

<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>

Exemple : Modèle Carte dans NavigationView - Gauche

Pour suivre le modèle Carte en utilisant une NavigationView, vous devez supprimer la couche de contenu par défaut en remplaçant les ressources d’arrière-plan et de thème de bordure. Ensuite, vous pouvez créer les cartes dans la zone de contenu du contrôle. Cet exemple crée plusieurs cartes, étend Mica dans la zone de la barre de titre et crée une barre de titre personnalisée. Pour plus d’informations sur l’interface utilisateur de carte, consultez les instructions de Superposition et élévation.

<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>

Code-behind de la barre de titre

Les trois pages XAML de disposition d’application précédentes utilisent ce code-behind pour créer une barre de titre personnalisée adaptative à l’état et à la visibilité de l’application.

Pour plus d’informations, consultez Personnalisation de la barre de titre.

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);
    }
}