Xamarin Forms Master Detail Page Icon, and Menu Icon

Question

I'm following the instructions here; https://www.syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/

The navigation bar icon is placed too far to the right by default. Is there a way to center it on the navigation bar? The hamburger menu icon is also pushed far to the right.

EDIT: I added a picture for an example of what I have. Funny thing, in another app the icon is all the way to the left.

EDIT:

Here's the code:

   public class RootPage : MasterDetailPage
{
    MenuPage menuPage;
    public RootPage()
    {


        menuPage = new MenuPage();
        menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
        Master = menuPage;
        NavigationPage page = new NavigationPage(new Home());
        page.BarBackgroundColor = Color.FromHex("#56198E");
        Detail = page;


    }

    void NavigateTo(MenuItem menu)
    {
        if (menu == null)
            return;
        Page displayPage = (Page)Activator.CreateInstance(menu.TargetType);
        NavigationPage page = new NavigationPage(displayPage);
        page.BarBackgroundColor = Color.FromHex("#56198E");
        Detail = page;

        menuPage.Menu.SelectedItem = null;
        IsPresented = false;
    }
}

 public class MenuPage : ContentPage
{
    public ListView Menu { get; set; }


    public MenuPage()
    {
        Icon = "settings.png";
        Title = "menu"; // The Title property must be set.
        BackgroundColor = Color.FromHex("#56198E");

        Menu = new MenuListView();

        var menuLabel = new ContentView
        {
            Padding = new Thickness(10, 36, 0, 5),
            Content = new Label
            {
                TextColor = Color.FromHex("#C8C8C8"),
                Text = "MENU",
            }
        };

        var layout = new StackLayout
        {
            Spacing = 0,
            VerticalOptions = LayoutOptions.FillAndExpand
        };
        layout.Children.Add(menuLabel);
        layout.Children.Add(Menu);

        Content = layout;
    }
}

 public class MenuListView : ListView
{
    public MenuListView()
    {
        List<MenuItem> data = new MenuListData();

        ItemsSource = data;
        VerticalOptions = LayoutOptions.FillAndExpand;
        BackgroundColor = Color.Transparent;
        // SeparatorVisibility = SeparatorVisibility.None;

        var cell = new DataTemplate(typeof(MenuCell));
        cell.SetBinding(MenuCell.TextProperty, "Title");
        cell.SetBinding(MenuCell.ImageSourceProperty, "IconSource");

        ItemTemplate = cell;
    }
}

   public class MenuListData : List<MenuItem>
{
    public MenuListData()
    {
        this.Add(new MenuItem()
        {
            Title = " Home",
            IconSource = "Home.png",
            TargetType = typeof(Home)
        });


        this.Add(new MenuItem()
        {
            Title = " Register for Classes",
            IconSource = "Calendar.png",
            TargetType = typeof(Register)
        });

        this.Add(new MenuItem()
        {
            Title = " Search Instructors",
            IconSource = "ContactsSearch.png",
            TargetType = typeof(SearchInstructors)
        });


    }
}

   public class MenuItem
{
    public string Title { get; set; }

    public string IconSource { get; set; }

    public Type TargetType { get; set; }
}

Answer 1

I would recommend trying different icon sizes. I was having some issues myself when the image was too large. In my tests I was originally using a 144x144 image and it worked correctly most of the time. When I attempted a 700x700 pixel image it was dead center and I would lose my title.

Screen Resolution - 768x1280 App Icon 144x144 - Slightly away from flush next to the Menu Icon

700x700 - Center

Menu Icon -44x44 (and always flush to the left)