Custom MasterDetail Page in Xamarin Forms

Question

I want to design a flyout menu which should have same look and feel in all platforms i.e. android, ios and windows. It should come out from top right corner. For that I have used Xamarin forms masterDetail page but it is rendering differently in all platforms and I am unable to do the customization. Can anyone guide me which approach should I follow, Xamarin forms with customisation or xamarin native with user control for all platforms. If customisation is possible the how?

Currently I am doing this in xamarin forms to get flyout menu and it is working in all platforms.

public class DashBoardView : MasterDetailPage
{
    public DashBoardView()
    {
        Master = new ProfilePage();
        Detail=  new NavigationPage(new DetailPage())
        {
            BarBackgroundColor = Color.FromHex("#56c7f6"),
            BarTextColor = Color.White
        };              
    }      
}

Answer 1

You will probably need to write a Custom Renderer for each platform, I don't think you will be able to get the behavior you want by customizing the stock MasterDetail page.

Answer 2

if you want rtl MasterPage in xamarin forms there're two ways to do that:

first ==>

• you will make class in shared project that inherit from MasterDetailPage

• you will go to each platform project and write class which renderer the class you made it in shared project and write some code for each platform that makes

watch these: https://www.codeproject.com/Articles/1100122/Xamarin-Master-Detail-Page

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/

Second ==> - you Can do it by one class in Shared project but not by using MasterDetailPage

• you will do it by Animation

Answer 3

You could try using the Slide Over Kit plugin.

Its free. Details here:

https://michaelridland.com/xamarin/announcing-slideoverkit-for-xamarin-forms/

Looks like this: