CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
LCJ
LCJ

Reputation: 22652

Center align toolbar items in Xamarin Forms

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?

enter image description here

Upvotes: 4

Views: 3234

Answers (1)

Cfun
Cfun

Reputation: 9671

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

Upvotes: 1

Related Questions