.NET MAUI - 如何在 TitleBar 中放置一个按钮？

Question

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

As Instagram does it:

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

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 Toolbar Items like 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());

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>