Xamarin create masterdetailpage with multiple detail view using xaml

Question

I'm new to Xamarin framework and developing an application for both iOS and Droid shared application. I just wanted to make a left slider menu like a facebook app using Masterdetailpage layout with XAML. I couldn't find the proper example or stub for it to develop an structural programming. It would be great help If anyone can suggest me the link or a example piece of code to start my journey from now on my current project? Thank in advance.

Answer 1

MasterDetailPageDemoPage is a link to a master detail page example from GitHub Xamarin-forms-samples. I will post the code from this link as well incase the link breaks in the future

using System;
using Xamarin.Forms;

namespace FormsGallery
{
    class MasterDetailPageDemoPage :  MasterDetailPage
    {
        public MasterDetailPageDemoPage()
        {
            Label header = new Label
            {
                Text = "MasterDetailPage",
                Font = Font.SystemFontOfSize(30, FontAttributes.Bold),
                HorizontalOptions = LayoutOptions.Center
            };

            // Assemble an array of NamedColor objects.
            NamedColor[] namedColors = 
                {
                    new NamedColor("Aqua", Color.Aqua),
                    new NamedColor("Black", Color.Black),
                    new NamedColor("Blue", Color.Blue),
                    new NamedColor("Fuschia", Color.Fuschia),
                    new NamedColor("Gray", Color.Gray),
                    new NamedColor("Green", Color.Green),
                    new NamedColor("Lime", Color.Lime),
                    new NamedColor("Maroon", Color.Maroon),
                    new NamedColor("Navy", Color.Navy),
                    new NamedColor("Olive", Color.Olive),
                    new NamedColor("Purple", Color.Purple),
                    new NamedColor("Red", Color.Red),
                    new NamedColor("Silver", Color.Silver),
                    new NamedColor("Teal", Color.Teal),
                    new NamedColor("White", Color.White),
                    new NamedColor("Yellow", Color.Yellow)
                };

            // Create ListView for the master page.
            ListView listView = new ListView
            {
                ItemsSource = namedColors
            };

            // Create the master page with the ListView.
            this.Master = new ContentPage
            {
                Title = "Color List",       // Title required!
                Content = new StackLayout
                {
                    Children = 
                    {
                        header, 
                        listView
                    }
                }
            };

            // Create the detail page using NamedColorPage
            NamedColorPage detailPage = new NamedColorPage(true);
            this.Detail = detailPage;

            // For Android & Windows Phone, provide a way to get back to the master page.
            if (Device.OS != TargetPlatform.iOS)
            {
                TapGestureRecognizer tap = new TapGestureRecognizer();
                tap.Tapped += (sender, args) =>
                    {
                        this.IsPresented = true;
                    };

                detailPage.Content.BackgroundColor = Color.Transparent;
                detailPage.Content.GestureRecognizers.Add(tap);
            }

            // Define a selected handler for the ListView.
            listView.ItemSelected += (sender, args) =>
                {
                    // Set the BindingContext of the detail page.
                    this.Detail.BindingContext = args.SelectedItem;

                    // Show the detail page.
                    this.IsPresented = false;
                };

            // Initialize the ListView selection.
            listView.SelectedItem = namedColors[0];
        }
    }
}

If you would like to do this in Xaml see this example below:

RootPage

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"       
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:view="clr-namespace:MyApp.Views;assembly=MyApp"
    x:Class="MyApp.Views.RootPage">
    <MasterDetailPage.Master>
        <view:MainMenu />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <view:HomePage />
    </MasterDetailPage.Detail>
</MasterDetailPage>

MainMenu

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="MyApp.Views.MainMenu">
    <Label Text="I should actually be a list or something" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

HomePage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="MyApp.Views.HomePage">
    <Label Text="Hello World" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>