Xamarin Forms Master Detail Page Shell

Beautiful Shell Page Xamarin Forms :

For full complete video demo you can check it out here :

https://www.youtube.com/watch?v=hESzkKywazs&feature=youtu.be

(Important : Please check if you are on latest version of xamarinforms or not. (Xamarin Forms 4.0 +))

💻 At first we are going to set up our header theme for our shell page.

Note : You can redesign your UI more beautifully than mine for header template. ❤❤

HeaderContentView.xaml

HeaderContentView.xaml.cs

After that is all done then let’s head toward our Main Page.  Set your MainPage as your starting page from App.xaml.cs.

If you want to learn more about shell flyout Microsoft blog post is better to use for reference. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout

💻 Lets create our flyout shell where we will be disabling everything bottom tab bar. :

MainPage.xaml

MainPage.xaml.cs

Output:

935 total views, 8 views today

Leave a Reply