Xamarin.Forms is a fully-featured mobile app development platform that has support for astonishing features. For instance, you could possibly create an animation by using a trigger, applying a material design rule, implementing unique effects, etc. Here, in this blog, we will learn about a NuGet package called Magic Gradient which helps in adding unique effects to the application.
Introduction
Magic Gradient is a plugin that is used to create a Gradient View in Xamarin.Forms. It is NuGet Package, using it we can add gradients into our Xamarin.Forms Application. We can add multiple numbers of simple or complex linear or radial gradients for unique effects. This control is inspired by PancakeView and GradientView.
It is supported by all three Android, iOS, and UWP platforms and is built upon SkiaSharp, to draw a simple, multicolor, or multi-layer gradient. It is a 2D graphics system for .NET and C#. It is used for 2D graphics in Xamarin.Forms Application and an Open Source graphics engine. It is used extensively in Google’s products. We can draw 2D vector graphics, text, and bitmap using SkiaSharp.
In this blog, we will be going to learn about Magic Gradients and how to implement gradient view in our Xamarin.Forms Application.
As we know MagicGradient is a NuGet Package, so we have to first install it in our application then only we will able to use it. Magic Gradient Provides GradientView control which is the surface for SkiaSharp. GradientSource is a default container that is set inside GradientView. Inside GradientSource we can add Single Gradients, Linear Gradients, Multiple Gradients, and Radial Gradients with a GradientCollection which is the top element of these Gradients. It also accepts CSSGradientSource using inline CSS/binding CSS from a file. It uses StyleClass / StyleId and we can use inline CSS to not import any CSS file in our project. We have some string inline in the XAML file or resources.
How to install Magic Gradient?
We can install it from the NuGet Package Manager. Inside Package Manager Console write: Install-Package MagicGradients
or in Package Manage NuGet Package for solution Browse MagicGradients
and install in the core project. You can also edit csproj file and add <PackageReference Include = " MagiGradients " Version = " 1.0.0 " />
How to use Magic Gradients?
After installing Package we have to add namespace like this xmlns:magic = " clr-namespace:MagicGradients; assembly = MagicGradients"
Now we can use Magic Gradient in our project
Let’s see the example:
First of all, we will create a new Xamarin.Forms project with the proper name. Secondly, we will set up libraries. This means we will install Magic Gradients from Package Manager as shown above. After that, we will implement Gradient View.
Implementation
Main page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml" x:Class = " MagicGradient.MainPage " xmlns:magic = " clr-namespace:MagicGradients;assembly=MagicGradients" > <Grid> <magic:GradientView VerticalOptions = " FillAndExpand " > < magic:GradientView.GradientSource > <magic:GradientCollection> <magic:LinearGradient Angle ="45"> <magic:GradientStop Color="Red" Offset="0"></magic:GradientStop> <magic:GradientStop Color = " Orange " Offset="0.6" > </magic:GradientStop> </magic:LinearGradient> <magic:LinearGradient Angle="90"> <magic:GradientStop Color="Green" Offset="0"> </magic:GradientStop> <magic:GradientStop Color="Yellow" Offset="0.6"></magic:GradientStop> </magic:LinearGradient> </magic:GradientCollection> </magic:GradientView.GradientSource> </magic:GradientView> <StackLayout > <Button Text=" Page 1" Clicked="Button_Clicked" HeightRequest="50" BackgroundColor="Transparent" TextColor="Black"/> <Button Text=" Page 2" Clicked="Button_Clicked_1" BackgroundColor="Transparent" TextColor="Black"/> <Button Text=" Page 3" Clicked="Button_Clicked_2" BackgroundColor="Transparent" TextColor="Black"/> <Button Text=" Page 4" Clicked="Button_Clicked_3" BackgroundColor="Transparent" TextColor="Black"/> <Button Text=" Page 5" Clicked="Button_Clicked_4" BackgroundColor="Transparent" TextColor="Black"/> </StackLayout> </Grid> </ContentPage>
MainPage(Code-behind)
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } async private void Button_Clicked(object sender, EventArgs e) { await Navigation.PushModalAsync (new Page1() ); } async private void Button_Clicked_1(object sender, EventArgs e) { await Navigation.PushAsync (new Page2() ); } async private void Button_Clicked_2(object sender, EventArgs e) { await Navigation.PushAsync (new Page3() ); } async private void Button_Clicked_3(object sender, EventArgs e) { await Navigation.PushAsync (new Page4() ); } async private void Button_Clicked_4(object sender, EventArgs e) { await Navigation.PushAsync (new Page5() ); } }
Fig: Main Page
Page1 code
<Grid> <magic:GradientView VerticalOptions="FillAndExpand"> <magic:GradientView.GradientSource> <magic:CssGradientSource> <x:String> <![CDATA[ linear-gradient(242deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%,rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%,rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%,rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%,rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%,rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%),linear-gradient(152deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%,rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%,rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%,rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%,rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%,rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%),linear-gradient(11deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%,rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%,rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%,rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%,rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%,rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%),linear-gradient(27deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%,rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%,rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%,rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%,rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%,rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%,rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%),linear-gradient(317deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%,rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%,rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%,rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%,rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%,rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%),linear-gradient(128deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%,rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%,rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%,rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%,rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%,rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%,rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%,rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%),linear-gradient(90deg, rgb(185, 139, 80),rgb(176, 26, 6)) ]]> </x:String> </magic:CssGradientSource> </magic:GradientView.GradientSource> </magic:GradientView> </Grid>
Fig: Page 1
Page2 Code
<magic:GradientView VerticalOptions="FillAndExpand"> <magic:GradientView.GradientSource> <magic:RadialGradient Center="0.5,0.5" RadiusX="200" RadiusY="200"> <magic:GradientStop Color="Yellow" Offset="0" /> <magic:GradientStop Color="Green" Offset="0.5" /> <magic:GradientStop Color="Blue" Offset="1" /> </magic:RadialGradient> </magic:GradientView.GradientSource> </magic:GradientView> <magic:GradientView VerticalOptions="FillAndExpand"> <magic:GradientView.GradientSource> <magic:RadialGradient Center="600,600" RadiusX="600" RadiusY="600" Flags="None"> <magic:GradientStop Color="Yellow" Offset="0" /> <magic:GradientStop Color="Green" Offset="0.5" /> <magic:GradientStop Color="Blue" Offset="1" /> </magic:RadialGradient> </magic:GradientView.GradientSource> </magic:GradientView> </StackLayout>
Fig: Page 2
Page 3 Code
<Grid> <magic:GradientView VerticalOptions="FillAndExpand"> <magic:GradientView.GradientSource> <magic:CssGradientSource> <x:String> <![CDATA[ radial-gradient(circle at 77% 43%, rgba(168, 168, 168,0.04) 0%, rgba(168, 168, 168,0.04) 50%,rgba(10, 10, 10,0.04) 50%, rgba(10, 10, 10,0.04) 100%),radial-gradient(circle at 33% 65%, rgba(248, 248, 248,0.04) 0%, rgba(248, 248, 248,0.04) 50%,rgba(228, 228, 228,0.04) 50%, rgba(228, 228, 228,0.04) 100%),radial-gradient(circle at 92% 79%, rgba(152, 152, 152,0.04) 0%, rgba(152, 152, 152,0.04) 50%,rgba(28, 28, 28,0.04) 50%, rgba(28, 28, 28,0.04) 100%),radial-gradient(circle at 91% 13%, rgba(41, 41, 41,0.04) 0%, rgba(41, 41, 41,0.04) 50%,rgba(214, 214, 214,0.04) 50%, rgba(214, 214, 214,0.04) 100%),linear-gradient(125deg, rgb(11, 127, 96),rgb(139, 205, 191)) ]]> </x:String> </magic:CssGradientSource> </magic:GradientView.GradientSource> </magic:GradientView> </Grid>
Fig:Page 3
Page 4 Code
<Grid> <magic:GradientView VerticalOptions="FillAndExpand"> <magic:GradientView.GradientSource> <magic:CssGradientSource> <x:String> <![CDATA[ linear-gradient(305deg, rgb(160, 222, 219),rgb(3, 165, 209)) ]]> </x:String> </magic:CssGradientSource> </magic:GradientView.GradientSource> </magic:GradientView> </Grid>
Fig: Page 4
Page 5 Code
<Grid> <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> </Grid>
Fig: Page 5
Conclusion:
In this blog, we have learned about Magic Gradient which is NuGet, used for adding gradient into the Xamarin.Forms Application. Using this plugin, we can add various attractive gradients in our project. We can Add Linear, Radial, Single, or Multiple Gradient. We have also seen how to install and add Magic Gradient into a project. It is easy to attach with designs, easy to use, simple and open source, and up to date with new versions.
Author Bio: Vinod Satapara – Technical Director, iFour Technolab USA. Inc
Technocrat and entrepreneur with years of experience building large scale enterprise web, cloud and mobile applications using latest technologies like ASP.NET, CORE, .NET MVC, Angular and Blockchain. Keen interest in addressing business problems using latest technologies and have been associated with Mobile Application development companies.
Image:
LinkedIn: https://www.linkedin.com/in/vinodsatapara/
- Just want to thank us? Buy us a Coffee
- May be another day? Shop on Amazon using our links.
Your prices won't change but we get a small commission.
Leave a Reply