Material de Mica

Mica es un material opaco y dinámico que incorpora el tema y el fondo de pantalla de escritorio para pintar el fondo de ventanas de larga duración, como aplicaciones y configuraciones. Puede aplicar Mica al fondo de una aplicación para complacer a los usuarios y crear una jerarquía visual, lo que ayuda a la productividad al aumentar la claridad sobre qué ventana está en foco. Mica se ha diseñado específicamente para el rendimiento de las aplicaciones, ya que solo muestra el papel tapiz de escritorio una vez para crear su visualización. Mica está disponible para aplicaciones para UWP que usan WinUI 2 y aplicaciones que usan SDK de Aplicaciones para Windows 1.1 o posterior, mientras se ejecutan en Windows 11 versión 22000 o posterior.

imagen principal

Mica en tema
claroMica en tema claro

Mica en tema
oscuro Mica en tema oscuro

Mica Alt es una variante de Mica, con una tinción más fuerte del color de fondo del escritorio del usuario. Puedes aplicar Mica Alt al fondo de la aplicación para proporcionar una jerarquía visual más profunda que Mica, especialmente al crear una aplicación con una barra de título con pestañas. Mica Alt está disponible para las aplicaciones que usan SDK de Aplicaciones para Windows 1.1 o posterior, mientras se ejecutan en Windows 11 versión 22000 o posterior.

Estas imágenes muestran la diferencia entre Mica y Mica Alt en una barra de título con pestañas. La primera imagen usa Mica y la segunda imagen usa Mica Alt.

Captura de pantalla de Mica en una barra de título con pestañas.

Captura de pantalla de Mica Alt en una barra de título con pestañas.

Cuándo usar Mica o Mica Alt

Mica y Mica Alt son materiales que aparecen en el fondo de la aplicación, detrás del resto de contenido. Cada material es opaco e incorpora el tema del usuario y el fondo de pantalla de escritorio para crear su apariencia altamente personalizada. A medida que el usuario mueve la ventana a través de la pantalla, el material de Mica se adapta dinámicamente para crear una visualización enriquecida mediante el fondo de pantalla debajo de la aplicación. Además, el material ayuda a los usuarios a centrarse en la tarea actual volviendo a un color neutro cuando la aplicación está inactiva.

Se recomienda aplicar Mica o Mica Alt como capa base de la aplicación y priorizar la visibilidad en el área de la barra de título. Para obtener instrucciones de capas más específicas, consulte Capas y elevación ycapas de aplicaciones con Mica.

Facilidad de uso y adaptabilidad

Los materiales Mica adaptan automáticamente su apariencia para una amplia variedad de dispositivos y contextos. Están diseñados para el rendimiento, ya que capturan el fondo de pantalla de fondo solo una vez para crear sus visualizaciones.

En el modo de contraste alto, los usuarios siguen viendo el color de fondo conocido de su elección en lugar de Mica o Mica Alt. Además, los materiales de Mica aparecerán como un color de reserva sólido (SolidBackgroundFillColorBase para Mica, SolidBackgroundFillColorBaseAlt para Mica Alt) cuando:

  • El usuario desactiva la transparencia en Configuración > Color de personalización > .
  • Se activa el modo de ahorro de batería.
  • La aplicación se ejecuta en hardware de bajo nivel.
  • Una ventana de la aplicación en el escritorio desactiva.
  • La aplicación de Windows se ejecuta en Xbox o HoloLens.
  • La versión de Windows es inferior a 22000.

Capas de aplicaciones con Mica

Capa de contenido de patrón estándar
Capa de contenido estándar

Capa de contenido del patrón de tarjeta
Capa de contenido del patrón de tarjeta

Mica es ideal como una capa de base en la jerarquía de la aplicación debido a sus estados inactivos y activos y a la personalización sutil. Para seguir el sistema de elevación y capas de dos capas, le recomendamos que aplique Mica como capa base de la aplicación y agregue una capa de contenido adicional que se sitúe encima de la capa base. La capa de contenido debe recoger el material detrás de él, Mica, utilizando LayerFillColorDefaultBrush, un color sólido de opacidad baja, como fondo. Nuestros patrones de capa de contenido recomendados son:

  • Patrón estándar: fondo contiguo para áreas grandes que necesitan una diferenciación jerárquial distinta de la capa base. LayerFillColorDefaultBrush debe aplicarse a los fondos de contenedor de las superficies de la aplicación WinUI (por ejemplo, Cuadrículas, StackPanels, Marcos, etc.).
  • Patrón de tarjeta: tarjetas segmentadas para aplicaciones diseñadas con varios componentes de interfaz de usuario con secciones y discontinuos. Para obtener la definición de la interfaz de usuario de la tarjeta mediante LayerFillColorDefaultBrush, consulte Guía de capas y elevación .

Para dar un aspecto sin problemas a la ventana de la aplicación, Mica debe estar visible en la barra de título si decide aplicar el material a la aplicación. Puedes mostrar Mica en la barra de título extendiendo la aplicación al área que no es de cliente y creando una barra de título personalizada transparente. Para obtener más información, consulta Barra de título.

En los ejemplos siguientes se muestran implementaciones comunes de la estrategia de capas con NavigationView , donde Mica está visible en el área de la barra de título.

  • Patrón estándar en NavigationView izquierdo.
  • Patrón estándar en La vista de navegación superior.
  • Patrón de tarjeta en NavigationView izquierdo.

Patrón estándar en NavigationView izquierdo

De forma predeterminada, NavigationView en modo izquierdo incluye la capa de contenido en su área de contenido. En este ejemplo se extiende Mica al área de la barra de título y se crea una barra de título personalizada.

Vista de navegación en patrón estándar con barra de título personalizada en modo izquierdo

Patrón estándar en La vista de navegación superior

De forma predeterminada, NavigationView en modo superior incluye la capa de contenido en su área de contenido. En este ejemplo se extiende Mica al área de la barra de título y se crea una barra de título personalizada.

NavigationView en patrón estándar con barra de título personalizada en modo superior

Patrón de tarjeta en NavigationView izquierdo

Para seguir el patrón de tarjeta mediante navigationView, deberá quitar la capa de contenido predeterminada reemplazando los recursos de tema de fondo y borde. A continuación, puede crear las tarjetas en el área de contenido del control. En este ejemplo se crean varias tarjetas, se extiende Mica en el área de la barra de título y se crea una barra de título personalizada. Para obtener más información sobre la interfaz de usuario de la tarjeta, consulte Guía de capas y elevación .

NavigationView en patrón estándar con barra de título personalizada en modo izquierdo

Capas de aplicaciones con Mica Alt

Mica Alt es una alternativa a Mica como capa de base en la jerarquía de la aplicación con las mismas características como estados inactivos y activos y personalización sutil. Te recomendamos que apliques Mica Alt como capa base de tu aplicación al requerir contraste entre los elementos de la barra de título y las áreas de comandos de la aplicación (por ejemplo, navegación, menús).

Un escenario común para usar Mica Alt es cuando se crea una aplicación con una barra de título con pestañas. Para seguir las instrucciones sobre capas y elevación , le recomendamos que aplique Mica Alt como capa base de la aplicación, agregue una capa de comandos que se sitúe encima de la capa base y, por último, agregue una capa de contenido adicional que se sitúe encima de la capa de comandos. La capa de comandos debe recoger el material detrás de él, Mica Alt, utilizando layerOnMicaAltFillColorDefaultBrush, un color sólido de opacidad baja, como fondo. La capa de contenido debe recoger las capas debajo de ella, usando LayerFillColorDefaultBrush, otro color sólido de opacidad baja. El sistema de capas es el siguiente:

  • Mica Alt
  • Capa de comandos: requiere una diferenciación jerárquica distinta de la capa base. LayerOnMicaAltFillColorDefaultBrush debe aplicarse a las áreas de comandos de las superficies de la aplicación WinUI (por ejemplo, MenuBar, estructura de navegación, etc.).
  • Capa de contenido: fondo contiguo para áreas grandes que necesitan una diferenciación jerárquial distinta de la capa de comandos. LayerFillColorDefaultBrush debe aplicarse a los fondos de contenedor de las superficies de la aplicación WinUI (por ejemplo, Cuadrículas, StackPanels, Marcos, etc.).

Para dar un aspecto sin problemas a la ventana de la aplicación, Mica Alt debe estar visible en la barra de título si decide aplicar el material a la aplicación. Puedes mostrar Mica Alt en la barra de título extendiendo la aplicación al área que no es de cliente y creando una barra de título personalizada transparente.

Recomendaciones

  • Aplique material de fondo a la capa posterior (reemplazando si ApplicationPageBackgroundThemeBrush está presente).
  • Establezca todas las capas de fondo en las que desea ver Mica en transparente para que la Mica se muestre.
  • No aplique material de fondo más de una vez en una aplicación.
  • No aplique material de fondo a un elemento de interfaz de usuario. El material de fondo no aparecerá en el propio elemento. Solo aparecerá si todas las capas entre el elemento de la interfaz de usuario y la ventana se establecen en transparentes.

Uso de Mica

Puedes usar Mica en aplicaciones para UWP que usan WinUI 2 o en aplicaciones que usan SDK de Aplicaciones para Windows 1.1 o posterior. Puede usar Mica Alt en aplicaciones que usen SDK de Aplicaciones para Windows 1.1 o posterior.

Uso de Mica con el SDK de Aplicaciones para Windows

Para usar materiales de fondo en una aplicación XAML que usa el SDK de Aplicaciones para Windows y WinUI 3, consulta Aplicar materiales Mica o Acrílico en aplicaciones de escritorio para Windows 11.

Para usar materiales de fondo en una aplicación Win32, consulta Aplicar Mica en aplicaciones de escritorio win32 para Windows 11.

Uso de Mica con WinUI 2 para UWP

API importantes: Clase BackdropMaterial

Puedes aplicar Mica en una aplicación para UWP con la clase BackdropMaterial . Te recomendamos que establezcas la propiedad adjunta BackdropMaterial en un elemento XAML que sea la raíz del contenido XAML, ya que se aplicará a toda la región de contenido (por ejemplo, una ventana). Si la aplicación tiene un marco que navega por varias páginas, debe establecer esta propiedad en frame. De lo contrario, debes establecer esta propiedad en la página de la aplicación.

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

En los ejemplos siguientes se muestra cómo implementar los patrones de capas estándar mostrados anteriormente. Cada uno de estos ejemplos usa y requiere el mismo código subyacente de la barra de título, que se muestra en el último ejemplo.

Ejemplo: Patrón estándar en NavigationView izquierdo

De forma predeterminada, NavigationView en modo izquierdo incluye la capa de contenido en su área de contenido. En este ejemplo se extiende Mica al área de la barra de título y se crea una barra de título personalizada.

<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="40"
                Canvas.ZIndex="1" 
                Margin="48,8,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>

Ejemplo: Patrón estándar en La vista de navegación superior

De forma predeterminada, NavigationView en modo superior incluye la capa de contenido en su área de contenido. En este ejemplo se extiende Mica al área de la barra de título y se crea una barra de título personalizada.

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

Ejemplo: Patrón de tarjeta en NavigationView izquierdo

Para seguir el patrón de tarjeta mediante navigationView, deberá quitar la capa de contenido predeterminada reemplazando los recursos de tema de fondo y borde. A continuación, puede crear las tarjetas en el área de contenido del control. En este ejemplo se crean varias tarjetas, se extiende Mica en el área de la barra de título y se crea una barra de título personalizada. Para obtener más información sobre la interfaz de usuario de la tarjeta, consulte Guía de capas y elevación .

<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="40"
                Canvas.ZIndex="1" 
                Margin="48,8,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>

Código subyacente de la barra de título

Las tres páginas XAML de diseño de aplicación anteriores usan este código subyacente para crear una barra de título personalizada adaptable al estado y la visibilidad de la aplicación.

Para obtener más información, vea Personalización de la barra de título.

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