Xamarin forms Center NavigationPage title

Question

I have a problem. I used Navigation.PushAsync(), so now on my second page I have a back arrow in the NavigationBar. Now I want to add a titleview as well, in the middle of the NavigationBar, but it doesn't get centered in exactly the middle, but more to the right, because of the back button.

I already tried to set it in a AbsoluteLayout like this:

<NavigationPage.TitleView>
    <AbsoluteLayout>
        <Label Text="MyTitle" FontSize="20" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" />
    </AbsoluteLayout>
</NavigationPage.TitleView>

But still same result :(

How can I fix this?

Shubham Tyagi Shubham Tyagi · Accepted Answer · 2020-09-30T13:06:23

Remove the back button

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             NavigationPage.HasBackButton="False">

Add a custom image and use TapGesture (or you can use FontAwesome or something)

<AbsoluteLayout>
            <Image AbsoluteLayout.LayoutBounds="0, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" WidthRequest="20" HeightRequest="20"
                   Source="arrow16">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </Image.GestureRecognizers>
            </Image>
            <Label Text="MyTitle" FontSize="20" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>

On tap event pop the page

private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
   await Navigation.PopAsync();
}

Xamarin forms Center NavigationPage title

1 Answers