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.

Solution

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>

Comments

[Sathish]

Thanks, My question would have been confusing to understand. I just wanted to make this same using XAML and not fully designed the layouts using .cs alone. Thanks again for your quick response.

[User1]

I have now added a Xaml example to my answer

[Sathish]

You are awesome, If it could contain multiple detail pages then should I added more than once <MasterDetailPage.Detail> tag in XAML?

[User1]

Detail will hold a page for you. If you would like to dynamically change that page you will probably have to look at content controls and binding. But this will get you started. If this is the correct answer please mark it as correct