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…

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

Xamarin Forms–Creating a Gradient Drawer Menu

More from this blog

A Study in Flutter: Dynamic Forms

Introduction to CSharp2Dart.com

Searching Azure Blob Storage using Blob Index

Using AWS Cognito with Vue/NuxtJS

Using AWS Cognito with Xamarin Forms

Creating a Gradient Drawer Menu

Shared Project

Android Project

iOS Project

Command Palette

More from this blog

Creating a Gradient Drawer Menu

Shared Project

Android Project

iOS Project