Is it possible to use a custom font for ToolbarItems?

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.

Best Answer


  • Also interested in this.

  • Awesome, thanks!

  • hellaandrewhellaandrew USMember ✭✭

    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.

  • PhilOxenbergPhilOxenberg USMember ✭✭

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

  • JohnHardmanJohnHardman GBUniversity mod

    @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.

  • hellaandrewhellaandrew USMember ✭✭

    @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.

  • JohnHardmanJohnHardman GBUniversity mod

    @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.

  • JamesParker.3081JamesParker.3081 USMember

    For the custom renderer what are you extending? ToolbarRenderer?

  • hellaandrewhellaandrew USMember ✭✭

    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..

  • tjismhtjismh USMember ✭✭

    @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?

  • DanielLDanielL PLInsider ✭✭✭✭

    @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.

  • tjismhtjismh USMember ✭✭

    Ok thanks. I will keep looking at it.

  • AnatoliiBAnatoliiB USUniversity ✭✭

    @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));

  • DanielLDanielL PLInsider ✭✭✭✭
    edited February 2017

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

    You just need to handle another class, instead of this one:

  • AnatoliiBAnatoliiB USUniversity ✭✭
    @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?
  • AnatoliiBAnatoliiB USUniversity ✭✭

    @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.

  • DanielLDanielL PLInsider ✭✭✭✭

    @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.

  • AnatoliiBAnatoliiB USUniversity ✭✭
    edited February 2017

    @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:

    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!
    I am thinking maybe using System.Reflection.Emit might help with help of MehodBuilder class

Sign In or Register to comment.