XF Shell Gradient Flyout with Magic Gradients

Easily style your Xamarin Forms Shell Flyout menu with no Renderers

I would like to continue the main idea of an article from Ian Vink 🤗. He shows how to create a gradient background with native Renderers for iOS and Android. Here I plan to show how we could create beautiful Flyout Header 😝

#Xamarin Forms #Shell: Creating a Gradient Flyout

mgierlasinski/MagicGradients

So, let’s start from the beginning. Yeah, it will be a complete article from creating a new project till a nice header in Shell. Here will be NO RENDERERS 🤯 only Xaml (and CSS *like the second example* 😋)

Creating Yet Another Xamarin Project

Here is nothing special New Project => Mobile App (Xamarin.Forms) => Project name & Location => Shell Template.

Create a new project

Select Xamarin Forms Mobile App

Set Name & Location of new project

Selecting Shell Template

As you can see Shell available out of the box 😄 and it’s great. But we should remember that in the current stable version of Xamarin Forms (v4.3) it’s not available for UWP. And we are lucky because it’s really no matter for us right now 😆.

Installing Magic Gradients

Again no rocket science, just search for MagicGradients NuGet and install it into your Xamarin.Forms project.

Search for MagicGradient NuGet

Good to notice that here we have dependency only on Xamarin.Forms and SkiaSharp

MagicGradient Dependencies

And why min Xamarin.Forms version 4.2 — because we create it when it was the newest Xamarin version. We might downgrade it to 4.0(when CSS comes in) but not lower. We could make it if you need it. But I think the best is to stay up to date with the newest versions. So please update your solutions, it worth it, because it has a lot of bug fixes done 😱.

Creating Flyour Header Template

Let’s start from a simple header and step by step make it better 😉.

In the beginning, just uncomment the default implementation of the Flyout Header. And replace it with some Label.

Default Flyout Header Implementation

And we should remove TabBar from ShellContent to move our Tabs into Flyout Menu.

Default TabBar with ShellContent inside

And here is code after all modifications:

And if you try to run this now, you should get something like this:

Simple Flyout Header with Label

Make Flyout Header looks better

Let’s Center the text; Make header higher; Change Label color for better contrast;

Centered White Label at Flyout Header

Ok, looks better… Now I think is a good moment to add some background Gradient in XAML

Add Some Gradient Background

I will show you a couple of simple XAML examples but all next examples will be in CSS(inline or in a separate file) because we could achieve much move power from them. We could also create the same in XAML but that piece of code will have 80–90% more than the same in CSS 🤨, yeah…

Seven Colors Gradient at Flyout Header

Quite simple Gradient, isn’t it? Now you free to play with colors, their count and enhance label by adding some icon to center.

Some Conclusion?

And I by myself will just provide a couple more examples like the conclusion of this article 😝.

Radial Complex XAML Gradient

Couple Gradients in XAML (radial + linear)

Some CSS Gradients from Magic Gradients Gallery

(Available in Playground app 🤯)

Is it all?

No, it’s just a couple of more than 400 examples, please be free to check Playground App and this NuGet. If you will have any questions or see how we could improve it, just ping us we don’t bite 🤠

Marcin Gierlasiński

Bohdan Benetskyi

mgierlasinski/MagicGradients