Xamarin Magic Code Snippets

Speed-up your development of Magic Gradients with Snippets

This blog post is a part of Louis Matos’s Xamarin Month, where this months topic is Code Snippets. For more information take a look at this blog and see the list of all the other authors who are participating. There you can find a lot of cool snippets to speed-up your development process and give you some satisfaction in writing your daily code.

It’s so many awesome snippets already there, so… what can I add from my side? I think we need some Magic in this Xamarin Month. All snippets will be available at my Magic-Xamarin-Snippets code repository on GitHub and you may download it => import into your IDE(VS 2019 for now only) and just use it.

Gradients build in Xaml — Linear

Basically, when someone thinks about gradients — he imagines a two or four colour Linear Gradients, so let’s begin from them. Also quite popular becomes Linear Gradients Built-in Xaml Code. And this is really surprised me, but ok… If you love to write Gradients in Xaml what I may tell you? — Just use those snippets to speed up yourself.

**mglinear** — creates a Linear XAML Gradient with two changeable colours and changeable angle


Gradients build in Xaml — Radial

We also can write Radial Gradients in Xaml as well. Here will be a quite similar principle to Linear Xaml Gradients.

**mgradial** — creates a Radial XAML Gradient with two changeable colours and changeable Center with X & Y positions


Gradients build in CSS

This is my favourite type of creating Gradients because it shows a whole power of CSS in Xamarin Forms and **SkiaSharp**.

**mgcssxaml** — if you prefer to use inline CSS instead of a separate file.


**mgcss** — if you wanna use a separate file with CSS code and left XAML file clean. Here is an only placeholder for Magic GradientView, all code for gradient should be placed in CSS file.


**mgcss** — a complete CSS Style with one Linear Gradient inside(this one for CSS language instead of XAML like previous)


**lg** — just one Linear Gradient in CSS interpretation with two colours.


**rg** — just one Radial Gradient in CSS interpretation with two colours.


Something missed?

If you missed or wanna add anything — please add a comment or write to me at twitter. I will be really happy to have more Magic Snippets.


Microsoft MVP | C# .Net | Xamarin