Forum Xamarin.Forms

How to design a master detail page like Windows 10 for Xamarin forms UWP

A_VA_V USMember ✭✭✭
edited October 2018 in Xamarin.Forms

I want to design my master detail page menu like 1 in below image for Xamarin forms UWP.

Can any one please help me how implement this by using master detail page?I created one contentview for displaying the items like 1.Where can I use that Contentview for displaying menu like 1 in Masterpage.


  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @Ashok Are you using the Master-Detail template? Did you try replacing the Text with Icon?

  • A_VA_V USMember ✭✭✭

    Hi @ShantimohanElchuri yes I am using Master Detail page and it is working fine. But my requirement is I want to show left menu like 1 after selecting menu item or minimize the master page.Please check below attachment for my requirement look like.

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @Ashok I am not finding any simple and ready way of doing it. Even Syncfusion and Telerik don't have any control that meets your requirement.

    You will have to design your own way. You may have to do something like below:

    1. Change Menubehavior in MainPage.xaml.cs to Split.
    2. Add IconPath to HomeMenuIItem class.
    3. Set IconPath property also to the menuitems in ManuPage.xaml.cs
    4. In the MenuPage.xaml remove the Label and add Image whose Source is bound to IconPath.
  • A_VA_V USMember ✭✭✭

    Thanks @ShantimohanElchuri I will try to design that by following your suggestions.. :)

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @Ashok said:
    Thanks @ShantimohanElchuri I will try to design that by following your suggestions.. :)

    Sorry, I tried it myself a day before but couldn't post the results as I was drawn into something else.

    The MasterBehavior.split doens't work for mobiles, it seems. Whatever I do, it doesn't come up in mobiles. As such I know what you want is seen in web portals but never seen on mobiles. A version of this may be the TabbedPage. Now you can place the Tabs at the bottom even in Android like in iOS. May be, if ;you are willing, you can try that.

Sign In or Register to comment.