This project will show you how to set up a simple MasterDetailPage in Xamarin.
Create a new Cross-Platform App (Xamarin.Forms) project.
Then navigate to the MainPage.xaml and set the <ContentPage> tag to <MasterDetailPage>:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterPageDemo.MainPage"
xmlns:pages="clr-namespace:MasterPageDemo">
....
....
</MasterDetailPage>Next you need to create a new ContentPage which will be your detail page. A detail page displays details about items on the master page. An example of a detail page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterPageDemo.MasterPageDetail"
Title="Detail">
<StackLayout Padding="10">
<Label Text="This is a detail page."/>
</StackLayout>
</ContentPage>Next you need to create a new ContentPage for your master page (the master page typically shows a list of items). Create a class for your MenuItems and bind them as an ItemSource in the ListView of your MasterPage.xaml. You will find an example of a master page MasterPage.xaml in this project. The next step is to create a view model for your MasterPage, containing an ObservableCollection of your menu items (ViewModel). The last step is to declare the MasterPage and the DetailPage in your MainPage.xaml:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterPageDemo.MainPage"
xmlns:page="clr-namespace:MasterPageDemo">
<MasterDetailPage.Master>
<!--MasterPage-->
<page:MasterPage x:Name="LocalMasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<!--DetailPage-->
<page:DetailPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>