Welcome to Xamarin Guy Show Blog

Keep updated for latest and Greatest Posts from Xamarin guy

Xamarin Forms MasterDetail Navigation Page Customizable [Tutorial 4]

Hey guys in this tutorial we will be creating xamrin forms master detail page.
At first we are going to set our MainPage.

Step1: Our App.Xaml.cs Will Look Like this:

Then we are going to create a model class name as MenuItems which will be having Title,Icons and TargetType attributes.
We are going to call all those attributes from code behind in MainPage.cs. So let’s create a class called MasterPageItems.cs.

Step2: Now : This MasterPageItems.cs class will be placed inside MenuItems folder:

It’s time to create a page let’s call as View1 and according to tutorial i have make many views for my clicked events.
Step3:Now you can create any Number of View1.Xaml(Pages) For Instance i will take 1:

Now carefully understand, We are going to create a new Masterdetail spage using the template. Please don’t take content page. Remove all the Pages that comes with it like MasterDetailPageMaster, MasterDetailPageDetail and MasterDetailPageMenuItem. Now we are now going to change that “MasterDetailPage” to MainPage
**Now Inside MainPage.xaml we re creating listview whose items will be bindable from the code behind of same page . Along with that we will be giving navigation to each list that is going to be clicked.

Next step is to invoke the list contents navigationDrawerList.ItemsSource that’s all. So show me the code 😀
Step5:Let us Invoke Some actions Inside Our MainPage.Cs

Step6 : Please Note: I have included ViewMain as random new page . You can create new page and give any name which you can include it as a mainpage.

Download Project From Here :


3 thoughts on “Xamarin Forms MasterDetail Navigation Page Customizable [Tutorial 4]

  • MadameGreenPea

    Thanks for this wonderful tutorial.

    Would you please let me know how can I put my logo next to the menu on the navigation bar?

    Any help would be appreciated.

    Thanks in advance.

    • samirgc

      I have added image circle plugin and called the control add it above the list view in xaml code and you are all set to go.

    • samirgc

Leave a Reply

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.