Barra de título

Explorar o exemplo

O TitleBar .NET Multi-platform App UI (.NET MAUI) é uma vista que permite adicionar uma barra de título personalizada a um Window para se adequar à personalidade da sua aplicação. O diagrama a seguir mostra os componentes do TitleBar:

Importante

TitleBar só está disponível no Windows. O suporte ao Mac Catalyst será adicionado em uma versão futura.

TitleBar define as seguintes propriedades:

• Content, do tipo IView, que especifica o controlo do conteúdo centralizado na barra de título e ao qual é alocado o espaço entre o conteúdo à esquerda e à direita.
• DefaultTemplate, do tipo ControlTemplate, que representa o modelo padrão para a barra de título.
• ForegroundColor, do tipo Color, que especifica a cor do primeiro plano da barra de título e é usada como a cor para o texto do título e do subtítulo.
• Icon, do tipo ImageSource, que representa uma imagem de ícone opcional de 16x16px para a barra de título.
• LeadingContent, do tipo IView, que especifica o controle para o conteúdo que precede o ícone.
• PassthroughElements, do tipo IList<IView>, que representa uma lista de elementos que devem impedir o arrastamento na região da barra de título e, em vez disso, manipular diretamente a entrada.
• Subtitle, do tipo string, que especifica o texto do subtítulo da barra de título. Normalmente, trata-se de informações secundárias sobre a aplicação ou a janela.
• Title, do tipo string, que especifica o texto do título da barra de título. Este é geralmente o nome do aplicativo ou indica a finalidade da janela.
• TrailingContent, do tipo IView, que especifica o controle que segue o controle Content.

Essas propriedades, com exceção de DefaultTemplate e PassthroughElements, são apoiadas por objetos BindableProperty, o que significa que eles podem ser estilizados e ser o destino de associações de dados.

Importante

As exibições definidas como o valor das propriedades Content, LeadingContente TrailingContent bloquearão todas as entradas na região da barra de título e manipularão diretamente a entrada.

A altura padrão da barra de título é de 32px, mas pode ser definida para um valor maior. Para obter informações sobre como criar sua barra de título no Windows, consulte Barra de título.

Criar uma barra de título

Para adicionar uma barra de título a uma janela, defina a propriedade Window.TitleBar como um objeto TitleBar.

O exemplo XAML a seguir mostra como adicionar um TitleBar a um Window:

<Window xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TitleBarDemo"
        x:Class="TitleBarDemo.MainWindow">
    ...
    <Window.TitleBar>
        <TitleBar Title="{Binding Title}"
                  Subtitle="{Binding Subtitle}"
                  IsVisible="{Binding ShowTitleBar}"
                  BackgroundColor="#512BD4"
                  ForegroundColor="White"                  
                  HeightRequest="48">
            <TitleBar.Content>
                <SearchBar Placeholder="Search"
                           PlaceholderColor="White"
                           MaximumWidthRequest="300"
                           HorizontalOptions="Fill"
                           VerticalOptions="Center" />
            </TitleBar.Content>            
        </TitleBar>
    </Window.TitleBar>
</Window>

Um TitleBar também pode ser definido em C# e adicionado a um Window:

Window window = new Window
{
    TitleBar = new TitleBar
    {
        Icon = "titlebar_icon.png"
        Title = "My App",
        Subtitle = "Demo"
        Content = new SearchBar { ... }      
    }
};

Um TitleBar é altamente personalizável através de suas propriedades Content, LeadingContente TrailingContent:

<TitleBar Title="My App"
          BackgroundColor="#512BD4"
          HeightRequest="48">
    <TitleBar.Content>
        <SearchBar Placeholder="Search"
                   MaximumWidthRequest="300"
                   HorizontalOptions="FillAndExpand"
                   VerticalOptions="Center" />
    </TitleBar.Content>
    <TitleBar.TrailingContent>
        <ImageButton HeightRequest="36"
                     WidthRequest="36"
                     BorderWidth="0"
                     Background="Transparent">
            <ImageButton.Source>
                <FontImageSource Size="16"
                                 Glyph="&#xE713;"
                                 FontFamily="SegoeMDL2"/>
            </ImageButton.Source>
        </ImageButton>
    </TitleBar.TrailingContent>
</TitleBar>

A captura de tela a seguir mostra a aparência resultante:

Observação

A barra de título pode ser ocultada definindo a propriedade IsVisible, o que faz com que o conteúdo da janela seja exibido na região da barra de título.

Estados visuais da TitleBar

TitleBar define os seguintes estados visuais que podem ser usados para iniciar uma alteração visual no TitleBar:

• IconVisible
• IconCollapsed
• TitleVisible
• TitleCollapsed
• SubtitleVisible
• SubtitleCollapsed
• LeadingContentVisible
• LeadingContentCollapsed
• ContentVisible
• ContentCollapsed
• TrailingContentVisible
• TrailingContentCollapsed
• TitleBarTitleActive
• TitleBarTitleInactive

O exemplo XAML a seguir mostra como definir um estado visual para os estados TitleBarTitleActive e TitleBarTitleInactive:

<TitleBar ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup x:Name="TitleActiveStates">
                <VisualState x:Name="TitleBarTitleActive">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="ForegroundColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="TitleBarTitleInactive">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="White" />
                        <Setter Property="ForegroundColor" Value="Gray" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</TitleBar>

Neste exemplo, o estado visual define as propriedades BackgroundColor e ForegroundColor como cores específicas com base no fato de a barra de título estar ativa ou inativa.

Para obter mais informações sobre estados visuais, consulte estados visuais.