Personalização da barra de títuloTitle bar customization

Quando seu aplicativo é executado em uma janela da área de trabalho, você pode personalizar as barras de título para corresponder a personalidade do seu aplicativo.When your app is running in a desktop window, you can customize the title bars to match the personality of your app. Os APIs de personalização da barra de título permitem que você especifique cores para elementos da barra de título, ou estenda o conteúdo do seu aplicativo para a área da barra de título e assuma o controle total dele.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.

APIs importantes: Propriedade ApplicationView.TitleBar, Classe ApplicationViewTitleBar, Classe CoreApplicationViewTitleBarImportant APIs: ApplicationView.TitleBar property, ApplicationViewTitleBar class, CoreApplicationViewTitleBar class

Quanto para personalizar a barra de títuloHow much to customize the title bar

Há dois níveis de personalização que você pode aplicar à barra de título.There are two levels of customization that you can apply to the title bar.

Para personalização de cores simples, você pode definir as propriedades ApplicationViewTitleBar para especificar as cores que você deseja usar para elementos da 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. Nesse caso, o sistema mantém responsabilidade de todos os outros aspectos da barra de título, como o título do aplicativo de desenho e definindo áreas arrastáveis.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.

A outra opção é ocultar a barra de título padrão e substituí-la com seu próprio conteúdo XAML.Your other option is to hide the default title bar and replace it with your own XAML content. Por exemplo, você pode colocar texto, botões ou menus personalizados na área da barra de título.For example, you can place text, buttons, or custom menus in the title bar area. Você também precisará usar essa opção para estender uma tela de fundo acrylic na área da barra de título.You will also need to use this option to extend an acrylic background into the title bar area.

Quando você optar por personalização completa, você é responsável por colocar o conteúdo na área de barra de título, e você pode definir sua próprias região arrastável.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. Os botões Voltar, Fechar, Minimizar e Maximizar ainda estão disponíveis e são manipulados pelo sistema, mas não são como elementos, como o título do aplicativo.The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. Você precisará criar esses elementos sozinho, conforme necessário pelo seu aplicativo.You will need to create those elements yourself as needed by your app.

Observação

A personalização simples de cores está disponível para aplicativos do Windows usando XAML, DirectX e HTML.Simple color customization is available to Windows apps using XAML, DirectX, and HTML. A personalização completa está disponível somente para aplicativos do Windows usando XAML.Full customization is available only to Windows apps using XAML.

Personalização de cor simplesSimple color customization

Se você quiser apenas personalizar as cores da barra de título e não fazer nada muito elaborado (por exemplo, colocar guias na sua barra de título), você pode definir as propriedades de cor no ApplicationViewTitleBar na janela do aplicativo.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.

Este exemplo mostra como obter uma instância de ApplicationViewTitleBar e definir suas propriedades de cor.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;

Observação

Este código pode ser colocado em seu método de aplicativo OnLaunched (App.xaml.cs), após a chamada Activate, ou na primeira página do seu aplicativo.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.

Dica

O Kit de Ferramentas da Comunidade do Windows fornece extensões que permitem que você defina essas propriedades de cor em XAML.The Windows Community Toolkit provides extensions that let you set these color properties in XAML. Para obter mais informações, consulte a Documentação do Kit de Ferramentas da Comunidade do Windows.For more info, see the Windows Community Toolkit documentation.

Há algumas coisas que devem ser lembradas ao definir cores da barra de título:There are a few things to be aware of when setting title bar colors:

  • A cor de fundo do botão não é aplicada ao botão Fechar quando você passa o mouse sobre ou clica nele.The button background color is not applied to the close button hover and pressed states. O botão Fechar sempre usa a cor definida pelo sistema para esses estados.The close button always uses the system-defined color for those states.
  • As propriedades de cor de botão são aplicadas ao botão Voltar do sistema quando é usado.The button color properties are applied to the system back button when it's used. (Consulte Histórico de navegação e navegação regressiva.)(See Navigation history and backwards navigation.)
  • Definir uma propriedade de cor null restaura a cor padrão do sistema.Setting a color property to null resets it to the default system color.
  • Você não pode definir cores transparentes.You can't set transparent colors. O canal alfa da cor é ignorado.The color's alpha channel is ignored.

O Windows oferece a um usuário a opção de aplicar suas cores de destaque selecionadas à barra de título.Windows gives a user the option to apply their selected accent color to the title bar. Se você definir qualquer cor da barra de título, recomendamos que você defina explicitamente todas as cores.If you set any title bar color, we recommend that you explicitly set all the colors. Isso garante que não haja nenhuma combinação de cores não intencional que ocorrem devido às configurações de cor definida pelo usuário.This ensures that there are no unintended color combinations that occur because of user defined color settings.

Personalização completaFull customization

Quando você concorda com a personalização da barra de título completa, a área de cliente do seu aplicativo é estendida para cobrir toda a janela, incluindo a área da 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. Você é responsável por desenho e manipulação de entrada para toda a janela, exceto os botões de legenda, que são sobrepostos na parte superior da tela do aplicativo.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 a barra de título padrão e estender seu conteúdo para a área da barra de título, defina a propriedade CoreApplicationViewTitleBar.ExtendViewIntoTitleBar como true.To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

Este exemplo mostra como obter o CoreApplicationViewTitleBar e definir a propriedade ExtendViewIntoTitleBar como true.This example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. Isso pode ser feito no método de seu aplicativo OnLaunched (App.xaml.cs), ou na primeira página do seu aplicativo.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;

Dica

Essa configuração persiste quando seu aplicativo é fechado e reiniciado.This setting persists when your app is closed and restarted. No Visual Studio, se você definir ExtendViewIntoTitleBar como true e depois quiser reverter para o padrão, você deve defini-lo explicitamente como false e executar seu aplicativo para substituir a configuração 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.

Regiões arrastáveisDraggable regions

A região da barra de título arrastável define onde o usuário pode clicar e arrastar para mover a janela (em vez de simplesmente arrastar conteúdo dentro de tela do aplicativo).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). Você especifica a região arrastável chamando o método Window.SetTitleBar e passando um UIElement que define a região arrastável.You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. (O UIElement costuma ser um painel que contém outros elementos.)(The UIElement is often a panel that contains other elements.)

Aqui está como definir uma grade de conteúdo como a região de barra de título arrastável.Here's how to set a Grid of content as the draggable title bar region. Esse código entra em XAML e code-behind para a primeira página do seu aplicativo.This code goes in the XAML and code-behind for your app's first page. Consulte a seção Exemplo de personalização completa para o código completo.See the Full customization example section for the full code.

Importante

Por padrão, alguns elementos da interface do usuário, como grade, não participam de testes de colisão quando não têm um conjunto de plano de fundo.By default, some UI elements such as Grid do not participate in hit testing when they don't have a background set. Para a grade AppTitleBar no exemplo abaixo para permitir arrastar, portanto, precisamos definir o plano de fundo como 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;
}

O UIElement (AppTitleBar) faz parte do XAML para o seu aplicativo.The UIElement (AppTitleBar) is part of the XAML for your app. Você pode declarar e definir a barra de título em uma página raiz que não mudam, ou declarar e definir uma região da barra de título em cada página que seu aplicativo pode navegar.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. Se você defini-lo em cada página, você deve verificar se a região arrastável permanece consistente conforme um usuário navega em torno de seu aplicativo.If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

Você pode chamar SetTitleBar para alternar para um novo elemento de barra de título enquanto seu aplicativo está em execução.You can call SetTitleBar to switch to a new title bar element while your app is running. Você também pode passar null como o parâmetro para SetTitleBar para reverter para o padrão de comportamento de arrastar.You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (Consulte "Região de padrão arrastável" para obter mais informações.)(See "Default draggable region" for more info.)

Importante

A região arrastável que você especifica precisa poder executar teste de clique, que significa que, para alguns elementos, talvez seja necessário definir um pincel de plano de fundo 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. Consulte os comentários sobre VisualTreeHelper.FindElementsInHostCoordinates para obter mais informações.See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

Por exemplo, se você definir uma grade como sua região arrastável, defina Background="Transparent" para torná-la arrastável.For example, if you define a Grid as your draggable region, set Background="Transparent" to make it draggable.

Essa grade não pode ser arrastada (mas os elementos visíveis dentro dele podem): <Grid x:Name="AppTitleBar">.This Grid is not draggable (but visible elements within it are): <Grid x:Name="AppTitleBar">.

Essa grade tem a mesma aparência, mas a grade inteira pode ser arrastada: <Grid x:Name="AppTitleBar" Background="Transparent">.This Grid looks the same, but the whole Grid is draggable: <Grid x:Name="AppTitleBar" Background="Transparent">.

Região arrastável padrãoDefault draggable region

Se você não especificar uma região arrastável, um retângulo que é a largura da janela, a altura dos botões de legenda e posicionado na borda superior da janela é definido como a região arrastável padrão.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.

Se você definir uma região arrastável, o sistema reduz a região arrastável padrão até uma pequena área do tamanho de um botão de legenda, posicionado à esquerda dos botões de legenda (ou à direita se os botões de legendas estiverem no lado esquerdo da janela).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). Isso garante que sempre há uma área consistente que usuário pode arrastar.This ensures that there is always a consistent area the user can drag.

Botões de legenda do sistemaSystem caption buttons

O sistema reserva o canto superior esquerdo ou direito superior da janela do aplicativo para os botões de legenda do sistema (Voltar, Minimizar, Maximizar, Fechar).The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). O sistema mantém o controle da área de controle de legenda para garantir que a funcionalidade mínima seja fornecida para arrastar, minimizar, maximizar e fechar a janela.The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. O sistema desenha o botão Fechar no canto superior direito para idiomas da esquerda para a direita e no canto superior esquerdo para idiomas da direita para a esquerda.The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

A dimensão e a posição da área de controle de legenda é comunicada pela classe CoreApplicationViewTitleBar para que você possa considerá-la no layout de sua interface do usuário da barra de títulos.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. A largura da região reservada em cada lado é determinada pelas propriedades SystemOverlayLeftInset ou SystemOverlayRightInset e a altura é determinado pela propriedade altura.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.

Você pode desenhar conteúdo sob a área de controle de legenda definida por essas propriedades, como seu plano de fundo do aplicativo, mas você não deve colocar qualquer interface do usuário que você espera que o usuário possa interagir com.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. Ele não receberá qualquer entrada porque a entrada para os controles de legenda é manipulada pelo sistema.It does not receive any input because input for the caption controls is handled by the system.

Você pode manipular o evento LayoutMetricsChanged para responder a alterações no tamanho dos botões de legenda.You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. Por exemplo, isso pode acontecer quando o botão Voltar do sistema é mostrado ou ocultado.For example, this can happen when the system back button is shown or hidden. Manipule esse evento para verificar e atualizar o posicionamento dos elementos de interface do usuário que dependem do tamanho da barra de título.Handle this event to verify and update the positioning of UI elements that depend on the title bar's size.

Este exemplo mostra como ajustar o layout de sua barra de título para levar em conta alterações como o botão Voltar do sistema sendo mostrado ou ocultado.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 e RightPaddingColumn são declarados no XAML mostrado anteriormente.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;
}

Conteúdo interativoInteractive content

Você pode colocar controles interativos, como botões, menus ou uma caixa de pesquisa, na parte superior do aplicativo para que pareçam estar na 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. No entanto, há algumas regras que você deve seguir para garantir que seus elementos interativos recebam entrada do usuário.However, there are a few rules you must follow to ensure that your interactive elements receive user input.

  • Você deve chamar SetTitleBar para definir uma área como a região de barra de título arrastável.You must call SetTitleBar to define an area as the draggable title bar region. Se você não fizer isso, o sistema define a região arrastável padrão na parte superior da página.If you don’t, the system sets the default draggable region at the top of the page. O sistema, em seguida, manipula todas as entradas de usuário nessa área e impede que a entrada alcance seus controles.The system will then handle all user input to this area, and prevent input from reaching your controls.
  • Coloque seus controles interativos sobre a parte superior da região arrastável definida pela chamada para SetTitleBar (com uma ordem de z superior).Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). Não deixe seus controles interativos secundários do UIElement passado para SetTitleBar.Don’t make your interactive controls children of the UIElement passed to SetTitleBar. Depois que você passa um elemento para SetTitleBar, o sistema trata isso como a barra de título do sistema e manipula todas as entradas de ponteiro para esse 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.

Aqui, o elemento TitleBarButton tem uma ordem de z superior ao AppTitleBar, portanto, ele recebe entrada do usuário.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>

Transparência em botões de legendaTransparency in caption buttons

Quando você define ExtendViewIntoTitleBar como true, você pode fazer com que a tela de fundo dos botões de legenda transparente permitam que o seu plano de fundo do aplicativo seja mostrado.When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. Você normalmente define o plano de fundo como Colors.Transparent para transparência total.You typically set the background to Colors.Transparent for full transparency. Para transparência parcial, defina o canal alfa para a cor para a qual você definiu a cor.For partial transparency, set the alpha channel for the Color you set the property to.

Essas propriedades ApplicationViewTitleBar podem ser transparentes:These ApplicationViewTitleBar properties can be transparent:

  • ButtonBackgroundColorButtonBackgroundColor
  • ButtonHoverBackgroundColorButtonHoverBackgroundColor
  • ButtonPressedBackgroundColorButtonPressedBackgroundColor
  • ButtonInactiveBackgroundColorButtonInactiveBackgroundColor

A cor de fundo do botão não é aplicada ao botão Fechar quando você passa o mouse sobre ou clica nele.The button background color is not applied to the close button hover and pressed states. O botão Fechar sempre usa a cor definida pelo sistema para esses estados.The close button always uses the system-defined color for those states.

Todas as outras propriedades de cor continuarão ignorando o canal alfa.All other color properties will continue to ignore the alpha channel. Se ExtendViewIntoTitleBar estiver definido como false, o canal alfa é sempre ignorado para todas as propriedades de cor ApplicationViewTitleBar.If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

Modo de tela e tablet completosFull screen and tablet mode

Quando seu aplicativo é executado em em tela inteira ou em modo tablet, o sistema oculta a barra de título e os botões do controle de legenda.When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. No entanto, o usuário pode invocar a barra de título para que ela seja mostrada como uma sobreposição no topo da interface do usuário do aplicativo.However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. Você pode manipular o evento CoreApplicationViewTitleBar.IsVisibleChanged para ser notificado quando a barra de título estiver oculta ou invocada e mostrar ou ocultar o conteúdo da barra de título personalizado conforme necessário.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.

Este exemplo mostra como manipular IsVisibleChanged para mostrar e ocultar o elemento AppTitleBar mostrado anteriormente.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;
    }
}

Observação

O modo Tela inteira pode ser inserido somente se suportado por seu aplicativo.Full screen mode can be entered only if supported by your app. Consulte ApplicationView.IsFullScreenMode para obter mais informações.See ApplicationView.IsFullScreenMode for more info. Modo Tablet é uma opção de usuário em hardware com suporte, portanto, um usuário pode optar por executar qualquer aplicativo no modo tablet.Tablet mode is a user option on supported hardware, so a user can choose to run any app in tablet mode.

Exemplo de personalização 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;
    }
}

O que fazer e o que não fazerDo's and don'ts

  • Torne-o óbvio quando a janela estiver ativa ou inativa.Do make it obvious when your window is active or inactive. No mínimo, altere a cor dos botões na barra de título, ícones e texto.At a minimum, change the color of the text, icons, and buttons in your title bar.
  • Defina uma região arrastável ao longo da borda superior da tela do aplicativo.Do define a draggable region along the top edge of the app canvas. O posicionamento das barras de título do sistema de correspondência torna mais fácil para os usuários o encontrarem.Matching the placement of system title bars makes it easier for users to find.
  • Defina uma região arrastável que corresponde a barra de título visual (se houver) na tela do aplicativo.Do define a draggable region that matches the visual title bar (if any) on the app’s canvas.