Center align toolbar items in Xamarin Forms

Question

I have a content page with toolbar added as follows

ContentPage

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ChartList : ContentPage
{
    public ChartList ()
    {
        InitializeComponent ();

        //public class ToolbarItem : MenuItem
        ToolbarItem settings = new ToolbarItem
        {
            Icon = "icon.png",
            Text = "Settings",
            Command = new Command(this.ShowHomePage),
        };

        this.ToolbarItems.Add(settings);
    }

    private void ShowHomePage()
    {
        this.Navigation.PushAsync(new MainPage());
    }
}

App.Xaml.cs

    public App()
    {
        InitializeComponent();

        ContentPage p = new MyHomeScreen2.MainPage();
        MainPage = new NavigationPage(p)
        {
            BarBackgroundColor = Color.Purple,
            BarTextColor = Color.White
        };
    }

I need to align the icon on the center of the toolbar. How to do it in Xamarin Forms?

I think you will need a custom renderer for this, check this out: stackoverflow.com/questions/36717697/… — Paul Karam
@Cfun I haven't been into Xamarin for a long time now, so you are most likely right. I am gonna hope back in soon, so that's nice information to have. Thank you. — Paul Karam
@PaulKaram nice to have you back and have a bigger community using this amazing technology. Good to know it was helpful info. — Cfun

Cfun Cfun · Accepted Answer · 2020-11-29T17:03:37

I know at the time of the question Shell was probably not introduced yet, but now if your app is based on Shell you can achieve it easily without even a custom renderer, and also customize your toolbar using Shell.TitleView as Microsoft example:

<ContentPage ...>
    <Shell.TitleView>
        <Image Source="xamarin_logo.png"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </Shell.TitleView>
    ...
</ContentPage>

It will probably not be perfectly centered because of a bug in Xamarin.forms Title View's content horizontal aligment

Center align toolbar items in Xamarin Forms

1 Answers