Photo by Luke Chesser on Unsplash
Xamarin Forms – Creating a Gradient Header
2 min read
In the design document for the Doctriod app you would’ve noticed that it uses a gradient header. To achieve a similar effect (shown in the screenshots below) in Xamarin Forms, we need to make changes in the Shared, Android and iOS project.
Start by creating a custom NavigationPage class in the shared project (Doctriod) called
GradientHeaderNavigationPage. The class should inherit from the
The only thing happening in the class mentioned above is that we’re setting the navigation bar text color to white. Next, because the project uses Prism, we need to change the
RegisterTypes method in the
App class (App.xaml.cs) to use our newly created
GradientHeaderNavigationPage class instead of the normal
In your Android project(Doctriod.Android) create a new class called
GradientHeaderNavigationPageRenderer in the Renderers folder. The class inherits from
NavigationPageRenderer and there’s a lot of stuff happening this class, but the method that does the work is called
SetGradientBackground which in turn is called from
You can view the GradientHeaderNavigationPageRenderer.cs file in its entirety on Github
Our last step will be to create a new class called
GradientHeaderPageRenderer in our iOS project(Doctriod.iOS) You can create the file anywhere inside the iOS project, but I like to create renderers inside the Renderers folder.
GradientHeaderPageRenderer will inherit from
PageRenderer and the method that does most of the work is called
SetGradientBackground and is called from
You can view the contents of the entire file on Github.
That should do it. If all goes well you should see similar results as shown in the images at the top of this post. Additional reading and research I used to compile this post is listed below.
Thank you for reading. Until next time, keep coding!
- [github.com/CrossGeeks/CustomNavigationBarSa.. "github.com/CrossGeeks/CustomNavigationBarSa..")
- [stackoverflow.com/questions/46809733/how-to.. "stackoverflow.com/questions/46809733/how-to..")
- [forums.xamarin.com/discussion/132362/cross-.. "forums.xamarin.com/discussion/132362/cross-..")
- [github.com/vackup/StatusBarGradientBackgrou.. "github.com/vackup/StatusBarGradientBackground")