Mica-Material

  • Artikel

Mica ist ein nicht transparentes, dynamisches Material für Designs und Desktophintergrundbilder, mit dem Sie den Hintergrund langlebiger Fenster wie Apps und Einstellungen gestalten können. Sie können Mica auf Ihren Anwendungshintergrund anwenden, um Benutzer zu erfreuen und eine visuelle Hierarchie zu erstellen und damit zur Steigerung der Produktivität beizutragen, indem Sie die Übersichtlichkeit des Fensters erhöhen, das im Fokus steht. Mica wurde speziell im Hinblick auf die Leistung von Apps entwickelt, da es den Desktophintergrund nur einmal zur Visualisierung erfasst. Mica ist für UWP-Apps (Universelle Windows-Plattform) mit WinUI 2 (Windows-UI-Bibliothek) und Apps mit Windows App SDK 1.1 oder höher verfügbar, die unter Windows 11 Version 22000 oder höher ausgeführt werden.

hero image

Mica im Design „Hell“
Mica in light theme

Mica im Design „Dunkel“
Mica in dark theme

Mica Alt ist eine Variante von Mica, mit einer stärkeren Tönung der Desktophintergrundfarbe der Benutzer*innen. Sie können Mica Alt auf den Hintergrund Ihrer App anwenden, um eine tiefere visuelle Hierarchie als mit Mica zu erzielen. Dieses Material eignet sich insbesondere, wenn Sie eine App mit einer Titelleiste im Registerkartenformat erstellen. Mica Alt ist für Apps verfügbar, die Windows App SDK 11 oder höher verwenden und unter Windows 11 Version 22000 oder höher ausgeführt werden.

Die folgenden Screenshots zeigen den Unterschied zwischen Mica und Mica Alt in einer Titelleiste mit Registerkarten. Im ersten Screenshot wird Mica verwendet und im zweiten Mica Alt.

Screenshot of Mica in a title bar with tabs.

Screenshot of Mica Alt in a title bar with tabs.

Wann Mica oder Mica Alt verwendet werden sollten

Mica und Mica Alt sind Materialien, die im Hintergrund Ihrer Anwendung erscheinen – hinter allen anderen Inhalten. Die Materialien sind undurchsichtig und enthalten das Design sowie das Desktophintergrundbild der Benutzer*innen, um ein sehr personalisiertes Aussehen zu schaffen. Wenn der Benutzer das Fenster über den Bildschirm verschiebt, passt sich das Mica-Material dynamisch an, um eine umfassende Visualisierung mithilfe der Hintergrundbilder unterhalb der Anwendung zu erstellen. Darüber hinaus hilft das Material Benutzern, sich auf die aktuelle Aufgabe zu konzentrieren, indem sie zu einer neutralen Farbe zurückkehren, wenn die App inaktiv ist.

Es wird empfohlen, Mica oder Mica Alt als Basisebene Ihrer App anzuwenden und die Sichtbarkeit im Titelleistenbereich zu priorisieren. Einen spezifischeren Leitfaden zu Ebenen finden Sie unter Layering and Elevation (Ebenen und Erhöhungen) und App-Ebenen mit Mica.

Benutzerfreundlichkeit und Anpassungsfähigkeit

Die Mica-Materialien passen ihre Darstellung automatisch an eine Vielzahl von Geräten und Kontexten an. Sie sind für Leistung konzipiert, da sie das Hintergrundbild nur einmal erfassen, um die Visualisierungen zu erstellen.

Im Modus mit hohem Kontrast sehen Benutzer*innen weiterhin die vertraute Hintergrundfarbe ihrer Wahl anstelle von Mica oder Mica Alt. Darüber hinaus werden die Mica-Materialien in den folgenden Situationen als Fallback-Volltonfarbe (SolidBackgroundFillColorBase für Mica, SolidBackgroundFillColorBaseAlt für Mica Alt) angezeigt:

  • Bei Deaktivierung der Transparenz unter „Einstellungen“ > „Personalisierung“ > „Farbe“
  • Bei aktiviertem Stromsparmodus
  • Bei Ausführung der App auf Low-End-Hardware
  • Bei Deaktivierung eines App-Fensters auf dem Desktop
  • Bei Ausführung der Windows-App auf Xbox oder HoloLens
  • Bei Windows-Versionen vor 22000

App-Ebenen mit Mica

Inhaltsebene im Standardmuster
Standard content layer

Inhaltsebene im Kartenmuster
Card pattern content layer

Mica eignet sich aufgrund der inaktiven und aktiven Zustände sowie der dezenten Personalisierung ideal als Basisebene in der Hierarchie Ihrer App. Um dem zweischichtigen System der Ebenen und Erhöhungen zu folgen, empfehlen wir, Mica als Basisebene Ihrer App anzuwenden und darüber eine zusätzliche Inhaltsebene hinzuzufügen. Die Inhaltsebene sollte das dahinter liegende Material (Mica) aufgreifen, wobei LayerFillColorDefaultBrush, eine Volltonfarbe mit geringer Deckkraft, als Hintergrund verwendet wird. Für die Inhaltsebene empfehlen wir die folgenden Muster:

  • Standardmuster: Ein zusammenhängender Hintergrund für große Bereiche, die in der Hierarchie eindeutig von der Basisebene abgegrenzt werden müssen. LayerFillColorDefaultBrush sollte auf die Containerhintergründe Ihrer WinUI-App-Oberflächen (z. B. Grid-, StackPanel-, Frame-Steuerelemente usw.) angewendet werden.
  • Kartenmuster: Segmentierte Karten für Apps, deren Entwurf mehrere in Abschnitte unterteilte und nicht kontinuierliche Benutzeroberflächenkomponenten umfasst. Die Definition der Kartenbenutzeroberfläche mit LayerFillColorDefaultBrush finden Sie unter Layering and Elevation (Ebenen und Erhöhungen).

Wenn Sie sich entscheiden, das Material auf Ihre App anzuwenden, sollte Mica in der Titelleiste sichtbar sein, um dem Fenster Ihrer App ein nahtloses Aussehen zu verleihen. Sie können Mica in der Titelleiste anzeigen, indem Sie Ihre App in den Nicht-Clientbereich erweitern und eine transparente benutzerdefinierte Titelleiste erstellen. Weitere Informationen finden Sie unter Titelleiste.

Die folgenden Beispiele zeigen gängige Implementierungen der Ebenenstrategie mit einer Navigationsansicht (NavigationView), in der Mica im Titelleistenbereich sichtbar ist.

  • Standardmuster im NavigationView-Layout „Links“.
  • Standardmuster im NavigationView-Layout „Oben“.
  • Kartenmuster im NavigationView-Layout „Links“.

Standardmuster im NavigationView-Layout „Links“

Standardmäßig enthält die NavigationView im Modus „Links“ die Inhaltsebene in ihrem Inhaltsbereich. In diesem Beispiel wird Mica in den Titelleistenbereich erweitert und eine benutzerdefinierte Titelleiste erstellt.

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

Standardmuster im NavigationView-Layout „Oben“

Standardmäßig enthält die NavigationView im Modus „Oben“ die Inhaltsebene in ihrem Inhaltsbereich. In diesem Beispiel wird Mica in den Titelleistenbereich erweitert und eine benutzerdefinierte Titelleiste erstellt.

NavigationView in standard pattern with custom title bar in Top mode

Kartenmuster im NavigationView-Layout „Links“

Wenn Sie das Kartenmuster mit einer NavigationView anwenden möchten, müssen Sie die Standardinhaltsebene entfernen, indem Sie die Hintergrund- und Rahmendesignressourcen überschreiben. Anschließend können Sie die Karten im Inhaltsbereich des Steuerelements erstellen. In diesem Beispiel werden mehrere Karten erstellt, Mica in den Titelleistenbereich erweitert und eine benutzerdefinierte Titelleiste erstellt. Weitere Informationen zur Kartenbenutzeroberfläche finden Sie im Leitfaden Layering and Elevation (Ebenen und Erhöhungen).

NavigationView in standard pattern with custom title bar in Left mode

App-Ebenen mit Mica Alt

Mica Alt kann als Alternative zu Mica als Basisebene der Hierarchie Ihrer App verwendet werden und bietet die gleichen Features wie Mica, etwa inaktive und aktive Zustände sowie dezente Personalisierung. Wir empfehlen, Mica Alt als Basisebene Ihrer App anzuwenden, wenn Sie einen Kontrast zwischen Titelleistenelementen und den Befehlsbereichen Ihrer App (z. B. Navigation und Menüs) benötigen.

Ein gängiges Szenario für die Verwendung von Mica Alt ist die Erstellung einer Anwendung mit einer Titelleiste im Registerkartenformat. Gemäß dem Leitfaden Layering and Elevation (Ebenen und Erhöhungen) wird empfohlen, Mica Alt als Basisebene Ihrer App anzuwenden, eine Befehlsebene über der Basisebene und schließlich eine zusätzliche Inhaltsebene über der Befehlsebene hinzuzufügen. Die Befehlsebene sollte das dahinter liegende Material (Mica Alt) aufgreifen, wobei LayerOnMicaBaseAltFillColorDefaultBrush, eine Volltonfarbe mit geringer Deckkraft, als Hintergrund verwendet wird. Die Inhaltsebene sollte die darunter liegenden Ebenen mithilfe von LayerFillColorDefaultBrush, einer weiteren Volltonfarbe mit geringer Deckkraft, aufnehmen. Das Ebenensystem sieht wie folgt aus:

  • Mica Alt
  • Befehlsebene: Erfordert eine eindeutige hierarchische Abgrenzung von der Basisebene. LayerOnMicaBaseAltFillColorDefaultBrush sollte auf die Befehlsbereiche Ihrer WinUI-App-Oberflächen (z. B. Menüleiste, Navigationsstruktur usw.) angewendet werden.
  • Inhaltsebene: Ein zusammenhängender Hintergrund für große Bereiche, die in der Hierarchie eindeutig von der Befehlsebene abgegrenzt werden müssen. LayerFillColorDefaultBrush sollte auf die Containerhintergründe Ihrer WinUI-App-Oberflächen (z. B. Grid-, StackPanel-, Frame-Steuerelemente usw.) angewendet werden.

Wenn Sie sich entscheiden, das Material auf Ihre App anzuwenden, sollte Mica Alt in der Titelleiste sichtbar sein, um dem Fenster Ihrer App ein nahtloses Aussehen zu verleihen. Sie können Mica Alt in der Titelleiste anzeigen, indem Sie Ihre App in den Nicht-Clientbereich erweitern und eine transparente benutzerdefinierte Titelleiste erstellen.

Empfehlungen

  • Empfohlene Vorgehensweise: Wenden Sie Hintergrundmaterial auf die hinterste Ebene an (ersetzen Sie ApplicationPageBackgroundThemeBrush, sofern vorhanden).
  • Empfohlene Vorgehensweise: Legen Sie alle Hintergrundebenen, für die Mica verwendet werden soll, auf transparent fest, damit Mica durchscheint.
  • Nicht empfohlene Vorgehensweise: Hintergrundmaterial sollte nicht mehrmals in einer Anwendung angewendet werden.
  • Nicht empfohlene Vorgehensweise: Hintergrundmaterial sollte nicht auf ein Benutzeroberflächenelement angewendet werden. Das Hintergrundmaterial wird nicht auf dem Element selbst angezeigt. Es wird nur angezeigt, wenn alle Ebenen zwischen dem Benutzeroberflächenelement und dem Fenster auf „Transparent“ festgelegt sind.

Verwenden von Mica

Sie können Mica in UWP-Apps mit WinUI 2 oder Apps mit Windows App SDK 1.1 oder höher verwenden. Mica Alt kann in Apps mit Windows App SDK 1.1 oder höher verwendet werden.

Verwenden von Mica mit dem Windows App SDK

Um Mica in einer XAML-App mit dem Windows App SDK und WinUI 3 zu verwenden, legen Sie die Window.SystemBackdrop-Eigenschaft auf MicaBackdrop fest.

In diesen Beispielen wird die Vorgehensweise in XAML und im Code veranschaulicht.

Mica

<Window
    ... >

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

</Window>

public MainWindow()
{
    this.InitializeComponent();

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

Weitere Informationen zur Verwendung der Composition-MicaController-APIs finden Sie unter Anwenden von Mica- oder Acrylmaterialien in Desktop-Apps für Windows 11.

Informationen zum Verwenden von Hintergrundmaterialien in Win32-Apps finden Sie unter Anwenden von Mica in Win32-Desktopanwendungen für Windows 11.

Verwenden von Mica mit WinUI 2 für UWP

Wichtige APIs: BackdropMaterial-Klasse

Sie können Mica in einer UWP-App mit der BackdropMaterial-Klasse anwenden. Da die angefügte BackdropMaterial-Eigenschaft auf den gesamten Inhaltsbereich (z. B. ein Fenster) angewendet wird, wird empfohlen, diese Eigenschaft für ein XAML-Element festzulegen, bei dem es sich um den Stamm Ihres XAML-Inhalts handelt. Wenn Ihre App über ein Frame-Steuerelement zur Navigation durch mehrere Seiten verfügt, sollten Sie diese Eigenschaft für das Frame-Steuerelement festlegen. Andernfalls sollten Sie diese Eigenschaft für das Page-Steuerelement Ihrer App festlegen.

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

Die folgenden Beispiele veranschaulichen, wie Sie die zuvor gezeigten Standardebenenmuster implementieren. Jedes dieser Beispiele verwendet und erfordert denselben CodeBehind für die Titelleiste (dies wird im letzten Beispiel gezeigt).

Beispiel: Standardmuster im NavigationView-Layout „Links“

Standardmäßig enthält die NavigationView im Modus „Links“ die Inhaltsebene in ihrem Inhaltsbereich. In diesem Beispiel wird Mica in den Titelleistenbereich erweitert und eine benutzerdefinierte Titelleiste erstellt.

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

Beispiel: Standardmuster im NavigationView-Layout „Oben“

Standardmäßig enthält die NavigationView im Modus „Oben“ die Inhaltsebene in ihrem Inhaltsbereich. In diesem Beispiel wird Mica in den Titelleistenbereich erweitert und eine benutzerdefinierte Titelleiste erstellt.

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

Beispiel: Kartenmuster im NavigationView-Layout „Links“

Wenn Sie das Kartenmuster mit einer NavigationView anwenden möchten, müssen Sie die Standardinhaltsebene entfernen, indem Sie die Hintergrund- und Rahmendesignressourcen überschreiben. Anschließend können Sie die Karten im Inhaltsbereich des Steuerelements erstellen. In diesem Beispiel werden mehrere Karten erstellt, Mica in den Titelleistenbereich erweitert und eine benutzerdefinierte Titelleiste erstellt. Weitere Informationen zur Kartenbenutzeroberfläche finden Sie im Leitfaden Layering and Elevation (Ebenen und Erhöhungen).

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

CodeBehind für die Titelleiste

Die vorherigen drei XAML-Seiten für das App-Layout verwenden diesen CodeBehind, um eine benutzerdefinierte Titelleiste zu erstellen, die sich an den App-Zustand und die Sichtbarkeit anpasst.

Weitere Informationen finden Sie unter Anpassen der Titelleiste.

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