Xamarin : Master and Detail page

Xamarin : Master and Detail page

Steps 

1. Create new page and give name "masterpage"
2. Change "ContentPage" to "MasterDetailPage" at the fist line in the design 
3. open cs file and inherit with "MasterDetailPage" public partial class MasterDetailMainPage : MasterDetailPage
4. Add class name in the first tag line in the design
   xmlns:local="clr-namespace:App1;assembly=App1"  
   App1 is your application name
5. Create left menu as below
   

     <MasterDetailPage.Master>
       <ContentPage Title="Menu">
         <StackLayout Orientation="Vertical">
           <Label Text="This is slide out menu"></Label>
           <Button Text="One" Clicked="Menu1"></Button>
           <Button Text="Two"  Clicked="Menu2"></Button>
           <Button Text="Three" Clicked="Menu3"></Button>
         </StackLayout>
       </ContentPage>
     </MasterDetailPage.Master>
   
   

6. Create detail container view
   

   <MasterDetailPage.Detail>
       <ContentPage Title="Menu">
         <StackLayout Orientation="Vertical"></StackLayout>
       </ContentPage>
     </MasterDetailPage.Detail>
   

7. Full design code as like below

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:local="clr-namespace:App1;assembly=App1"      
             x:Class="App1.MasterDetailMainPage"
                   Title="Master Detail Page">
 
  <MasterDetailPage.Master>
    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical">
        <Label Text="This is slide out menu"></Label>
        <Button Text="One" Clicked="Menu1"></Button>
        <Button Text="Two"  Clicked="Menu2"></Button>
        <Button Text="Three" Clicked="Menu3"></Button>
      </StackLayout>
    </ContentPage>
 
  </MasterDetailPage.Master>
  
  
  <MasterDetailPage.Detail>
    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical"></StackLayout>
    </ContentPage>
  </MasterDetailPage.Detail>

</MasterDetailPage>

Code:

Write a code to redirect to menu selected page

Open file - MasterDetailMainPage.xaml.cs

        void Menu1(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new MasterDetailPageOne());
            IsPresented = false;
        }
        void Menu2(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new MasterDetailPageTwo());
            IsPresented = false;
        }
        void Menu3(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new MasterDetailPageThree());
            IsPresented = false;
        }



Output