After more than a year of hiatus of writing blog posts, I’m back. This post is the first in a series that was originally intended to form part of a book called “From Design to App Store – Building a Xamarin Forms app using Adobe XD and Prism”.

Pretty catchy title right?

The book would have detailed the steps involved in taking an app design in Adobe XD and creating a Xamarin Forms app from it. The app would’ve used Prism as its MVVM framework and the design it was going to use was called Doctriod by Jitu Raut. The design is fantastic and I urge you to use it for your apps. It does have a few challenging design aspects which was one of the reasons I chose it.

I have however decided to rather post the content of the book as a series of blog posts. There are not a lot of Xamarin Forms posts on achieving certain designs and I thought you might benefit more from a few blogs posts than from a book.

So without further ado, let’s get cracking…

Creating a Gradient Drawer Menu

The effect we’re trying to achieve is represented in the following images for Android and iOS:

Shared Project

The first step you need to take is to create a new class called GradientContentPage that inherits from ContentPage in your shared project (Mine is called Doctriod). There is not much happening in this class other than two properties:

Next, open the Master-Detail Page and add the GradientContentPage as a child element of <MasterDetailPage.Master>

Android Project

In your Android project (in my case its called Doctriod.Android) add a new file called GradientContentPageRenderer. I like to put any custom renderers into a folder called Renderers The file content should look like the following:

iOS Project

The last step is to make this work for iOS, add a new file called GradientContentPageRenderer to your iOS project (Mine is called Doctriod.iOS). Similar to the Android project, it is located in the Renderers folder.

That should just about do it. If you want to see the complete solution, I’ve open-sourced the project for the book and you can find it on Github