Forum Xamarin.Forms

How to change the Navigation Page Title font in UWP?

R0undProblemsFoundR0undProblemsFound Member ✭✭
edited April 15 in Xamarin.Forms

I am trying to use a custom font for my Navigation Page Titles.

I have scratched out the unwanted details. I want to use a custom font for the Navigation Bar title, that reads - "Page Title".
I was able to customize the the tabbed page titles by adding a fontfamily to the TextBlock in PivotStyle.

Is there anyway of writing a similar style for Navigation Page? I am fairly new to UWP and this is my first application.
Also it'll be very helpful if you can even help me with customizing that thin horizontal blue line under the "Tab 1", and disable hover action for the Hamburger menu icon.

So, I am trying to find a solution to 3 problems:
1. Custom fonts for navigation bar title.
2. Change the Tabbed bar, selection color.(The thin blue line)
3. Disable hover action on the Hamburger menu icon.

It is really difficult to find any kind of resource for Xamarin.UWP. Please help. Thanks in advance :smiley:

Best Answers

Answers

  • YelinZhYelinZh Member, Xamarin Team Xamurai

    Custom fonts for navigation bar title.

    To customize the font of page title, you could create a NavigationRenderer to consume the font on the platform, such as the following code in ios..

    public class CustomNavigationBarRenderer : NavigationRenderer
    {
    
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.NavigationBar.TintColor = UIColor.Gray;
            this.NavigationBar.BarTintColor = UIColor.White;
    
            this.NavigationBar.TitleTextAttributes=new UIStringAttributes()
            {
                Font = UIFont.FromName("HelveticaNeue-Light",20)
            };
        }
    }
    

    Refer to:
    https://forums.xamarin.com/discussion/comment/102211/#Comment_102211

  • @Jarvan said:

    Custom fonts for navigation bar title.

    To customize the font of page title, you could create a NavigationRenderer to consume the font on the platform, such as the following code in ios
    Refer to:
    https://forums.xamarin.com/discussion/comment/102211/#Comment_102211

    @Jarvan , thanks for replying.

    This is what is available for me in the rendarer:

    public class NavigationPageRenderer : IVisualElementRenderer, IRegisterable, IDisposable, ITitleProvider, ITitleIconProvider, ITitleViewProvider, IToolbarProvider, IToolBarForegroundBinder
    {
    public NavigationPageRenderer();

                    public NavigationPage Element { get; }
                    public string Title { get; set; }
                    public Windows.UI.Xaml.Media.ImageSource TitleIcon { get; set; }
                    public View TitleView { get; set; }
                    public FrameworkElement ContainerElement { get; }
                    protected VisualElementTracker<Page, PageControl> Tracker { get; set; }
    
                    public event EventHandler<VisualElementChangedEventArgs> ElementChanged;
    
                    public void BindForegroundColor(AppBar appBar);
                    public void BindForegroundColor(AppBarButton button);
                    public void Dispose();
                    public SizeRequest GetDesiredSize(double widthConstraint, double heightConstraint);
                    public void SetElement(VisualElement element);
                    protected void Dispose(bool disposing);
                    protected void OnElementChanged(VisualElementChangedEventArgs e);
                }
    

    As you can see, I don't have any methods that I can override. Also, from the forum link that you have replied with. A user called BrunoBoomerange seems to have found the solution but the link he's put doesn't exist anymore.
    This is the link: http://danielhindrikes.se/xamarin/xamarin-forms-and-panorama-in-the-windows-phone-app/.

  • YelinZhYelinZh Member, Xamarin Team Xamurai
    Accepted Answer

    Try to define a custom style in the app.xaml to override the default style of the title bar on uwp.

     <Style x:Key="TitleTextBlockStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="FontStyle" Value="Normal"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="FontFamily" Value="Assets/Fonts/QuicksandRegular.ttf#Quicksand"/>
        <Setter Property="Padding" Value="10"/>
     </Style>
    

    Refer to:
    https://stackoverflow.com/questions/48934928/how-to-set-a-custom-font-family-in-the-xamarin-actionbar-title

  • @Jarvan , thank you so much. This worked for me. o:)

  • R0undProblemsFoundR0undProblemsFound Member ✭✭
    Accepted Answer
    1. Disable hover action on the Hamburger menu icon.

    I managed to solve this by overriding the PaneButton style as suggested here: https://stackoverflow.com/questions/40678970/how-to-change-the-style-of-page-button-in-master-detail-page-for-uwp.

Sign In or Register to comment.