How to customize master details page header in xamarin forms

Question

I am displaying a master details page.

Master page has the list of menu items and details page will have selected item details.

By default detail page is displaying title at left of the screen. I want to customize details page title to show at center of page.

Is there anyway to customize details page title bar in Xamarin forms?

Screenshots attached here

Do you want the Title of the page centre aligned on android? Like in your case About should be center aligned? — FreakyAli
iOS by default has it center aligned and Android is a little complicated with this — FreakyAli
Thank you for update. I just checked in iOS. Yes in iOS it is center aligned. Could you please suggest how can i make this for android?.. Actually i even need to make some more changes like need to add my button in title bar, So if there is any way where i can make use of any custom view in details page title? — Ashok
Take a look at TitleView : developer.xamarin.com/samples/xamarin-forms/Navigation/… — Depechie

Deczaloth Deczaloth · Accepted Answer · 2019-02-04T17:56:05

Option 1:

I think TitleView (available since XF 3.2) is what you are looking for. All you have to do is create a the View you want to have as TitleView and asign it to the NavigationPage as:

Code

public class TitleViewPage : ContentPage
{
    public TitleViewPage()
    {
        var titleView = new Slider { HeightRequest = 44, WidthRequest = 300 };
        NavigationPage.SetTitleView(this, titleView);
        ...
    }
}

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="NavigationPageTitleView.TitleViewPage">
    <NavigationPage.TitleView>
        <Slider HeightRequest="44" WidthRequest="300" />
    </NavigationPage.TitleView>
    ...
</ContentPage>

Reference: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar

Option 2:

Back in the days, before TitleView was available i used to simply remove navigation bar:

Code

NavigationPage.SetHasNavigationBar(this, false);

XAML

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

And then i just put on top of my NavigationPage a StackLayout (my custom title bar) with all the icons/buttons/images/formatted text/etc that i wished.

How to customize master details page header in xamarin forms

1 Answers