Xamarin Master Details Page

How to Set Master Details Page in Xamarin Forms
-----------------------------------------------------------------------

Add 3 File in New Folder in Soultion

1.RootPage
2.SideMenuListview
3.SideMenu



1.RootPage
----------------------
public class RootPage : Xamarin.Forms.MasterDetailPage
    {
        public RootPage ()
        {
            var menuPage = new MenuPage ();

            menuPage.Menu.ItemSelected += (sender, e) => NavigateTo (e.SelectedItem as MenuItem);

            Master = menuPage;
            Detail = new NavigationPage (new ContractsPage ());
        }

        void NavigateTo (MenuItem menu)
        {
            Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);

            Detail = new NavigationPage (displayPage);

            IsPresented = false;
        }
    }

------------------------
2.SideMenuListview
----------------------

namespace SideMenuPagePOC.MasterDetailsComponents
{
    public class SideMenuListView : ContentPage
    {
        public ListView Menu { get; set; }
        public SideMenuListView()
        {
            Icon = "settings.png";
            Title = "menu"; // The Title property must be set.
            BackgroundColor = Color.FromHex("333333");

            Menu = new MenuListView();

            var menuLabel = new ContentView
            {
                Padding = new Thickness(10, 36, 0, 5),
                Content = new Label
                {
                    TextColor = Color.FromHex("AAAAAA"),
                    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 SideMenu();
            ItemsSource = data;
            VerticalOptions = LayoutOptions.FillAndExpand;
            BackgroundColor = Color.Transparent;

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

            ItemTemplate = cell;
            SelectedItem = data[0];
        }
    }



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

        public string IconSource { get; set; }

        public Type TargetType { get; set; }
    }
}



------------------------
3.SideMenu
----------------------

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

            this.Add(new MenuItem()
            {
                Title = "Leads",
                IconSource = "leads.png",
                TargetType = typeof(Page2)
            });

            this.Add(new MenuItem()
            {
                Title = "Accounts",
                IconSource = "accounts.png",
                TargetType = typeof(Page3)
            });

            this.Add(new MenuItem()
            {
                Title = "Opportunities",
                IconSource = "opportunities.png",
                TargetType = typeof(Page4)
            });
        }
    }


-----------------------------------------------------------------------------
Add your Pages in SideMenu
Set Root Page in  App.xaml.cs as MainPage

Comments

Popular posts from this blog

Listview SelectedItem in MVVM

Button click event with current object from listview having button

SideMenu React native