Xamarin表单主页详细信息页面图标和菜单图标

时间:2015-10-09 19:34:48

标签: master-detail xamarin-forms

我按照这里的指示行事; https://www.syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/

默认情况下,导航栏图标位于右侧太远的位置。有没有办法将它放在导航栏上?汉堡菜单图标也被推到右边。

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

enter image description here

编辑:

以下是代码:

   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 个答案:

答案 0 :(得分:3)

我建议尝试不同的图标尺寸。当图像太大时,我自己也遇到了一些问题。在我的测试中,我最初使用的是144x144图像,并且大部分时间都能正常工作。当我尝试一个700x700像素的图像时,它已经死了,我会失去我的头衔。

屏幕分辨率 - 768x1280 应用图标 144x144 - 稍微远离菜单图标旁边的刷新

700x700 - 中心

菜单图标-44x44(并且始终向左冲洗)