.NET MAUI - How to place a button in the TitleBar?

Question

In my .NET MAUI project, I want to place a button inside the TitleBar right there:

The TitleBar itself is generated automatically by setting the Title of the ContentPage. Does anyone know how to place a button right there?

Week

use a TitleView – Peyter

Expanding on Jason's comment: Maui (by default) uses Shell (rather than NavigationPage). Shell has a simple solution: Display views in the navigation bar (TitleView). – Intosh

Title bar is different from navigation bar. in the windows context the title bar is where the max and min buttons are located. – Unveil

Answer 1

As suggested by Jason and Steve, you can use Shell.TitleView to achieve the added buttons. For example, the following XAML shows displaying a button in the navigation bar:

<Shell.TitleView>
    <StackLayout>
        <Button Text="ADD" Clicked="Button_Clicked" HeightRequest="50" WidthRequest="100" HorizontalOptions="End"></Button>
    </StackLayout>
</Shell.TitleView>

Or you can use the ToolbarItems as shown below:

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Add" Clicked="Add_Clicked" />
    <ToolbarItem Text="Save" Clicked="Save_Clicked" />
</ContentPage.ToolbarItems>

However, it needs a Navigation page to show them up. So, you need to modify MainPage wrapped by a navigation page:

MainPage = new NavigationPage(new MainPage());

Degenerate

The ToolbarItems solved my problem. Thanks! – Week

How do you construct the MainPage if you have dependency injection adding things to the MainPage's constructor? In my case I'm using MVVM and am passing the ViewModel and also a logger. But I don't have them in the App constructor. – Trelliswork

Answer 2

You cannot do it with standard navigation (title) bar. You have to disable the standard navigation bar from your code using the following command in xaml header of your page NavigationPage.HasNavigationBar="False"

Then you have to create a custom navigation bar (using xaml content views, care to use content view, not content pages) with back button and all other you want to place. An example here below

XAML code for content view

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.CustomViews.CustomNavigationBar">

    <ContentView.Content>
        <StackLayout
            Orientation="Horizontal"
            HeightRequest="50"
            MaximumHeightRequest="50">
            <ImageButton
                x:Name="btnBack"
                Clicked="btnBack_Clicked"
                Source="backarrow.png"
                HorizontalOptions="Start"
                VerticalOptions="Center"
                MaximumHeightRequest="50"
                MaximumWidthRequest="50"
                Aspect="AspectFit"/>
            <Image
                Source="logo.png"
                HorizontalOptions="Start"
                VerticalOptions="Center"
                MaximumHeightRequest="50"
                MaximumWidthRequest="50"
                Aspect="AspectFit"/>
            <Label
                x:Name="lblBarTitle"
                TextColor="White"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="Center"
                FontSize="Title"
                BackgroundColor="Transparent"/>
            <ImageButton
                x:Name="btnHome"
                Clicked="btnHome_Clicked"
                Source="homepage.png"
                BackgroundColor="Transparent"
                HorizontalOptions="End"
                VerticalOptions="Center"
                MaximumHeightRequest="40"
                MaximumWidthRequest="40"
                Aspect="AspectFit"/>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Code behind for content view

public partial class CustomNavigationBar : ContentView
{
    public CustomNavigationBar()
    {
        InitializeComponent();
    }

    void btnBack_Clicked(System.Object sender, System.EventArgs e)
    {
        Navigation.PopAsync();
    }

    void btnHome_Clicked(System.Object sender, System.EventArgs e)
    {
        Navigation.PopToRootAsync();
    }

    public static readonly BindableProperty TitleTextProperty = BindableProperty.Create(
    nameof(TitleText),
    typeof(string),
    typeof(CustomNavigationBar),
    defaultValue: string.Empty,
    BindingMode.OneWay,
    propertyChanged: titleBindablePropertyChanged);

    private static void titleBindablePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (CustomNavigationBar)bindable;
        control.lblBarTitle.Text = newValue.ToString();
        //throw new NotImplementedException();
    }

    public string TitleText
    {
        get { return base.GetValue(TitleTextProperty).ToString(); }
        set { base.SetValue(TitleTextProperty, value); }
    }
}

and finally place the view inside the page you want to use

using for example in a page xaml the following code

XAML code for your page

<ContentPage.Content>
        <VerticalStackLayout>
                <!--NAVIGATION BAR-->
            <CustomViews:CustomNavigationBar Grid.Row="0" TitleText="{Binding Settings}"/>

            <!--place here you other stuff of your page....-->

        </VerticalStackLayout>
    </ContentPage.Content>

Advisement