Gradient Background for your Xamarin.Forms App
Make beautiful backgrounds with single XAML control
Since Xamarin.Forms start supporting CSS Styling it was just a question of time when we could style our background with gradients.
Today I would like to introduce a great control created by @MGierlasinski — MagicGradients:
This NuGet gives you the possibility to use some of CSS backgrounds from https://www.gradientmagic.com or create your own in XAML.
Not clear, right? Now I will try step by step to show you how you can use it in your Xamarin.Forms. app.
NuGet Dependencies
Before we start in examples and usage, a couple of words about NuGet Dependencies. All dependencies are listed at the official Readme and depend only on SkiaSharp Views Forms and Xamarin Forms. Their versions are up to time updated after successful re-testing.
So this NuGet does not use untrusted external sources and can be added to existing projects that support the latest version of Xamarin.Froms NuGets without worries.
Also, you should note, that NuGet updates only to stable releases of Xamarin.Forms and SkiaSharp.
Magic Gradient Playground
As all popular NuGet’s for Xamarin.Forms Magic Gradient provides his own Playground App for Android & iOS to show examples of supported Gradients.
Here is Gif of the current version of Magic Gradients:
Gradient Structure
The base element which you will put into your layout is GradientView which is just a custom control inherited from SkiaSharp.Views.Forms.SKCanvasView. Gradient View has oneGradientSource bindable property that takes IGradientSource interface, which is base for LinearGradient, RadialGradient, CssGradientSource and GradientCollection.
So, what’s that mean for us? — That the element in the layout will never change, only his bindable property!
Gradients in XAML
And how we can use it? — you may ask, here is simplest example of the linear gradient 😮:
Ok, and this is all 🤨? We have the same with native SkiaSharp or PancakeView.
Em, not exactly, Magic Gradients support more versions of gradients:
Or:
But if you want to taste all the power of this NuGet — you should try a CssGradientSource from CSS, as you may guess)))
Gradients in CSS
If you want to use Magic Gradient for 100% and don’t want to import any CSS files into your project, you may try 🥁 — Inline CSS 🤯
What? Inline CSS? What the ****? — This means that you have some string inline in XAML or in resources under some key, that string has special prefix and postfix in his value and parsed by Xamarin.Forms in the same way as other CSS from files.
And if we want to use the same from CSS:
This is much more interesting, right? As you may see with CSS at file our XAML element becomes built-in and simple, without any garbage in code 😋
CSS Gradient Source
CSS Gradients, much more powerful and harder to understand or write, but we even don’t need it 🙃. We can just search for some cool sites with background gradients in pure CSS and Copy/Paste them.
As an example you may copy gradients background from Gradient Magic site:
But, CSS a lot of ways to set same gradient! Magic Gradient NuGet try to support most popular of them, but it’s still not 100%.
So sometimes you may get some problems with copied CSS 😥, but all of them you can simply fix by hand modification of CSS.
Or you may copy worked examples from Magic Gradient Playgroud App 😎
Author enhance that list all time 😄.
Also as a choice, you may test your CSS in CSS Gradients Playground:
Conclusion
This is a great NuGet with the nice feature, I hope:
- Easy to attach for any design
- Easy to use
- Simple — means fewer errors
- Open Source — you can see how it works, improve or suppose improvement.
- Up to date with newer versions
- May use Pure* CSS from examples(thousands cool examples)
What’s next — please give your star ⭐to the repo:
Propose new features or submit bugs, enjoy and have fun 😋.
P.S. Thanks for reading this article, if you have any questions connected with Magic Gradients please write for us at Twitter or at GitHub(issue):
