2
votes

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.

enter image description here

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; }
}
1
What do you mean by "too far"? It's implemented in platform standard ways.Daniel Luberda
Thanks, I added a picture to illustrate what its doing. This is the same code as another app where the page icon is pushed all the way to the left. The menu icon is also pushed all the way to the left in the other app as well. Where are they supposed to be displayed?Patrick Goode
That's a strage thing... There must be something in your code. It's hard to help without it.Daniel Luberda
Ok edited avove. ThanksPatrick Goode
I've been wrestling with this same issue. My problem was that the Icon was flush to the left, then it was to the left but was shifted a bit right as if there was an invisible copy of itself. Now its right in the middle of the screen. One thing I did change was the image size. I'll do some testing and see if I can't post results, see if that helps.Christopher Richmond

1 Answers

3
votes

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)