# Xamarin Forms–Creating a Gradient Drawer Menu

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?


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664280467507/gnxw0raB0.png align="left")

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](https://prismlibrary.github.io/) as its MVVM framework and the design it was going to use was called [Doctriod](https://www.behance.net/gallery/58242781/Doctriod-Health-Care-App-UI-Kit-For-Free) 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:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664280490791/uCiUF1dlw.png align="left")


#### 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](https://github.com/Pietervdw/doctriod-xamarin)