Share via


Materiale di mica

Mica è un materiale opaco e dinamico che incorpora temi e sfondi del desktop per dipingere lo sfondo di finestre di lunga durata come app e impostazioni. Applicando Mica allo sfondo dell'applicazione, è possibile migliorare l'esperienza degli utenti, creare una gerarchia visiva e rendere più evidente quale finestra è attiva, favorendo la produttività. Mica è stato progettato appositamente per ottimizzare le prestazioni delle app, in quanto campiona lo sfondo del desktop una sola volta per creare la visualizzazione. Mica è disponibile per le app UWP che utilizzano WinUI 2 e per le app che utilizzano Windows App SDK 1.1 o successivo e che girano su Windows 11 versione 22000 o successiva.

hero image

Mica in tema di luce
Mica in light theme

Mica in tema scuro
Mica in dark theme

Mica Alt è una variante di Mica, con una tinta più forte del colore di sfondo del desktop dell'utente. Puoi applicare Mica Alt allo sfondo della tua app per fornire una gerarchia visiva più profonda di Mica, soprattutto quando crei un'app con una barra del titolo a schede. Mica Alt è disponibile per le app che utilizzano Windows App SDK 1.1 o successivo e che girano su Windows 11 versione 22000 o successiva.

Queste immagini mostrano la differenza tra Mica e Mica Alt in una barra del titolo con schede. La prima immagine utilizza Mica e la seconda utilizza Mica Alt.

Screenshot of Mica in a title bar with tabs.

Screenshot of Mica Alt in a title bar with tabs.

Quando usare Mica o Mica Alt

Mica e Mica Alt sono materiali che appaiono sullo sfondo della tua applicazione, dietro a tutti gli altri contenuti. Ogni materiale è opaco e incorpora il tema e lo sfondo del desktop dell'utente per creare un aspetto altamente personalizzato. Quando l'utente sposta la finestra sullo schermo, il materiale Mica si adatta dinamicamente per creare una visualizzazione avanzata usando lo sfondo sotto l'applicazione. Inoltre, il materiale aiuta gli utenti a concentrarsi sull'attività corrente eseguendo il fallback a un colore neutro quando l'app è inattiva.

Ti consigliamo di applicare Mica o Mica Alt come livello di base della tua applicazione e di dare priorità alla visibilità nell'area della barra del titolo. Per una guida più specifica sulla stratificazione, consulta Stratificazione e elevazione e Stratificazione con Mica.

Usabilità e adattamento

I materiali Mica adattano automaticamente il loro aspetto a un'ampia varietà di dispositivi e contesti. Sono progettati per essere performanti, in quanto acquisiscono lo sfondo una sola volta per creare le loro visualizzazioni.

In modalità Alto Contrasto, gli utenti continuano a vedere il noto colore di sfondo di loro scelta al posto di Mica o Mica Alt. Inoltre, i materiali Mica appariranno come un colore di ripiego solido (SolidBackgroundFillColorBase per Mica, SolidBackgroundFillColorBaseAlt per Mica Alt) quando:

  • L'utente disattiva la trasparenza in Impostazioni > Personalizzazione > Colore.
  • La modalità Risparmio batteria è attivata.
  • L'applicazione funziona su hardware di fascia bassa.
  • La finestra di un'applicazione sul desktop si disattiva.
  • L'applicazione per Windows è in esecuzione su Xbox o HoloLens.
  • La versione di Windows è inferiore a 22000.

Stratificazione di applicazioni con Mica

Livello di contenuto del modello standard
Standard content layer

Livello di contenuto del modello di carta
Card pattern content layer

Mica è ideale come livello base nella gerarchia della tua app grazie ai suoi stati inattivi e attivi e alla sua sottile personalizzazione. Per seguire il sistema a due livelli Layering e Elevation , ti invitiamo ad applicare Mica come livello di base della tua applicazione e ad aggiungere un ulteriore livello di contenuto che si posiziona sopra il livello di base. Il livello di contenuto deve riprendere il materiale dietro di esso, Mica, utilizzando come sfondo il LayerFillColorDefaultBrush, un colore solido a bassa opacità. I nostri modelli di livelli di contenuto consigliati sono:

  • Modello standard: Uno sfondo contiguo per aree di grandi dimensioni che necessitano di una differenziazione gerarchica distinta dallo strato di base. Il LayerFillColorDefaultBrush deve essere applicato agli sfondi dei contenitori delle superfici dell'applicazione WinUI (ad esempio Griglie, StackPanel, Cornici, ecc.).
  • Schema della carta: Schede segmentate per le app progettate con componenti dell'interfaccia utente multipli e discontinui. Per la definizione dell'interfaccia utente della scheda utilizzando il LayerFillColorDefaultBrush, consulta la guida Layering and Elevation .

Per dare alla finestra della tua applicazione un aspetto omogeneo, Mica dovrebbe essere visibile nella barra del titolo se scegli di applicare il materiale alla tua applicazione. Puoi mostrare Mica nella barra del titolo estendendo la tua applicazione nell'area non client e creando una barra del titolo personalizzata trasparente. Per maggiori informazioni, vedi Barra del titolo.

I seguenti esempi mostrano le implementazioni più comuni della strategia di stratificazione con NavigationView dove Mica è visibile nell'area della barra del titolo.

  • Modello standard nella NavigationView sinistra.
  • Modello standard in Top NavigationView.
  • Schema della scheda nella NavigationView di sinistra.

Modello standard nella NavigationView sinistra.

Per impostazione predefinita, la NavigationView in modalità Left include il livello di contenuto nella sua area di contenuto. Questo esempio estende Mica nell'area della barra del titolo e crea una barra del titolo personalizzata.

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

Modello standard in Top NavigationView

Per impostazione predefinita, la NavigationView in modalità Top include il livello di contenuto nella sua area di contenuto. Questo esempio estende Mica nell'area della barra del titolo e crea una barra del titolo personalizzata.

NavigationView in standard pattern with custom title bar in Top mode

Schema della scheda nella NavigationView di sinistra.

Per seguire lo schema a schede utilizzando una NavigationView dovrai rimuovere il livello di contenuto predefinito sovrascrivendo le risorse del tema dello sfondo e del bordo. Poi, puoi creare le schede nell'area del contenuto del controllo. Questo esempio crea diverse schede, estende Mica nell'area della barra del titolo e crea una barra del titolo personalizzata. Per maggiori informazioni sull'UI delle carte, consulta la guida Layering e Elevation .

NavigationView in standard pattern with custom title bar in Left mode

Stratificazione delle app con Mica Alt

Mica Alt è un'alternativa a Mica come livello di base nella gerarchia della tua app, con le stesse caratteristiche come gli stati inattivi e attivi e una sottile personalizzazione. Ti invitiamo ad applicare Mica Alt come livello di base della tua applicazione quando hai bisogno di un contrasto tra gli elementi della barra del titolo e le aree di comando della tua applicazione (ad es. navigazione, menu).

Uno scenario comune per l'utilizzo di Mica Alt è la creazione di un'applicazione con una barra del titolo a schede. Per seguire le indicazioni di Layering e Elevation ti invitiamo ad applicare Mica Alt come livello di base della tua applicazione, ad aggiungere un livello di comando che si trova sopra il livello di base e infine ad aggiungere un ulteriore livello di contenuto che si trova sopra il livello di comando. Il livello di comando deve riprendere il materiale dietro di esso, Mica Alt, utilizzando come sfondo LayerOnMicaBaseAltFillColorDefaultBrush, un colore solido a bassa opacità. Il livello del contenuto dovrebbe riprendere i livelli sottostanti, utilizzando il sito LayerFillColorDefaultBrush, un altro colore solido a bassa opacità. Il sistema di livelli è il seguente:

  • Mica Alt
  • Livello di comando: Richiede una differenziazione gerarchica distinta dal livello di base. Il sito LayerOnMicaBaseAltFillColorDefaultBrush deve essere applicato alle aree di comando delle superfici della tua applicazione WinUI (ad esempio, la barra del menu, la struttura di navigazione, ecc.)
  • Livello di contenuto: Uno sfondo contiguo per le aree di grandi dimensioni che necessitano di una netta differenziazione gerarchica dal livello di comando. Il sito LayerFillColorDefaultBrush deve essere applicato agli sfondi dei contenitori delle superfici delle tue applicazioni WinUI (ad esempio Griglie, StackPanel, Frames, ecc.).

Per dare alla finestra della tua applicazione un aspetto omogeneo, Mica Alt dovrebbe essere visibile nella barra del titolo se scegli di applicare il materiale alla tua applicazione. Puoi mostrare Mica Alt nella barra del titolo estendendo la tua applicazione nell'area non client e creando una barra del titolo personalizzata trasparente.

Consigli

  • applica il materiale di fondo allo strato più arretrato (sostituendo ApplicationPageBackgroundThemeBrush se presente).
  • Fai imposta tutti i livelli di sfondo in cui vuoi vedere la Mica su trasparente in modo che la Mica si veda attraverso.
  • Non applicare il materiale di sfondo più di una volta in un'applicazione.
  • Non applicare il materiale di sfondo a un elemento dell'interfaccia utente. Il materiale dello sfondo non apparirà sull'elemento stesso. Apparirà solo se tutti i livelli tra l'elemento UI e la finestra sono impostati su trasparente.

Come utilizzare la Mica

Puoi utilizzare Mica nelle applicazioni UWP che utilizzano WinUI 2 o nelle applicazioni che utilizzano Windows App SDK 1.1 o successive. Puoi utilizzare Mica Alt nelle applicazioni che utilizzano Windows App SDK 1.1 o successivo.

Usa Mica con il Windows App SDK

Per utilizzare Mica in un'applicazione XAML che utilizza Windows App SDK e WinUI 3, imposta la proprietà Window.SystemBackdrop su MicaBackdrop.

Questi esempi mostrano come farlo in XAML e nel codice.

Mica

<Window
    ... >

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

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

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

Per maggiori informazioni sull'utilizzo delle API di Composition MicaController , consulta Applicare materiali Mica o Acrilici nelle applicazioni desktop per Windows 11.

Per utilizzare i materiali di sfondo in un'applicazione Win32, consulta Applicare Mica nelle applicazioni desktop Win32 per Windows 11.

Usa Mica con WinUI 2 per UWP

API importanti: Classe BackdropMaterial

Puoi applicare Mica in un'applicazione UWP con la classe BackdropMaterial . Ti consigliamo di impostare la proprietà BackdropMaterial su un elemento XAML che sia la radice del contenuto XAML, in quanto si applicherà all'intera regione del contenuto (ad esempio una finestra). Se la tua applicazione ha un Frame che naviga su più pagine, devi impostare questa proprietà sul Frame. In caso contrario, dovrai impostare questa proprietà nella pagina della tua applicazione.

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

I seguenti esempi mostrano come implementare i modelli di stratificazione standard mostrati in precedenza. Tutti questi esempi utilizzano e richiedono lo stesso code-behind della barra del titolo, mostrato nell'ultimo esempio.

Esempio: Modello standard nella NavigationView sinistra.

Per impostazione predefinita, la NavigationView in modalità Left include il livello di contenuto nella sua area di contenuto. Questo esempio estende Mica nell'area della barra del titolo e crea una barra del titolo personalizzata.

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

Esempio: Modello standard in Top NavigationView

Per impostazione predefinita, la NavigationView in modalità Top include il livello di contenuto nella sua area di contenuto. Questo esempio estende Mica nell'area della barra del titolo e crea una barra del titolo personalizzata.

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

Esempio: Schema della scheda nella NavigationView di sinistra.

Per seguire lo schema a schede utilizzando una NavigationView dovrai rimuovere il livello di contenuto predefinito sovrascrivendo le risorse del tema dello sfondo e del bordo. Poi, puoi creare le schede nell'area del contenuto del controllo. Questo esempio crea diverse schede, estende Mica nell'area della barra del titolo e crea una barra del titolo personalizzata. Per maggiori informazioni sull'UI delle carte, consulta la guida Layering e Elevation .

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

Codice della barra del titolo

Le tre precedenti pagine XAML del layout dell'app utilizzano questo code-behind per creare una barra del titolo personalizzata che si adatta allo stato e alla visibilità dell'app.

Per maggiori informazioni vedi Personalizzazione della barra del titolo.

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