Search code examples
c#xamarin.formscustom-renderer

Xamarin Forms - custom renderer to centre page title in ios


In Xamarin Forms I'm trying to left align the page title, I know I need a custom renderer but I'm not sure where to go after the following code.

This might not even be correct, but I think I need to create a page renderer and do the alignment there?

[assembly: ExportRenderer(typeof(Page), typeof(gl_mobile_app.iOS.TitleExRenderer))]
namespace gl_mobile_app.iOS
{
    public class TitleExRenderer : Xamarin.Forms.Platform.iOS.PageRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            // align title
        }
    }
}

Solution

  • This is not officially supported by apple in the default UINavigationBar.

    You can try a trick: put a label in the TopItem.LeftBarButtonItem and dont use the default Title property

    Something like this in your custom renderer:

    var label = new UILabel();
    //this is the variable containing the title you need to pass it as a bindable property
    label.Text = title; 
    label.TextAlignment = UITextAlignment.Left;
    label.SizeToFit();
    NavigationController.NavigationBar.TopItem.LeftBarButtonItem = new UIBarButtonItem(label);
    

    Update

    You can also give a read to this excellent blog post: http://www.xamboy.com/2017/12/06/navigation-bar-customization-in-xamarin-forms/

    Update 2

    You can try to grab the default page title, use it in your left position and then dispose it, something like this:

    var label = new UILabel();
    //get the default title
    label.Text =  NavigationController.NavigationBar.TopItem.Title; 
    label.TextAlignment = UITextAlignment.Left;
    label.SizeToFit();
    
    //empty the default title (try with empty string or null if empty doesnt work)
    NavigationController.NavigationBar.TopItem.Title = "";    
    
    NavigationController.NavigationBar.TopItem.LeftBarButtonItem = new UIBarButtonItem(label);
    

    This is untested, let me know if it works out :)