Barra de título

O controle TitleBar fornece uma maneira simplificada de criar uma barra de título personalizada para seu aplicativo. A barra de título é um componente fundamental da interface do usuário de um aplicativo do Windows que identifica o aplicativo por meio de seu ícone e título, abriga os botões de legenda do sistema que permitem que um usuário feche, maximize, minimize e restaure a janela e permite que um usuário arraste a janela ao redor da tela.

Você pode usar uma barra de título personalizada para integrar melhor a área da barra de título à interface do usuário do aplicativo. A barra de título pode ser personalizada para corresponder ao estilo visual do aplicativo usando o tema Mica. Ele pode incluir outras informações relevantes, como um título de documento ou o estado atual (por exemplo, "Edição", "Exibição", etc.). Ele também pode hospedar outros controles WinUI, como AutoSuggestBox e PersonPicture, fornecendo uma experiência coesa do usuário para seu aplicativo.

Esse é o controle correto?

Use o controle TitleBar quando quiser integrar a área da barra de título à interface do usuário do aplicativo usando personalizações como subtítulos, temas Mica e integrações com controles WinUI.

Anatomia

Por padrão, a barra de título mostra apenas os botões de legenda do sistema. Outras partes da barra de título são mostradas ou ocultas dependendo das configurações de propriedade associadas.

A barra de título é dividida nessas áreas:

• Botão Voltar:IsBackButtonEnabled, IsBackButtonVisible, BackRequested – um botão voltar interno para navegação.
• Botão para alternar a visibilidade do painel:IsPaneToggleButtonVisible, PaneToggleRequested – este botão deve ser usado em conjunto com o controle NavigationView.
• Cabeçalho à esquerda:CabeçalhoEsquerdo
• Icon:IconSource
• Title:Título
• Subtítulo:Subtítulo
• Content:Content
• Cabeçalho à direita:CabeçalhoDireito
• Região de arrastar mínima: Essa área é reservada ao lado dos botões de legenda do sistema para que o usuário sempre tenha um local para pegar a janela para arrastar.
• Botões de legenda do sistema: Esses botões não fazem parte do controle TitleBar - ele simplesmente aloca espaço onde os botões de legenda aparecem, dependendo das configurações RTL ou LTR. Botões de legenda e personalizações são tratados pelo AppWindowTitleBar.

O layout é invertido quando o FlowDirection é RightToLeft .

Criar uma barra de título

• ApIs importantes:classe TitleBar, propriedade Title

Abra o aplicativo da Galeria do WinUI 3 e veja a Barra de Títulos em ação

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte no GitHub

Este exemplo cria uma barra de título simples que substitui a barra de título do sistema. Ele tem um título, ícone e tema Mica.

<Window
    ...  >
    <Window.SystemBackdrop>
        <MicaBackdrop Kind="Base"/>
    </Window.SystemBackdrop>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TitleBar x:Name="SimpleTitleBar"
                  Title="My App">
            <TitleBar.IconSource>
                <FontIconSource Glyph="&#xF4AA;"/>
            </TitleBar.IconSource>
        </TitleBar>

        <!-- App content -->
        <Frame x:Name="RootFrame" Grid.Row="1"/>
    </Grid>
</Window>

public MainWindow()
{
    this.InitializeComponent();

    // Hides the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar control. 
    SetTitleBar(SimpleTitleBar); 
}

Integração com NavigationView

O modo de exibição de Navegação inclui um botão de voltar embutido e um botão de alternância do painel. As diretrizes do Fluent Design recomendam que esses controles sejam colocados na barra de título quando uma barra de título personalizada é usada.

Este exemplo demonstra como integrar o controle da Barra de Título com o controle de NavigationView, ocultando o botão de voltar e o botão de alternância do painel na vista de navegação e usando os botões correspondentes na barra de título.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="My App"
              IsBackButtonVisible="True"
              IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}"
              BackRequested="TitleBar_BackRequested"
              IsPaneToggleButtonVisible="True"
              PaneToggleRequested="TitleBar_PaneToggleRequested">
    </TitleBar>

    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
                    IsBackButtonVisible="Collapsed"
                    IsPaneToggleButtonVisible="False">
        <Frame x:Name="RootFrame" />
    </NavigationView>
</Grid>

private void TitleBar_BackRequested(TitleBar sender, object args)
{
    if (RootFrame.CanGoBack)
    {
        RootFrame.GoBack();
    }
}

private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
    RootNavigationView.IsPaneOpen = !RootNavigationView.IsPaneOpen;
}

UWP e WinUI 2

O controle TitleBar não está disponível para UWP e WinUI 2. Em vez disso, consulte a personalização da barra de título (aplicativos UWP).

Artigos relacionados

• Barra de título (design)
• Personalização da barra de título
• Classe TitleBar