Gradient View In Xamarin.Forms Using Magic Gradients

 

Introduction

 

In this tutorial, we will learn how to implement Gradient view in Xamarin.Forms with very simple steps.To achieve the gradient view, we are using the Magic Gradients plugin for Xamarin Forms.Magic Gradients is a NuGet that provide a possibility to add beautiful and enhanced gradients into Xamarin.Forms applications. It supports all common Xamarin platforms, such as Android, iOS and UWP. It is built upon SkiaSharp to draw a simple multi-color or multi-layer engaged gradients. Without further delay, we will jump into the coding part of the article.

 

Magic Gradient

 

Magic Gradients provides GradientView control which is just a surface for SkiaSharp inside. Inside GradientView you need to set GradientSource which is a default container. Inside it you can place single gradients LinearGradient, RadialGradient or multiple gradients with GradientCollection as a top element.

 

Coding Part

I have split the coding part into 4 steps as in the following.

• Step 1: Creating new Xamarin.Forms Projects.
• Step 2: Setting up the libraries.
• Step 3: Implementation of the Gradient Views. 

Step 1 - Creating new Xamarin.Forms Projects

• Create New Project by Selecting New Project Select Xamarin Cross Platform App and Click OK.
  
  
  
  
• Then Select Android, iOS and UWP Platforms as shown below with Project template as "Blank" and Click OK.
  
  
  

Step 2 - Setting up the libraries

 

We need to install the NuGet package for Magic Gradients by using any of the below methods.

1. Search for MagicGradients in NuGet browser.
2. Using Package Manager CLI: “Install-Package MagicGradients”.
3. Using the .Net CLI: “dotnet add package MagicGradients”.
4. Editing yourcsproj file by adding the following and restoring the project.
   

   <PackageReference Include="MagiGradients" Version="1.0.0" />

We should install it only for our "Core" project.

Step 3 - Implementation of the Gradient Views

• Open your designer file and add the following namespace for magic gradient view.
  

  xmlns:magic="clr-namespace:MagicGradients;assembly=MagicGradients"

• After that we can using Magic Gradients as like in the following code snippet.Inside it you can place single gradients LinearGradient, RadialGradient or multiple gradients with GradientCollection as a top element.
  
  
• Here, we have taken LinearGradient as an example.
  

  <magic:GradientViewVerticalOptions="FillAndExpand">
      <magic:GradientView.GradientSource>
          <magic:LinearGradient Angle="90">
              <magic:GradientStop Color="Orange" Offset="0" />
              <magic:GradientStop Color="#ff0000" Offset="0.6" />
          </magic:LinearGradient>
      </magic:GradientView.GradientSource>
  </magic:GradientView>

• We can use gradient collection for more than one gradient source like below.
  

  <magic:GradientViewVerticalOptions="FillAndExpand">
      <magic:GradientView.GradientSource>
          <magic:GradientCollection>
              <magic:LinearGradient Angle="45">
                  <magic:GradientStop Color="Orange" Offset="0" />
                  <magic:GradientStop Color="#ff0000" Offset="0.6" />
              </magic:LinearGradient>
              <magic:LinearGradient Angle="90">
                  <magic:GradientStop Color="#33ff0000" Offset="0.4" />
                  <magic:GradientStop Color="#ff00ff00" Offset="1" />
              </magic:LinearGradient>
          </magic:GradientCollection>
      </magic:GradientView.GradientSource>
  </magic:GradientView>

Output

 

 

Download Code

 

You can download the code from GitHub. If you have doubts, feel free to post a comment. If you like this article and it's useful to you, do like and share the article & star the repository on GitHub.