master-detail - Xamarin Forms 主详细信息页面图标和菜单图标

Question

我正在按照此处的说明进行操作； https://www.syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/

默认情况下，导航栏图标放置得太靠右侧。有没有办法让它在导航栏上居中？汉堡菜单图标也被推到了最右边。

编辑:我添加了一张图片作为我所拥有的示例。有趣的是，在另一个应用程序中，图标一直位于左侧。

编辑:

代码如下:

   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

我建议尝试不同的图标大小。当图像太大时，我自己也遇到了一些问题。在我的测试中，我最初使用的是 144x144 图像，大多数情况下它都能正常工作。当我尝试使用 700x700 像素的图像时，它位于正中心，我会失去我的标题。

屏幕分辨率 - 768x1280 应用程序图标 144x144 - 稍微偏离菜单图标旁边的齐平

700x700 - 中心

菜单图标 -44x44(并且始终向左齐平)