MasterDetailPage example in xamarin forms

Q: How to use Master Detail Page in Xamarin Forms.

Ans:

 1. Create a Mobile Project using "Visual Studio" or "Xamarin Studio".

 

 

 2. Create a page in shared section and type the code below.

               public class MainPage : MasterDetailPage

    {

        public MainPage()

        {

            var menuPage = new MenuPage();

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

            Master = menuPage;

            Detail = new NavigationPage(new HomePage());

        }

        void NavigateToPage(MenuItem menu)

        {

            Page displayPage = (Page)Activator.CreateInstance(menu.TargetType);

            Detail = new NavigationPage(displayPage);

            IsPresented = false;

        }

    }

 3. Create a MenuPage like below
                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("333333");
                                        Menu = new MenuListView();
                                        var layout = new StackLayout
                                       {
                                               Spacing = 0,
                                               VerticalOptions = LayoutOptions.FillAndExpand
                                        };
                                        layout.Children.Add(Menu);
                                        Content = layout;
                            }
                 }

 4. Create the "ManuItem" class, like below

               public class MenuItem  {
                        public string Title { get; set; }
                        public string IconSource { get; set; }
                        public Type TargetType { get; set; }
               }

 5. Create a class inheritance listview, like below

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

            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 MenuListData : List<MenuItem>
    {
        public MenuListData()
        {
            this.Add(new MenuItem()
            {
                Title = "Home",
                TargetType = typeof(HomePage)
            });

            this.Add(new MenuItem()
            {
                Title = "About Us",
                TargetType = typeof(AboutUsPage)
            });
        }
    }


 6. Create the content pages according to your requirement.
   public class HomePage : ContentPage
    {
        public HomePage()
        {
            BackgroundColor = Color.Yellow;
            Title = "Home Page";
            Content = new Label
            {
                Text = "Home Page!",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
            };
        }
    }

    public class AboutUsPage : ContentPage
    {
        public AboutUsPage()
        {
            BackgroundColor = Color.Green;
            Title = "AboutUs Page";
            Content = new Label
            {
                Text = "About Us Page!",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
            };
        }
    }

 7. Output