Image for post
Image for post

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.

NuGet Dependencies

Image for post
Image for post

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.

Image for post
Image for post

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.

Gradients in XAML

And how we can use it? — you may ask, here is simplest example of the linear gradient 😮:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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 🤯

Image for post
Image for post

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.

Conclusion

This is a great NuGet with the nice feature, I hope:

  • 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)

Software Developer | C# .Net | Xamarin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store