Personalización de la barra de títuloTitle bar customization

Cuando la aplicación se ejecuta en una ventana de escritorio, puede personalizar las barras de título para que coincidan con la personalidad de la aplicación.When your app is running in a desktop window, you can customize the title bars to match the personality of your app. Las API de personalización de la barra de título permiten especificar los colores de los elementos de la barra de título, o ampliar el contenido de la aplicación en el área de la barra de título y tomar el control total del mismo.The title bar customization APIs let you specify colors for title bar elements, or extend your app content into the title bar area and take full control of it.

API importantes: propiedad ApplicationView. TitleBar, clase ApplicationViewTitleBar, clase CoreApplicationViewTitleBarImportant APIs: ApplicationView.TitleBar property, ApplicationViewTitleBar class, CoreApplicationViewTitleBar class

La cantidad de personalización de la barra de títuloHow much to customize the title bar

Hay dos niveles de personalización que se pueden aplicar a la barra de título.There are two levels of customization that you can apply to the title bar.

Para la personalización de color simple, puede establecer las propiedades de ApplicationViewTitleBar para especificar los colores que desea utilizar para los elementos de la barra de título.For simple color customization, you can set ApplicationViewTitleBar properties to specify the colors you want to use for title bar elements. En este caso, el sistema conserva la responsabilidad de todos los demás aspectos de la barra de título, como dibujar el título de la aplicación y definir áreas arrastrables.In this case, the system retains responsibility for all other aspects of the title bar, such as drawing the app title and defining draggable areas.

La otra opción consiste en ocultar la barra de título predeterminada y reemplazarla por su propio contenido XAML.Your other option is to hide the default title bar and replace it with your own XAML content. Por ejemplo, puede colocar texto, botones o menús personalizados en el área de la barra de título.For example, you can place text, buttons, or custom menus in the title bar area. También tendrá que usar esta opción para extender un fondo acrílico en el área de la barra de título.You will also need to use this option to extend an acrylic background into the title bar area.

Al optar por la 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.When you opt for full customization, you are responsible for putting content in the title bar area, and you can define your own draggable region. Los botones atrás, cerrar, minimizar y maximizar del sistema siguen estando disponibles y administrados por el sistema, pero no los elementos como el título de la aplicación.The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. Tendrá que crear esos elementos según sea necesario para la aplicación.You will need to create those elements yourself as needed by your app.

Nota

La personalización de color simple está disponible para las aplicaciones de Windows mediante XAML, DirectX y HTML.Simple color customization is available to Windows apps using XAML, DirectX, and HTML. La personalización completa solo está disponible para las aplicaciones de Windows que usan XAML.Full customization is available only to Windows apps using XAML.

Personalización de color simpleSimple color customization

Si solo desea personalizar los colores de la barra de título y no hacer nada más sofisticado (por ejemplo, colocar las pestañas en la barra de título), puede establecer las propiedades de color en el ApplicationViewTitleBar de la ventana de la aplicación.If you want only to customize the title bar colors and not do anything too fancy (such as putting tabs in your title bar), you can set the color properties on the ApplicationViewTitleBar for your app window.

En este ejemplo se muestra cómo obtener una instancia de ApplicationViewTitleBar y establecer sus propiedades de color.This example shows how to get an instance of ApplicationViewTitleBar and set its color properties.

// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

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

// Set inactive window colors
titleBar.InactiveForegroundColor = Windows.UI.Colors.Gray;
titleBar.InactiveBackgroundColor = Windows.UI.Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Windows.UI.Colors.Gray;
titleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.SeaGreen;

Nota

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. Activateo en la primera página de la aplicación.This code can be placed in your app's OnLaunched method (App.xaml.cs), after the call to Window.Activate, or in your app's first page.

Sugerencia

El kit de herramientas de la comunidad de Windows proporciona extensiones que permiten establecer estas propiedades de color en XAML.The Windows Community Toolkit provides extensions that let you set these color properties in XAML. Para obtener más información, consulte la documentación del kit de herramientasde la comunidad de Windows.For more info, see the Windows Community Toolkit documentation.

Hay algunos aspectos que se deben tener en cuenta al establecer los colores de la barra de título:There are a few things to be aware of when setting title bar colors:

  • El color de fondo del botón no se aplica al estado de mantener presionado del botón Cerrar.The button background color is not applied to the close button hover and pressed states. El botón Cerrar siempre usa el color definido por el sistema para esos Estados.The close button always uses the system-defined color for those states.
  • Las propiedades de color del botón se aplican al botón atrás del sistema cuando se usa.The button color properties are applied to the system back button when it's used. (Consulte el historial de navegación y la navegación hacia atrás).(See Navigation history and backwards navigation.)
  • Al establecer una propiedad de color en null , se restablece el color predeterminado del sistema.Setting a color property to null resets it to the default system color.
  • No se pueden establecer colores transparentes.You can't set transparent colors. Se omite el canal alfa del color.The color's alpha channel is ignored.

Windows ofrece a los usuarios la opción de aplicar el color de énfasis seleccionado a la barra de título.Windows gives a user the option to apply their selected accent color to the title bar. Si establece un color de barra de título, se recomienda establecer explícitamente todos los colores.If you set any title bar color, we recommend that you explicitly set all the colors. Esto garantiza que no hay combinaciones de colores no deseadas que se produzcan debido a la configuración de color definida por el usuario.This ensures that there are no unintended color combinations that occur because of user defined color settings.

Personalización completaFull customization

Al participar en la personalización de la barra de título completa, el área cliente de la aplicación se amplía para abarcar toda la ventana, incluido el área de la barra de título.When you opt-in to full title bar customization, your app’s client area is extended to cover the entire window, including the title bar area. El usuario es responsable del dibujo y del control de entrada de toda la ventana excepto de los botones de título, que están superpuestos en la parte superior del lienzo de la aplicación.You are responsible for drawing and input-handling for the entire window except the caption buttons, which are overlaid on top of the app’s canvas.

Para ocultar la barra de título predeterminada y extender el contenido en el área de la barra de título, establezca la propiedad CoreApplicationViewTitleBar. ExtendViewIntoTitleBar en true.To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

En este ejemplo se muestra cómo obtener CoreApplicationViewTitleBar y establecer la propiedad ExtendViewIntoTitleBar en true.This example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. Esto puede hacerse en el método onlaunched de la aplicación (app.Xaml.CS) o en la primera página de la aplicación.This can be done in your app's OnLaunched method (App.xaml.cs), or in your app's first page.

// using Windows.ApplicationModel.Core;

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

Sugerencia

Esta configuración se conserva cuando la aplicación se cierra y se reinicia.This setting persists when your app is closed and restarted. En Visual Studio, si establece ExtendViewIntoTitleBar en truey después desea volver al valor predeterminado, debe establecerlo explícitamente en false y ejecutar la aplicación para sobrescribir la configuración persistente.In Visual Studio, if you set ExtendViewIntoTitleBar to true, and then want to revert to the default, you should explicitly set it to false and run your app to overwrite the persisted setting.

Regiones arrastrablesDraggable regions

La región arrastrable de la barra de título define el lugar en el que el usuario puede hacer clic y arrastrar para mover la ventana (en lugar de arrastrar simplemente el contenido dentro del lienzo de la aplicación).The draggable region of the title bar defines where the user can click and drag to move the window around (as opposed to simply dragging content within the app’s canvas). Especifique la región arrastrable llamando al método window. SetTitleBar y pasando un UIElement que defina la región arrastrable.You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. (El UIElement suele ser un panel que contiene otros elementos).(The UIElement is often a panel that contains other elements.)

Aquí se muestra cómo establecer una cuadrícula de contenido como la región de la barra de título que se va a arrastrar.Here's how to set a Grid of content as the draggable title bar region. Este código va en el código XAML y en el código subyacente de la primera página de la aplicación.This code goes in the XAML and code-behind for your app's first page. Vea la sección ejemplo de personalización completa para ver el código completo.See the Full customization example section for the full code.

Importante

De forma predeterminada, algunos elementos de la interfaz de usuario, como Grid, no participan en la prueba de posicionamiento cuando no tienen un conjunto de fondo.By default, some UI elements such as Grid do not participate in hit testing when they don't have a background set. En la cuadrícula del AppTitleBar ejemplo siguiente para permitir el arrastre, por lo tanto, es necesario establecer el fondo en Transparent .For the grid AppTitleBar in the sample below to allow dragging, we therefore need to set the background to Transparent.

<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/Square44x44Logo.png" 
           Grid.Column="1" HorizontalAlignment="Left" 
           Width="20" Height="20" Margin="12,0"/>
    <TextBlock Text="Custom Title Bar" 
               Grid.Column="1" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Margin="44,8,0,0"/>
</Grid>
public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    AppTitleBar.Height = sender.Height;
}

UIElement ( AppTitleBar ) forma parte del XAML de la aplicación.The UIElement (AppTitleBar) is part of the XAML for your app. Puede declarar y establecer la barra de título en una página raíz que no cambie, o bien declarar y establecer un área de la barra de título en cada página a la que pueda navegar su aplicación.You can either declare and set the title bar in a root page that doesn’t change, or declare and set a title bar region in each page that your app can navigate to. Si lo establece en cada página, debe asegurarse de que la región arrastrable permanece coherente cuando un usuario navega por la aplicación.If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

Puede llamar a SetTitleBar para cambiar a un nuevo elemento de la barra de título mientras la aplicación se está ejecutando.You can call SetTitleBar to switch to a new title bar element while your app is running. También puede pasar null como parámetro a SetTitleBar para revertir al comportamiento de arrastre predeterminado.You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (Consulte "región de arrastre predeterminada" para obtener más información).(See "Default draggable region" for more info.)

Importante

La región que se puede arrastrar que especifique debe ser una prueba de posicionamiento, lo que significa que, para algunos elementos, es posible que tenga que establecer un pincel de fondo transparente.The draggable region you specify needs to be hit testable, which means, for some elements, you might need to set a transparent background brush. Vea los comentarios en VisualTreeHelper. FindElementsInHostCoordinates para obtener más información.See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

Por ejemplo, si define una cuadrícula como su región de arrastre, establezca Background="Transparent" para que se pueda arrastrar.For example, if you define a Grid as your draggable region, set Background="Transparent" to make it draggable.

Esta cuadrícula no es arrastrable (pero los elementos visibles dentro de ella son): <Grid x:Name="AppTitleBar"> .This Grid is not draggable (but visible elements within it are): <Grid x:Name="AppTitleBar">.

Esta cuadrícula tiene el mismo aspecto, pero se arrastra toda la cuadrícula: <Grid x:Name="AppTitleBar" Background="Transparent"> .This Grid looks the same, but the whole Grid is draggable: <Grid x:Name="AppTitleBar" Background="Transparent">.

Región de arrastre predeterminadaDefault draggable region

Si no se especifica una región arrastrable, un rectángulo que sea el ancho de la ventana, el alto de los botones de título y colocado a lo largo del borde superior de la ventana se establecerá como la región de arrastre predeterminada.If you don’t specify a draggable region, a rectangle that is the width of the window, the height of the caption buttons, and positioned along the top edge of the window is set as the default draggable region.

Si define una región arrastrable, el sistema reduce la región arrastrable predeterminada hacia abajo hasta un área pequeña, el tamaño de un botón de título, situado a la izquierda de los botones de título (o a la derecha si los botones de título están en el lado izquierdo de la ventana).If you do define a draggable region, the system shrinks the default draggable region down to a small area the size of a caption button, positioned to the left of the caption buttons (or to the right if the captions buttons are on the left side of the window). Esto garantiza que siempre haya un área coherente que el usuario pueda arrastrar.This ensures that there is always a consistent area the user can drag.

Botones de título del sistemaSystem caption buttons

El sistema reserva la esquina superior izquierda o superior derecha de la ventana de la aplicación para los botones de título del sistema (atrás, minimizar, maximizar y cerrar).The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). El sistema conserva el control del área de control de títulos para garantizar que se proporciona la funcionalidad mínima para arrastrar, minimizar, maximizar y cerrar la ventana.The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. El sistema dibuja el botón cerrar en la parte superior derecha para los idiomas de izquierda a derecha y en la parte superior izquierda para los idiomas que se van de derecha a izquierda.The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

La clase CoreApplicationViewTitleBar comunica las dimensiones y la posición del área de control Caption para que se pueda tener en cuenta en el diseño de la interfaz de usuario de la barra de título.The dimensions and position of the caption control area is communicated by the CoreApplicationViewTitleBar class so that you can account for it in the layout of your title bar UI. El ancho de la región reservada en cada lado lo proporcionan las propiedades SystemOverlayLeftInset o SystemOverlayRightInset , y el alto lo proporciona la propiedad height .The width of the reserved region on each side is given by the SystemOverlayLeftInset or SystemOverlayRightInset properties, and its height is given by the Height property.

Puede dibujar contenido debajo del área de control de título definida por estas propiedades, como el fondo de la aplicación, pero no debe colocar ninguna interfaz de usuario con la que espera que el usuario pueda interactuar.You can draw content underneath the caption control area defined by these properties, such as your app background, but you should not put any UI that you expect the user to be able to interact with. No recibe ninguna entrada porque el sistema controla la entrada para los controles de título.It does not receive any input because input for the caption controls is handled by the system.

Puede controlar el evento LayoutMetricsChanged para responder a los cambios en el tamaño de los botones de título.You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. Por ejemplo, esto puede ocurrir cuando se muestra u oculta el botón atrás del sistema.For example, this can happen when the system back button is shown or hidden. Controle este evento para comprobar y actualizar la posición de los elementos de la interfaz de usuario que dependen del tamaño de la barra de título.Handle this event to verify and update the positioning of UI elements that depend on the title bar's size.

En este ejemplo se muestra cómo ajustar el diseño de la barra de título para tener en cuenta los cambios como el botón atrás del sistema que se muestra u oculta.This example shows how to adjust the layout of your title bar to account for changes like the system back button being shown or hidden. AppTitleBar, LeftPaddingColumn y RightPaddingColumn se declaran en el código XAML mostrado previamente.AppTitleBar, LeftPaddingColumn, and RightPaddingColumn are declared in the XAML shown previously.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Get the size of the caption controls area and back button 
    // (returned in logical pixels), and move your content around as necessary.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
    TitleBarButton.Margin = new Thickness(0,0,coreTitleBar.SystemOverlayRightInset,0);

    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;
}

Contenido interactivoInteractive content

Puede colocar controles interactivos, como botones, menús o un cuadro de búsqueda, en la parte superior de la aplicación para que aparezcan en la barra de título.You can place interactive controls, like buttons, menus, or a search box, in the top part of the app so they appear to be in the title bar. Sin embargo, hay algunas reglas que debe seguir para asegurarse de que los elementos interactivos reciban datos proporcionados por el usuario.However, there are a few rules you must follow to ensure that your interactive elements receive user input.

  • Debe llamar a SetTitleBar para definir un área como la región de la barra de título que se puede arrastrar.You must call SetTitleBar to define an area as the draggable title bar region. Si no lo hace, el sistema establece la región de arrastre predeterminada en la parte superior de la página.If you don’t, the system sets the default draggable region at the top of the page. A continuación, el sistema administrará todos los datos proporcionados por el usuario en esta área e impedirá que los datos lleguen a los controles.The system will then handle all user input to this area, and prevent input from reaching your controls.
  • Coloque los controles interactivos en la parte superior de la región arrastrable definida por la llamada a SetTitleBar (con un orden z superior).Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). No convierta los controles interactivos en los elementos secundarios del UIElement pasado a SetTitleBar.Don’t make your interactive controls children of the UIElement passed to SetTitleBar. Después de pasar un elemento a SetTitleBar, el sistema lo trata como la barra de título del sistema y controla toda la entrada de puntero a ese elemento.After you pass an element to SetTitleBar, the system treats it like the system title bar and handles all pointer input to that element.

Aquí, el TitleBarButton elemento tiene un orden z superior a AppTitleBar , por lo que recibe la entrada del usuario.Here, the TitleBarButton element has a higher z-order than AppTitleBar, so it receives user input.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <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/Square44x44Logo.png"
               Grid.Column="1" HorizontalAlignment="Left"
               Width="20" Height="20" Margin="12,0"/>
        <TextBlock Text="Custom Title Bar"
                   Grid.Column="1"
                   Style="{StaticResource CaptionTextBlockStyle}"
                   Margin="44,8,0,0"/>
    </Grid>

    <!-- This Button has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <Button x:Name="TitleBarButton" Content="Button in the title bar"
        HorizontalAlignment="Right"/>
</Grid>

Transparencia en los botones de títuloTransparency in caption buttons

Si establece ExtendViewIntoTitleBar en true, puede hacer que el fondo de los botones de título sea transparente para que el fondo de la aplicación se muestre.When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. Normalmente se establece el fondo en colors. Transparent para una transparencia completa.You typically set the background to Colors.Transparent for full transparency. Para una transparencia parcial, establezca el canal alfa del color en el que establece la propiedad.For partial transparency, set the alpha channel for the Color you set the property to.

Estas propiedades de ApplicationViewTitleBar pueden ser transparentes:These ApplicationViewTitleBar properties can be transparent:

  • ButtonBackgroundColorButtonBackgroundColor
  • ButtonHoverBackgroundColorButtonHoverBackgroundColor
  • ButtonPressedBackgroundColorButtonPressedBackgroundColor
  • ButtonInactiveBackgroundColorButtonInactiveBackgroundColor

El color de fondo del botón no se aplica al estado de mantener presionado del botón Cerrar.The button background color is not applied to the close button hover and pressed states. El botón Cerrar siempre usa el color definido por el sistema para esos Estados.The close button always uses the system-defined color for those states.

Todas las demás propiedades de color seguirán ignorando el canal alfa.All other color properties will continue to ignore the alpha channel. Si ExtendViewIntoTitleBar se establece en false, el canal alfa siempre se omite para todas las propiedades de color ApplicationViewTitleBar.If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

Modo de pantalla completa y tabletaFull screen and tablet mode

Cuando la aplicación se ejecuta en el modo de pantalla completa o de Tablet PC, el sistema oculta los botones de control de la barra de título y del título.When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. Sin embargo, el usuario puede invocar la barra de título para que se muestre como una superposición encima de la interfaz de usuario de la aplicación.However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. Puede controlar el evento CoreApplicationViewTitleBar. IsVisibleChanged para recibir una notificación cuando la barra de título se oculte o se invoque, y mostrar u ocultar el contenido de la barra de título personalizada según sea necesario.You can handle the CoreApplicationViewTitleBar.IsVisibleChanged event to be notified when the title bar is hidden or invoked, and show or hide your custom title bar content as needed.

En este ejemplo se muestra cómo controlar IsVisibleChanged para mostrar y ocultar el AppTitleBar elemento mostrado previamente.This example shows how to handle IsVisibleChanged to show and hide the AppTitleBar element shown previously.

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

El modo de pantalla completa solo se puede especificar si la aplicación lo admite.Full screen mode can be entered only if supported by your app. Vea ApplicationView. IsFullScreenMode para obtener más información.See ApplicationView.IsFullScreenMode for more info. El modo tableta es una opción de usuario en el hardware compatible, por lo que un usuario puede elegir ejecutar cualquier aplicación en modo de tableta.Tablet mode is a user option on supported hardware, so a user can choose to run any app in tablet mode.

Ejemplo de personalización completaFull customization example

<Page
    x:Class="CustomTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <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/Square44x44Logo.png" 
                   Grid.Column="1" HorizontalAlignment="Left" 
                   Width="20" Height="20" Margin="12,0"/>
            <TextBlock Text="Custom Title Bar" 
                       Grid.Column="1" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Margin="44,8,0,0"/>
        </Grid>

        <!-- This Button has a higher z-order than MyTitleBar, 
             so it receives user input. -->
        <Button x:Name="TitleBarButton" Content="Button in the title bar"
                HorizontalAlignment="Right"/>
    </Grid>
</Page>
public MainPage()
{
    this.InitializeComponent();

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

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Get the size of the caption controls area and back button 
    // (returned in logical pixels), and move your content around as necessary.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
    TitleBarButton.Margin = new Thickness(0,0,coreTitleBar.SystemOverlayRightInset,0);

    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;
}

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

Cosas que hacer y cosas que evitarDo's and don'ts

  • Haga que sea obvio cuando la ventana esté activa o inactiva.Do make it obvious when your window is active or inactive. Como mínimo, cambie el color del texto, los iconos y los botones de la barra de título.At a minimum, change the color of the text, icons, and buttons in your title bar.
  • Defina una región arrastrable a lo largo del borde superior del lienzo de la aplicación.Do define a draggable region along the top edge of the app canvas. La coincidencia de la ubicación de las barras de título del sistema facilita la búsqueda de los usuarios.Matching the placement of system title bars makes it easier for users to find.
  • Defina una región arrastrable que coincida con la barra de título visual (si existe) en el lienzo de la aplicación.Do define a draggable region that matches the visual title bar (if any) on the app’s canvas.