Custom Font on Master Detail Page Title

[raymond-dillon]

Description

Is it possible via Grial to set a custom title font on a Master Detail Page and center the title? Standard NavigationPage.TitleView isn't doing the trick.

Steps to Reproduce

1. Set Navigation Page.TitleView
2. Font changed OK
3. Alignment is Off (see Title View's content horizontal aligment  xamarin/Xamarin.Forms#4848)

Expected Behavior

Font is changed and title is aligned

Actual Behavior

Alignment is slightly off

Screenshots

[jpbrocca]

Hello @raymond-dillon, how are you?
You can add in the implicit style in App.xaml for NavigationPage the following:

<Style TargetType="NavigationPage" ApplyToDerivedTypes="true">
    ...

    <Setter Property="grial:GrialNavigationPage.TitleFontFamily" Value="{ DynamicResource FancyFontFamily }" />
    <Setter Property="grial:GrialNavigationPage.TitleFontSize" Value="24" /> 
    <Setter Property="grial:GrialNavigationPage.AndroidTitleBaselineCorrection" Value="20" />
</Style>

Then you will see the font applied on the page Title:

Let me know if you need more help.

Regard,
JP

[raymond-dillon]

Hi @jpbrocca - I am doing well! Still using Grial for my Xamarin projects. Quick question with regards to the above, I've applied the style but it hasn't centered the text on Android (works fine on iOS) - have you any suggestions? Thank you!

[jpbrocca]

Hello @raymond-dillon, glad to hear that :)

You could use a <TitleView> then use <OnPlatform> to make the text shift as much as needed in Android/iOS while Xamarin team fixes the issue...something like this:

<ContentPage>
    <ContentPage.Resources>
        <OnPlatform x:Key="TitleViewHorizontalAdjustment" x:TypeArguments="Thickness">
            <On Platform="iOS" Value="10,0,0,0" />
            <On Platform="Android" Value="0,0,20,0" />
        </OnPlatform>
    </ContentPage.Resources>
    
    ...

    <ContentPage.Content>
        <NavigationPage.TitleView>
            <Grid
                Margin="{ DynamicResource TitleViewHorizontalAdjustment }"
            >
                <Label
                    Text="YOUR TEXT"
                    FontSize="24"
                    Margin="0,0"
                    TextColor="{ DynamicResource NavigationBarTextColor }"
                    HorizontalOptions="Center" 
                    FontFamily="{ DinamicResource FancyFontFamily }"
                />
            </Grid>
        </NavigationPage.TitleView>
    <ContentPage.Content>
    
    ...
</ContentPage>

[raymond-dillon]

Hi @jpbrocca Nice idea! I've been playing between your suggestion and trying to create a toolbar item set as the background colour of the navigation bar in order to move everything to the left a little!

It's definitely an interesting bug from Xamarin!