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.

Consulta el artículo sobre el diseño de la barra de título para obtener las instrucciones necesarias para personalizar la barra de título de cualquier aplicación, el contenido que se puede incluir en el área de la barra de título y los patrones de interfaz de usuario recomendados.

Consultar la guía de la barra de titulo en el Sistema Fluent Design de Windows 11

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 el SDK de Aplicaciones para Windows y WinUI 3, consulta Personalización de la barra de título para el SDK de Aplicaciones para Windows.

Si estás pensando en migrar tu aplicación para UWP a SDK de Aplicaciones para Windows, consulta nuestra guía de migración de funcionalidades de ventanas. Para más información, consulta la migración de funcionalidades de ventana.

• Se aplica a: UWP/WinUI 2
• Interfaces API importantes: propiedad ApplicationView.TitleBar, clase ApplicationViewTitleBar, clase CoreApplicationViewTitleBar

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
  • Botón Cerrar

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

Si vas a realizar una personalización sencilla, como cambiar el color de la barra de título, puedes establecer propiedades en el objeto barra de título de la ventana de tu aplicación para especificar los colores que deseas 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 tu 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 fondo de material, como Mica, en el área de la barra de título.

Si decides realizar una personalización completa, es responsabilidad tuya colocar contenido en el área de la barra de título y puedes definir tu 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. Tendrá que crear esos elementos a medida que la aplicación los necesite.

Personalización simple

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

Título

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

Para agregar texto personalizado al título, establece 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 para mostrar de la aplicación". Para mostrar un título personalizado sin el nombre para mostrar de la aplicación, debes 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 app (App.xaml.cs), después de la llamada a Window.Activate o en la primera página de la app.

// 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 a los estados mantener el puntero y presionado del botón Cerrar. 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 tanto del dibujo como del control de entrada en toda la ventana, excepto los botones de título, que los proporciona la ventana.

Para ocultar la barra de título predeterminada y extender el contenido al área de la barra de título, establece la propiedad ExtendViewIntoTitleBar en true. Puedes establecer esta propiedad en el método de la aplicación OnLaunched (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.

En este ejemplo se muestra cómo obtener 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 quieres revertir al valor predeterminado, debes establecerlo explícitamente en false y ejecutar la aplicación para sobrescribir la configuración persistente.

Contenido de la barra de título y la 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 del 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, llama al método Window.SetTitleBar y pasa un UIElement que defina la región de arrastre. (Normalmente UIElement es un panel que contiene otros elementos). La propiedad ExtendViewIntoTitleBar debe establecerse en true para que la llamada a SetTitleBar tenga algún efecto.

Aquí se muestra 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, en la barra de título del sistema aparece el nombre para mostrar de la aplicación como título de la ventana. El nombre para mostrar se establece en el archivo Package.appxmanifest. Así puede obtener este valor y usarlo en la barra de título personalizada.

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

Importante

La región de arrastre que especifiques debe ser evaluada en su posicionamiento. 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 tengas que establecer un pincel de fondo transparente. Consulta los comentarios sobre VisualTreeHelper.FindElementsInHostCoordinates para obtener más información.

Por ejemplo, si defines una cuadrícula como región de arrastre, establece 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 la cuadrícula completa se puede arrastrar: <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 de se deben respetar para garantizar que los elementos interactivos reciban la entrada del usuario y, al mismo tiempo, permitan a los usuarios mover la ventana.

• Debes 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.
• Coloca 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 hagas que los controles interactivos sean secundarios de UIElement pasados a SetTitleBar. 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 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 de botones de título para garantizar que se proporciona la 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 que se leen de izquierda a derecha y en la esquina superior izquierda para los idiomas que se leen de derecha a izquierda.

Puede dibujar contenido debajo del área de control de título, como el fondo de la aplicación, pero no debe colocar ninguna interfaz de usuario con la que espere que el usuario interactúe. 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 debajo de los botones de control de título (para botones transparentes). El uso de columnas de relleno a la derecha e izquierda garantiza que la barra de título se comporta correctamente en diseños tanto de derecha a izquierda como 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 puedas tenerla en cuenta en el diseño de la interfaz de usuario de la barra de título. Las propiedades SystemOverlayLeftInset o SystemOverlayRightInset proporcionan el ancho de la región reservada en cada lado, mientras que la propiedad Altura proporciona su alto.

Puedes controlar el evento LayoutMetricsChanged para responder a los cambios en el tamaño de los botones de subtítulo. Por ejemplo, esto puede ocurrir si el diseño de la aplicación cambia de izquierda a derecha a izquierda. Controla 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, LeftPaddingColumn y 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:

• ButtonBackgroundColor
• ButtonHoverBackgroundColor
• ButtonPressedBackgroundColor
• ButtonInactiveBackgroundColor

Las restantes 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 del botón no se aplica a los estados mantener el puntero y presionado del botón Cerrar. 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. Para más información, consulte el artículo Material Mica.

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.

Controla el evento CoreWindow.Activated para determinar el estado de activación de la ventana y actualiza 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 la barra de título mientras se ejecuta la aplicación. También puedes pasar null como parámetro de 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 agrega a cualquier aplicación compatibilidad con los modos de pantalla completa o superposición compacta, es posible que tenga que realizar cambios en la barra de título cuando la aplicación cambie de uno de estos modos al otro.

Cuando la aplicación se ejecuta en modo pantalla completa o modo tableta (Windows 10 únicamente), el sistema oculta la barra de título y los botones de control 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.

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

Los modos Pantalla completa y superposición compacta solo se pueden especificar si la aplicación los admite. Consulta ApplicationView.IsFullScreenMode para obtener más información. El modo tableta (Windows 10 únicamente) 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. La coincidencia con la ubicación de las barras de título del sistema facilita la búsqueda por parte de los usuarios.
• 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));
     }
 }

Artículos relacionados

• Personalización de la barra de título (SDK de Aplicaciones para Windows)
• Acrílico
• Mica
• Color