Compartir a través de

Personalización de la barra de título

Windows proporciona una barra de título predeterminada para cada ventana y permite personalizarla para que se ajuste a la personalidad de la aplicación. La barra de título predeterminada incluye algunos componentes estándar y funcionalidades básicas, como arrastrar y cambiar el tamaño de la ventana.

Una aplicación de Windows que muestra la barra de título

Consulta el artículo de diseño de la barra de título para obtener instrucciones sobre cómo personalizar la barra de título de tu aplicación, el contenido aceptable para el área de la barra de título y los patrones recomendados de interfaz de usuario.

Consulte la guía de Windows 11 Fluent Design para la barra de título

Nota:

En este artículo se muestra cómo personalizar la barra de título para las aplicaciones que usan UWP y WinUI 2. Para las aplicaciones que usan Windows App SDK y WinUI 3, consulte Personalización de la barra de título para windows App SDK.

Si estás pensando en migrar tu aplicación para UWP a Windows App SDK, consulta nuestra guía de migración de funcionalidades de ventanas. Consulte Migración de funcionalidad de ventanas para obtener más información.

Componentes de la barra de título

En esta lista se describen los componentes de la barra de título estándar.

  • Rectángulo de la barra de título
  • Texto de título
  • Menú del sistema: para acceder a él, es preciso hacer clic en el icono de la aplicación o hacer clic con el botón derecho en la barra de título
  • Controles de título
    • Botón Minimizar
    • Botón Maximizar o restaurar
    • Cerrar botón

En las aplicaciones para UWP, puedes personalizar la barra de título mediante miembros de las clases ApplicationView y CoreApplicationView . Hay varias API para modificar progresivamente la apariencia de la barra de título en función del nivel de personalización necesario.

Nota:

La clase Windows.UI.WindowManagement.AppWindow , que se usa para ventanas secundarias en aplicaciones para UWP, no admite la personalización de la barra de título. Para personalizar la barra de título de una aplicación para UWP que usa ventanas secundarias, use ApplicationView como se describe en Mostrar varias vistas con ApplicationView.

Cantidad de personalización de la barra de título

Se pueden aplicar dos niveles de personalización a la barra de título: aplicar pequeñas modificaciones a la barra de título predeterminada, o bien ampliar el lienzo de la aplicación al área de la barra de título e incluir contenido propio en la barra de título.

Sencillo

Para una personalización sencilla, como cambiar el color de la barra de título, puedes establecer propiedades en el objeto de barra de título de la ventana de la aplicación para especificar los colores que quieres usar para los elementos de la barra de título. En este caso, el sistema sigue siendo el responsable de los restantes aspectos de la barra de título, como dibujar el título de la aplicación y definir las áreas de arrastre.

Completo

La otra opción es ocultar la barra de título predeterminada y reemplazarla por su propio contenido personalizado. Por ejemplo, en el área de la barra de título se pueden colocar texto, un cuadro de búsqueda o menús personalizados. También tendrás que usar esta opción para ampliar un material telón de fondo, como Mica, en el área de la barra de título.

Al optar por una personalización completa, usted es responsable de colocar el contenido en el área de la barra de título y puede definir su propia región de arrastre. Los controles de título (botones Cerrar, Minimizar y Maximizar del sistema) siguen estando disponibles y los controla el sistema, pero los elementos como el título de la aplicación no. Deberá crear esos elementos usted mismo según lo necesite tu aplicación.

Personalización sencilla

Si solo quiere personalizar los colores o el icono de la barra de título, puede establecer propiedades en el objeto de barra de título de la ventana de la aplicación.

Título

De forma predeterminada, la barra de título muestra como título de la ventana el nombre para mostrar de la aplicación. El nombre para mostrar se establece en el archivo Package.appxmanifest.

Para agregar texto personalizado al título, establezca la propiedad ApplicationView.Title en un valor de texto, como se muestra aquí.

public MainPage()
{
    this.InitializeComponent();

    ApplicationView.GetForCurrentView().Title = "Custom text";
}

El texto se antepone al título de la ventana, que se mostrará como "texto personalizado - nombre de visualización de la aplicación". Para mostrar un título personalizado sin el nombre para mostrar de la aplicación, debe reemplazar la barra de título predeterminada, como se muestra en la sección Personalización Completa.

Colores

En este ejemplo se muestra cómo obtener una instancia de ApplicationViewTitleBar y establecer sus propiedades de color.

Este código se puede colocar en el método OnLaunched de la aplicación (App.xaml.cs), después de la llamada a Window.Activate o en la primera página de la aplicación.

// using Windows.UI;
// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set active window colors
titleBar.ForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Green;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;

// Set inactive window colors
titleBar.InactiveForegroundColor = Colors.Gainsboro;
titleBar.InactiveBackgroundColor = Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;

Hay varias cosas que debe tener en cuenta al establecer los colores de la barra de título:

  • El color de fondo del botón no se aplica al botón cerrar en el estado al pasar el cursor y en el estado al presionar. El botón Cerrar siempre usa el color definido por el sistema para esos estados.
  • Si se establece una propiedad de color en null, se restablece al color predeterminado del sistema.
  • No se pueden establecer colores transparentes. Se ignora el canal alfa del color.

Windows ofrece a los usuarios la opción de aplicar su color de énfasis seleccionado a la barra de título. Si establece algún color para la barra de título, es aconsejable que establezca explícitamente todos los colores. Esto garantiza que no se produzcan combinaciones de colores no deseadas debido a la configuración de colores definida por el usuario.

Personalización completa

Si realiza una personalización completa de la barra de título, el área cliente de la aplicación se extiende para cubrir toda la ventana, incluido el área de la barra de título. Usted es responsable de dibujar y gestionar la entrada para toda la ventana, excepto los botones de título, que todavía los proporciona la ventana.

Para ocultar la barra de título predeterminada y extender su contenido hasta el área de la barra de título, establezca la propiedad ExtendViewIntoTitleBar en true. Puedes establecer esta propiedad en el método de la OnLaunched aplicación (App.xaml.cs) o en la primera página de la aplicación.

Sugerencia

Consulte la sección Ejemplo de personalización completa para ver todo el código a la vez.

Este ejemplo muestra cómo obtener el CoreApplicationViewTitleBar y establecer la propiedad ExtendViewIntoTitleBar en true.

using Windows.ApplicationModel.Core;

public MainPage()
{
    this.InitializeComponent();

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

Sugerencia

Esta configuración persiste cuando la aplicación está cerrada y reiniciada. En Visual Studio, si estableces ExtendViewIntoTitleBar en true y luego quieres volver al valor predeterminado, debes establecerlo explícitamente en false y ejecutar tu aplicación para sobrescribir la configuración persistente.

Contenido de la barra de título y regiones de arrastre

Cuando la aplicación se extiende al área de la barra de título, usted es el responsable de definir y administrar la interfaz de usuario de la barra de título. Normalmente, esto incluye, como mínimo, especificar el texto de título y la región de arrastre. La región de arrastre de la barra de título define el lugar o lugares en que el usuario puede hacer clic y arrastrar para mover la ventana. También es donde el usuario puede hacer clic con el botón derecho para mostrar el menú del sistema.

Para más información sobre el contenido aceptable de la barra de título y los patrones de interfaz de usuario recomendados, consulte Diseño de la barra de título.

Para especificar la región de arrastre, llame al método Window.SetTitleBar y pase un UIElement que define la región de arrastre. (Normalmente, el UIElement es un panel que contiene otros elementos). La propiedad ExtendViewIntoTitleBar debe establecerse en true para que la llamada a SetTitleBar tenga cualquier efecto.

A continuación se explica cómo establecer un Grid de contenido como la región de la barra de título arrastrable. Este código se incluye en el código XAML y el código subyacente de la primera página de la aplicación.

<Grid x:Name="AppTitleBar" Background="Transparent">
    <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
    <!-- Using padding columns instead of Margin ensures that the background
         paints the area under the caption control buttons (for transparent buttons). -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
        <ColumnDefinition/>
        <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/WindowIcon.png" 
           Grid.Column="1"
           HorizontalAlignment="Left"
           Width="16" Height="16"
           Margin="8,0,0,0"/>
    <TextBlock x:Name="AppTitleTextBlock"
               Text="App title" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
</Grid>

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

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

De forma predeterminada, la barra de título del sistema muestra el nombre de la aplicación para mostrar como título de la ventana. El nombre para mostrar se establece en el archivo Package.appxmanifest. Puede obtener este valor y usarlo en la barra de título personalizada como esta.

AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;

Importante

La región de arrastre que especifique debe ser detectada en la prueba de interacción. De forma predeterminada, algunos elementos de la interfaz de usuario, como Grid, no participan en las pruebas de posicionamiento cuando no tienen un conjunto de fondo. Esto significa que, para algunos elementos, es posible que tenga que establecer una brocha de fondo transparente. Consulta los comentarios sobre VisualTreeHelper.FindElementsInHostCoordinates para obtener más información.

Por ejemplo, si define una cuadrícula como región de arrastre, establezca Background="Transparent" para que se pueda arrastrar.

Esta cuadrícula no se puede arrastrar (pero los elementos visibles dentro de ella son): <Grid x:Name="AppTitleBar">.

Esta cuadrícula tiene el mismo aspecto, pero toda la cuadrícula es arrastrable: <Grid x:Name="AppTitleBar" Background="Transparent">.

Contenido interactivo

Se pueden colocar controles interactivos, como botones, menús o un cuadro de búsqueda, en la parte superior de la aplicación para que parezca que están en la barra de título. Sin embargo, hay algunas reglas que debe seguir para asegurarse de que los elementos interactivos reciben la entrada del usuario, a la vez que permiten a los usuarios mover la ventana.

Una aplicación de Windows con un cuadro de búsqueda en la barra de título

  • Debe llamar a SetTitleBar para definir un área como la región de la barra de título arrastrable. Si no lo hace, el sistema establece la región de arrastre predeterminada en la parte superior de la página. A continuación, el sistema controlará toda la entrada del usuario en esta área y evitará que la entrada llegue a los controles.
  • Coloque los controles interactivos en la parte superior de la región de arrastre definida por la llamada a SetTitleBar (con un orden Z superior). No haga que los controles interactivos sean hijos de la UIElement pasada a . Después de pasar un elemento a SetTitleBar, el sistema lo trata como la barra de título del sistema y controla todas las entradas de puntero a ese elemento.

Aquí, el elemento AutoSuggestBox tiene un orden z mayor que AppTitleBar, por lo que recibe la entrada del usuario.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="AppTitleBar" Background="Transparent">
        <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
        <!-- Using padding columns instead of Margin ensures that the background
             paints the area under the caption control buttons (for transparent buttons). -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <Image Source="Assets/WindowIcon.png" 
               Grid.Column="1"
               HorizontalAlignment="Left"
               Width="16" Height="16"
               Margin="8,0,0,0"/>
        <TextBlock x:Name="AppTitleTextBlock"
                   Text="App title" 
                   Style="{StaticResource CaptionTextBlockStyle}" 
                   Grid.Column="1"
                   VerticalAlignment="Center"
                   Margin="28,0,0,0"/>
    </Grid>

    <!-- This control has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <AutoSuggestBox QueryIcon="Find"
                    PlaceholderText="Search"
                    HorizontalAlignment="Center"
                    Width="260" Height="32"/>
</Grid>

Botones de la barra de título del sistema

El sistema se reserva la esquina superior izquierda o superior derecha de la ventana de la aplicación para los botones de título del sistema (minimizar, maximizar o restaurar, cerrar). El sistema conserva el control del área del botón de título para garantizar que se proporciona una funcionalidad mínima para arrastrar, minimizar, maximizar y cerrar la ventana. El sistema dibuja el botón Cerrar en la esquina superior derecha para los idiomas de izquierda a derecha y la esquina superior izquierda para los idiomas de derecha a izquierda.

Puedes dibujar contenido debajo del área de control de títulos, como el fondo de la aplicación, pero no debes colocar ninguna interfaz de usuario con la que esperas que el usuario pueda interactuar. No recibe ninguna entrada porque el sistema controla la entrada de los controles de título.

Estas líneas del ejemplo anterior muestran las columnas de relleno en el XAML que define la barra de título. El uso de columnas de relleno en lugar de márgenes garantiza que el fondo pinta el área bajo los botones de control de título (para botones transparentes). El uso de columnas de relleno derecho e izquierdo garantiza que la barra de título se comporte correctamente en diseños de derecha a izquierda y de izquierda a derecha.

<Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
    <ColumnDefinition/>
    <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>

La clase CoreApplicationViewTitleBar comunica las dimensiones y la posición del área de control de título para que pueda tenerlo en cuenta en el diseño de la interfaz de usuario de la barra de título. El ancho de la región reservada en cada lado se determina mediante las propiedades SystemOverlayLeftInset o SystemOverlayRightInset, y su altura se determina mediante la propiedad Height.

Puede controlar el evento LayoutMetricsChanged para responder a los cambios en el tamaño de los botones de subtítulos. Por ejemplo, esto puede ocurrir si el diseño de la aplicación cambia de izquierda a derecha a de derecha a izquierda. Controle este evento para comprobar y actualizar el posicionamiento de los elementos de la interfaz de usuario que dependen del tamaño de la barra de título.

En este ejemplo se muestra cómo ajustar el diseño de la barra de título para tener en cuenta los cambios en las métricas de la barra de título. AppTitleBar, LeftPaddingColumny RightPaddingColumn se declaran en el XAML mostrado anteriormente.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

Color y transparencia en los botones de título

Al extender el contenido de la aplicación al área de la barra de título, puedes hacer que el fondo de los botones de título sea transparente, con el fin de que se vea el fondo de la aplicación. Para lograr una transparencia completa, lo habitual es establecer el fondo en Colors.Transparent. Si lo que se desea es una transparencia parcial, en el canal alfa seleccione el color que establezca para la propiedad.

Estas propiedades de la barra de título pueden ser transparentes:

Todas las demás propiedades de color seguirán ignorando el canal alfa. Si ExtendViewIntoTitleBar se establece en false, el canal alfa siempre se omite en todas las propiedades de color de ApplicationViewTitleBar.

El color de fondo no se aplica al botón de Cerrar en los estados de mantener el puntero sobre , pasar por encima, y presionar . El botón Cerrar siempre usa el color definido por el sistema para esos estados.

Sugerencia

Mica es un excelente material que ayuda a distinguir la ventana más importante en cada momento. Se recomienda usarlo como fondo para ventanas de larga duración en Windows 11. Si ha aplicado Mica en el área de cliente de la ventana, puede extenderla al área de la barra de título y hacer que los botones de título sean transparentes para que se vea la Mica. Consulta Mica material para obtener más información.

Atenuación de la barra de título cuando la ventana está inactiva

Debe ser obvio en qué momento la ventana está activa o inactiva. Para ello, como mínimo, debe cambiar el color del texto, los iconos y los botones de la barra de título.

Controle el evento CoreWindow.Activated para determinar el estado de activación de la ventana y actualizar la interfaz de usuario de la barra de título según sea necesario.

public MainPage()
{
    ...
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
    UISettings settings = new UISettings();
    if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
    }
    else
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
    }
}

Restablecimiento de la barra de título

Puedes llamar a SetTitleBar para cambiar a un nuevo elemento de barra de título mientras se ejecuta la aplicación. También puede pasar null como parámetro a SetTitleBar y establecer ExtendViewIntoTitleBar en false para revertir a la barra de título del sistema predeterminada.

Mostrar y ocultar la barra de título

Si agregas compatibilidad con el modo de pantalla completa o el modo de superposición compacta a tu aplicación, es posible que tengas que realizar cambios en la barra de título cuando tu aplicación cambie entre estos modos.

Cuando la aplicación se ejecuta en modo de pantalla completa o tableta (solo Windows 10), el sistema oculta los botones de control de título y barra de título. Sin embargo, el usuario puede invocar la barra de título para que se muestre como una superposición en la parte superior de la interfaz de usuario de la aplicación.

Puede controlar el evento CoreApplicationViewTitleBar.IsVisibleChanged para recibir una notificación cuando la barra de título está oculta o invocada, y mostrar u ocultar el contenido de la barra de título personalizada según sea necesario.

En este ejemplo se muestra cómo controlar el evento IsVisibleChanged para mostrar y ocultar el elemento AppTitleBar de los ejemplos anteriores.

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;

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

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

Nota:

modo de pantalla completa solo se puede especificar si la aplicación lo admite. Consulta ApplicationView.IsFullScreenMode para obtener más información. El modo de tableta (solo Windows 10) es una opción de usuario en Windows 10 en hardware compatible, por lo que un usuario puede optar por ejecutar cualquier aplicación en modo tableta.

Cosas que hacer y cosas que evitar

  • Haga que sea evidente en qué momento una ventana está activa o inactiva. Como mínimo, cambie el color del texto, los iconos y los botones de la barra de título.
  • Defina una región de arrastre a lo largo del borde superior del lienzo de la aplicación. Alinear la ubicación de las barras de título del sistema facilita que los usuarios las encuentren.
  • Defina una región de arrastre que coincida con la barra de título visual (si existe) en el lienzo de la aplicación.

Ejemplo de personalización completa

En este ejemplo se muestra todo el código descrito en la sección Personalización completa.

<Page
    x:Class="WinUI2_ExtendedTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI2_ExtendedTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid x:Name="AppTitleBar" Background="Transparent">
            <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
            <!-- Using padding columns instead of Margin ensures that the background
                 paints the area under the caption control buttons (for transparent buttons). -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                <ColumnDefinition/>
                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
            </Grid.ColumnDefinitions>
            <Image Source="Assets/WindowIcon.png" 
                   Grid.Column="1"
                   HorizontalAlignment="Left"
                   Width="16" Height="16"
                   Margin="8,0,0,0"/>
            <TextBlock x:Name="AppTitleTextBlock"
                       Text="App title" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Grid.Column="1"
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>

        <!-- This control has a higher z-order than AppTitleBar, 
             so it receives user input. -->
        <AutoSuggestBox QueryIcon="Find"
                        PlaceholderText="Search"
                        HorizontalAlignment="Center"
                        Width="260" Height="32"/>

        <muxc:NavigationView Grid.Row="1"
                             IsBackButtonVisible="Collapsed"
                             IsSettingsVisible="False">
            <StackPanel>
                <TextBlock Text="Content" 
                           Style="{ThemeResource TitleTextBlockStyle}"
                           Margin="12,0,0,0"/>
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>

public MainPage()
{
    this.InitializeComponent();

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

    // Set caption buttons background to transparent.
    ApplicationViewTitleBar titleBar = 
        ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;

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

    // Register a handler for when the size of the overlaid caption control changes.
    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 activation changes.
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

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

 private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
 {
     UISettings settings = new UISettings();
     if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
     }
     else
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
     }
 }