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?
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:
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
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:
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