3 Ways to add Gradients into Xamarin.Forms Application

It’s the second half of 2021 and gradients not looks like something special, but a must-have in any solid app. Gradients can be everywhere in your app. You can see them in page background, in the splash screen, even in buttons!!! But how can we add it? What it will cost us? I’m here to show you three basic ways to add gradients in you Xamarin Forms Application.

1. The First Way – Xamarin.Forms Brushes

A `brush` enables you to paint an area, such as the background of control, using different approaches. `Brush` support in Xamarin.Forms are available in the `Xamarin.Forms` namespace on `iOS`, `Android`, `macOS`, the Universal Windows Platform (`UWP`), and the Windows Presentation Foundation (`WPF`). But, be careful it’s still a **PREVIEW** feature and still requires you to add `Brush_Experimental` in each platform project before `Forms.Init` method is invoked:

„`cs

Xamarin.Forms.Forms.SetFlags(„Brush_Experimental”);

„`

You can check the whole list of current experimental flags in an official Microsoft Documentation.

The `Brush` class itself is an abstract class that paints an area with its output. It’s implemented in thee classes in Xamarin.Forms at the moment:

* `SolidColorBrush`

* `LinearGradientBrush`

* `RadialGradientBrush`

We will focus on the Gradients Bruchs only, but you can read more about Solid Brushes in Documentation

a) Xamarin.Forms Brushes: Linear gradients

Make Linear Gradients is deam simple. Just add at last two `GradientStop` inside `LinearGradientBrush`, and that’s it, you have your first gradient painted. For Example:

„`xml

<Frame.Background>

<!– StartPoint defaults to (0,0) –>

</LinearGradientBrush>

</Frame.Background>

</Frame>

„`

As you may see, we can define `StartPoint` and `EndPoint` to set the gradient orientation. By manipulating these properties, you can create `horizontal`, `vertical`, and `diagonal` gradients, reverse the gradient direction, condense the gradient spread. Where values `(0,0)` represents the `top-left` corner of the area being painted, and `(1,1)` represents the `bottom-right` corner of the area being painted. For Example:

„`xml

<Frame.Background>

<!– StartPoint defaults to (0,0) –>

</LinearGradientBrush>

</Frame.Background>

</Frame>

„`

Same we can make for a buttons, just replace `frame` with a `button`:

„`xml

<Frame.Background>

<!– StartPoint defaults to (0,0) –>

<!– EndPoint defaults to (1,1) –>

</LinearGradientBrush>

</Frame.Background>

</Button>

„`

b) Xamarin.Forms Brushes: Radial gradients

With Radial Gradients we have all the same with `GradientStop` comparing to Linear but we have a difference with coordinates, here we set not the `StartPoint` and `EndPoint` points but it’s `Center` and `Radius`

„`xml

<Frame.Background>

<!– Center defaults to (0.5,0.5) –>

<!– Radius defaults to (0.5) –>

</RadialGradientBrush>

</Frame.Background>

</Frame>

„`

„`xml

<Frame.Background>

</RadialGradientBrush>

</Frame.Background>

</Frame>

„`

c) Brush Restrictions

Unfortunately, brushes allow setting only one single `RadialGradientBrush` or `LinearGradientBrush` like an Element Background. It still supported without any additional NuGets and allow to drow a lot of `GradientStop`, but only in one layer 😢 😭

2. The Second Way – PancakeView NuGet for Xamarin Forms

`PancakeView` – an extended ContentView for Xamarin.Forms with rounded corners, borders, shadows done by Steven Thewissen and Xamarin Community.

You can know all from this nice video from my good friend Gerald Versluis – PancakeView for Xamarin Forms

So, how we can add it? Just install `Xamarin.Forms.PancakeView` at first. When it will be installed, we can add first gradient, like in official example we add first with `Label` inside:

„`xml

<yummy:PancakeView CornerRadius=”12″ HeightRequest=”120″ BackgroundGradientStartPoint=”0,0″ BackgroundGradientEndPoint=”1,0″>

<yummy:PancakeView.BackgroundGradientStops>

<yummy:GradientStopCollection>

<yummy:GradientStop Color=”#FF0000″ Offset=”0″ />

<yummy:GradientStop Color=”#00FF00″ Offset=”0.5″ />

<yummy:GradientStop Color=”#0000FF” Offset=”1″ />

</yummy:GradientStopCollection>

</yummy:PancakeView.BackgroundGradientStops>

</yummy:PancakeView>

„`

Ok, nothing special, it’s pretty clear which property we should use as a start(`BackgroundGradientStartPoint`) and end(`BackgroundGradientEndPoint`) points for out gradients. Inside, same as for `Frame` you can put any controls.

a) And what we have here?

All works like in Xamarin.Forms, we still **can’t** make multiline gradients and creating a `Radial Gradient` also impossible to make here(as fat as I checked out). But `PancakeView` Control has more interesting properties by itself, like `Shadows` or `CorderRadius`(can be different for each corner).

3. The Third Way – Magic Gradients NuGet for Xamarin Forms

`Magic Gradients` – allow you to draw breathtaking backgrounds in your Xamarin.Forms application. You can add an unlimited number of complex linear and radial gradients to create unique effects. Control inspired by PancakeView and Gradient Magic. Powered by SkiaSharp.

a) Magic Gradients: Linear Gradients

To start working with Magic Gradients we need to install `MagicGradients` NuGet. After that, we can add `magic:GradientView` into your XAML where gradients will be painted, but comparing to all we saw today, we have a HUUUUUUGE difference:

> We can’t place any controls inside `GradientView`, only part of gradients* are allowed

What does it mean? – That we should plan our UI like multi-layer, where in the **Back** we have **Gradient** and in the **Front** all our **Controls** with `Transparent` **Background Colors**. We can easaly do it with a `Grid`, where at first we placing `GradientView` which now is a first(**Back**) Layer and in the same `Row` and `Column` place Xamarin Controls(like `Label`, `Button`, `CollectionView` or anything you want) which is now a second(**Front**) Layer:

„`xml

<Grid>

<magic:GradientView>

<magic:LinearGradient Angle=”45″>

<magic:GradientStop Color=”Red” />

<magic:GradientStop Color=”Yellow” />

</magic:LinearGradient>

</magic:GradientView>

</Grid>

</Frame>

„`

`LinearGradient` is responsible for drawing Linear Gradient, but we don’t have Start and End Point here, instead of that we have an `Angle`, which is a more common way in `CSS` to draw Gradients and it’s a damn useful way.

`GradientStop` – nothing special here, just like with `Brush` we can set `Color` and `Offset`

b) Magic Gradients: Radial Gradients

With Radial Gradients all is simple, we just set `Center` like with `Bruches`, but the radius is not one value, we can manipulate with X&Y via `RadiusX` and `RadiusY` properties

„`xml

<magic:GradientView VerticalOptions=”FillAndExpand”>

<magic:RadialGradient Center=”600,600″ RadiusX=”600″ RadiusY=”600″ Flags=”None”>

<magic:GradientStop Color=”Red” Offset=”0″ />

<magic:GradientStop Color=”Yellow” Offset=”0.5″ />

<magic:GradientStop Color=”Green” Offset=”1″ />

</magic:RadialGradient>

</magic:GradientView>

</Frame>

„`

c) Magic Gradients: Multi-Line Gradients

We can combine a couple layers of gradients, for making that we should just wrap our gradients with `GradientCollection` and place couple Linear or Radial Gradients inside.

„`xml

<magic:GradientView>

<magic:GradientCollection>

<magic:LinearGradient>

<!– … –>

</magic:LinearGradient>

<magic:LinearGradient>

<!– … –>

</magic:LinearGradient>

</magic:GradientCollection>

</magic:GradientView>

„`

d) Magic Gradients: CSS Gradients

Magic Gradients support styling with true `CSS` Gradients, it has parser which handles 95% of all existing gradients. But if you want to be sure which are working – just check Magic Gradients Playground, there more than 1600 CSS Gradients.

„`xml

<magic:GradientView VerticalOptions=”FillAndExpand” >

<magic:GradientView.GradientSource>

<magic:CssGradientSource>

<x:String>

<![CDATA[

linear-gradient(45deg, rgb(133, 28, 39) 0%, rgb(133, 28, 39) 1%,rgb(191, 40, 36) 1%, rgb(191, 40, 36) 15%,rgb(76, 15, 42) 15%, rgb(76, 15, 42) 38%,rgb(162, 34, 38) 38%, rgb(162, 34, 38) 55%,rgb(220, 46, 35) 55%, rgb(220, 46, 35) 62%,rgb(105, 21, 41) 62%, rgb(105, 21, 41) 63%,rgb(47, 9, 44) 63%, rgb(47, 9, 44) 69%,rgb(18, 3, 45) 69%, rgb(18, 3, 45) 100%)

]]>

</x:String>

</magic:CssGradientSource>

</magic:GradientView.GradientSource>

</magic:GradientView>

„`