locked
Is it possible to use a custom font for ToolbarItems? RRS feed

  • Question

  • User85350 posted

    I'm interested in using just text for the items in my toolbar. I am successfully seeing the text in the toolbar on top. Also, I have successfully loaded a custom font to be used on certain Buttons and Labels. I'm wondering if it's possible to use a custom font for the text button in the toolbar.

    Wednesday, January 28, 2015 12:17 AM

Answers

  • User85350 posted

    I have solved this issue. It involves using a custom renderer. Here is what I used in my iOS renderer:

     public void SetFont (string name, float size, Color foregroundColor)
     {
            var TitleAttr = new UIStringAttributes {
                ForegroundColor = foregroundColor.ToUIColor(),
                Font = UIFont.FromName (name, size),
                KerningAdjustment = 50
            };
    
            this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr;
    }
    

    In my example, I pass in "name" (whatever the title of that page is), "size" (font size), and "color". And then I grab the TitleTextAttributes via this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr; and assign the new UIStringAttributes.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, February 13, 2015 1:12 AM

All replies

  • User90098 posted

    Also interested in this.

    Monday, February 9, 2015 2:10 AM
  • User85350 posted

    I have solved this issue. It involves using a custom renderer. Here is what I used in my iOS renderer:

     public void SetFont (string name, float size, Color foregroundColor)
     {
            var TitleAttr = new UIStringAttributes {
                ForegroundColor = foregroundColor.ToUIColor(),
                Font = UIFont.FromName (name, size),
                KerningAdjustment = 50
            };
    
            this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr;
    }
    

    In my example, I pass in "name" (whatever the title of that page is), "size" (font size), and "color". And then I grab the TitleTextAttributes via this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr; and assign the new UIStringAttributes.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, February 13, 2015 1:12 AM
  • User90098 posted

    Awesome, thanks!

    Saturday, February 14, 2015 12:42 AM
  • User85350 posted

    To anyone who may come across this in the future - this will not apply kerning to your title. The line I have in there for the KerningAdjustment has no affect. It will only set the font and its color.

    In order to set the kerning, another method needs to be applied.

    Saturday, February 14, 2015 2:22 AM
  • User130023 posted

    @hellaandrew Thanks for your posting. Is there a way to set font attributes (font, style, size) to the toolbar items text?

    Thursday, August 20, 2015 11:35 PM
  • User89714 posted

    @hellaandrew @MichaelRobichaud @PhilOxenberg - I want to increase the size of the font used in the iOS secondary toolbar. If you have this (or something very similar) working, would you mind sharing the renderer code please? I'm not quite sure where the SetFont code posted above would be called.

    Many thanks.

    Thursday, January 28, 2016 11:25 AM
  • User85350 posted

    @PhilOxenberg @JohnHardman Hopefully someone else out there might be able to answer these. My team ended up going in the direction of just rendering our own toolbar for each page (it's the same on each with different parameters). I think at some point they realized the iOS toolbar just wasn't exposed enough to meet our needs. Good luck.

    Thursday, January 28, 2016 5:46 PM
  • User89714 posted

    @hellaandrew - Understood. I'm still dithering about toolbar implementation myself.

    I did try some code from Wintellect earlier to put the iOS toolbar at the bottom of the page, but I encountered issues with using it with my XF 2.0 app.

    I'm also tempted to just build my own toolbar. I already have custom buttons that can be used for the job across all XF platforms. Putting those together into a bar should be a doddle, but I want to see what I can do with an iOS renderer first, and then throw ideas around with a UX person before going down the build it myself route.

    Thursday, January 28, 2016 5:59 PM
  • User219603 posted

    For the custom renderer what are you extending? ToolbarRenderer?

    Friday, May 6, 2016 12:17 PM
  • User85350 posted

    We literally made our own View and place it at the top of every screen. It didn't need any special functionality other than displaying the page title and have a back and next button..

    Tuesday, May 10, 2016 9:53 PM
  • User2773 posted

    https://github.com/daniel-luberda/XamarinFormsToolbarCustomFont

    Monday, September 5, 2016 3:29 PM
  • User213579 posted

    @DanielL I have 2 toolbaritems that have the same custom font. Only the first one is utilizng the custom font with your approach. What may I be missing?

    Monday, October 3, 2016 10:52 PM
  • User2773 posted

    @tjismh It's s hard to say without seeing full source code. Using that approach you have access to every toolbar items that is created.

    Monday, October 3, 2016 11:10 PM
  • User213579 posted

    Ok thanks. I will keep looking at it.

    Monday, October 3, 2016 11:20 PM
  • User239635 posted

    @DanielL said: https://github.com/daniel-luberda/XamarinFormsToolbarCustomFont

    @danielL, do you know why the Secondary toolbar items are not affected by the the new appearance?

    (I changed the text of the top item to "Right") ToolbarItems.Add(new ToolbarItem("Right", null, () => { Device.BeginInvokeOnMainThread(() => { Title = "Right"; }); }));

    here are some secondary items that I added to your example file MainPage.cs under ToolbarCustomFont.iOS:

    ToolbarItems.Add(new ToolbarItem("First", null, () => { Device.BeginInvokeOnMainThread(() => { Title = "First"; }); }, ToolbarItemOrder.Secondary, 0));

    ToolbarItems.Add(new ToolbarItem("Second", null, () => { Device.BeginInvokeOnMainThread(() => { Title = "Second"; }); }, ToolbarItemOrder.Secondary, 1));

    ToolbarItems.Add(new ToolbarItem("Third", null, () => { Device.BeginInvokeOnMainThread(() => { Title = "Third"; }); }, ToolbarItemOrder.Secondary, 2));

    Friday, February 10, 2017 11:44 PM
  • User2773 posted

    @AnatoliiB It's probably using another View for secondary toolbar items.

    You just need to handle another class, instead of this one: https://github.com/daniel-luberda/XamarinFormsToolbarCustomFont/blob/master/ToolbarCustomFont.Droid.AppCompat/CustomLayoutInflaterFactory.cs#L35

    Saturday, February 11, 2017 5:38 PM
  • User239635 posted

    @danielL , I am actually having an issue with the iOS side (I haven't tested it on Android yet), do you know what can be affecting this on iOS?

    Saturday, February 11, 2017 6:13 PM
  • User239635 posted

    @danielL, I tried to create a branch for a new PR on your github repo but it fails (no permissions). I could make a PR with the new "secondary" toolbar buttons.

    Monday, February 13, 2017 6:02 PM
  • User2773 posted

    @AnatoliiB, Great :) You can just fork this repo, clone your fork (not the original) and make changes, then create a PR to the main repo :) It will work.

    Monday, February 13, 2017 6:08 PM
  • User239635 posted

    @DanielL , so it looks that the "Secondary" toolbar items in iOS are called UISegmentControl, however using UISegmentControl.Appearance.SetTitleTextAttribute doesn't work because of a bug in iOS where it expects the key->value pairs in the NSDictionary to be reversed like this value->key, see this SO page: http://stackoverflow.com/questions/18464902/uisegmentedcontrol-settitletextattributes-does-not-work

    attempting to set my own NSDictionary in Xamarin's UISegmentContro.Appareance.SetTitleTextAttribute so far is blocked by non-overridable Dictionary property or ToDictionary method in Xamarin's UITextAttributes implementation.

    I put left some code in this branch if anyone wants to give it a try! https://github.com/AnatoliiAPFM/XamarinFormsToolbarCustomFont/tree/segmentattrs1 I am thinking maybe using System.Reflection.Emit might help with help of MehodBuilder class

    Monday, February 13, 2017 7:50 PM
  • User326064 posted

    @DanielL said: https://github.com/daniel-luberda/XamarinFormsToolbarCustomFont

    How do I use this for UWP?

    Thursday, June 22, 2017 11:49 AM