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 utilizador de uma aplicação Windows que identifica a aplicação através do seu ícone e título, contém os botões de legenda do sistema que permitem ao utilizador fechar, maximizar, minimizar e restaurar a janela, e permite ao utilizador arrastar a janela pelo ecrã.

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.). Também pode alojar outros controlos do WinUI 3, como o AutoSuggestBox e o PersonPicture, proporcionando uma experiência de utilizador coesa para a sua aplicação.

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

A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no 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;
}

Artigos relacionados

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