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 de 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 ao usuário fechar, maximizar, minimizar e restaurar a janela e permite que um usuário arraste a janela pela 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. Pode incluir outras informações relevantes, como o título de um documento ou o estado atual (por exemplo, "Edição", "Visualização", etc.). Ele também pode hospedar outros controles WinUI, como AutoSuggestBox e PersonPicture, fornecendo uma experiência de usuário coesa para seu aplicativo.

Será este o controlo correto?

Use o controle TitleBar quando quiser integrar a área da barra de título com a interface do usuário do aplicativo usando personalizações como legendas, 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 ocultadas, dependendo das configurações de propriedade associadas.

A barra de título está dividida nas seguintes áreas:

• Botão Voltar:IsBackButtonEnabled, IsBackButtonVisible, BackRequested - Um botão voltar integrado para navegação.
• Botão de alternância do painel:IsPaneToggleButtonVisible, PaneToggleRequested - Este botão destina-se a ser usado em conjunto com o controle NavigationView.
• Cabeçalho esquerdo:CabeçalhoEsquerdo
• Ícone:IconSource
• Título:Título
• Legenda:Legenda
• Conteúdo:Conteúdo
• Cabeçalho direito:RightHeader
• Região de arrasto mínimo: Esta área é reservada ao lado dos botões de legenda do sistema para que o usuário sempre tenha um lugar 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. Os botões de legenda e as personalizações são manipulados pela AppWindowTitleBar.

O layout é invertido quando o FlowDirection está configurado para RightToLeft.

Criar uma barra de título

• APIs importantes:classe TitleBar, propriedade Title

Abra o aplicativo WinUI 3 Gallery e veja a TitleBar em ação

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

Este exemplo cria uma barra de título simples que substitui a barra de título do sistema. 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

A vista Navegação tem um botão Voltar incorporado e um botão para alternar o painel. As diretrizes do Fluent Design recomendam que esses controles sejam colocados na barra de título quando uma barra de título personalizada for usada.

Este exemplo demonstra como integrar o controle TitleBar com um controle NavigationView ocultando o botão Voltar e o botão de alternância do painel no modo de exibição 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 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