{"id":46603,"date":"2020-04-06T11:41:19","date_gmt":"2020-04-06T18:41:19","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=46603"},"modified":"2020-09-15T11:15:23","modified_gmt":"2020-09-15T18:15:23","slug":"magic-gradients-xamarinforms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/magic-gradients-xamarinforms\/","title":{"rendered":"Magic Gradients: Beautiful Backgrounds in Xamarin.Forms"},"content":{"rendered":"<p><em>This is a guest blog by <a href=\"https:\/\/twitter.com\/bbenetskyy\" rel=\"noopener noreferrer\" target=\"_blank\">Bohdan Benetskyi<\/a>. Bohdan is a Xamarin and .NET developer at PGS Software and works side by side <a href=\"https:\/\/github.com\/mgierlasinski\" rel=\"noopener noreferrer\" target=\"_blank\">Marcin Gierlasi\u0144ski<\/a> on Magic Gradients.<\/em><\/p>\n<h2>Magic Gradients for Xamarin.Forms<\/h2>\n<p><a href=\"https:\/\/github.com\/mgierlasinski\/MagicGradients\">Magic Gradients<\/a> is a NuGet that provide a possibility to add beautiful and enhanced gradients into Xamarin.Forms applications. This NuGet package supports all common Xamarin platforms, such as <strong>Android<\/strong>, <strong>iOS<\/strong> and <strong>UWP<\/strong>. It is built upon <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/graphics\/skiasharp\/\" rel=\"noopener noreferrer\" target=\"_blank\">SkiaSharp<\/a> to draw a simple multi-color or multi-layer engaged gradients in Skia Surface(<code>SKSurface<\/code>). We try to make it dead simple to start using it, you don&#39;t need anything to initialize at all platforms.<\/p>\n<p>Setting up and using Magic Gradients into your app will only take a few minutes. Here is a quick taste of what you can do with the library using it as a separate layer or background. <\/p>\n<p><center>\n<img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/CoolGradient1.png\" alt=\"Image CoolGradient1\" width=\"120\"\/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/CoolGradient2.png\" alt=\"Image CoolGradient2\" width=\"120\"\/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/CoolGradient3.png\" alt=\"Image CoolGradient3\" width=\"120\"\/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/CoolGradient4.png\" alt=\"Image CoolGradient4\" width=\"120\"\/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/CoolGradient5.png\" alt=\"Image CoolGradient5\" width=\"120\"\/>\n<\/center><\/p>\n<h3 id=\"how-to-install-magic-gradients-\">How to Install Magic Gradients?<\/h3>\n<p>At first take any of your applications or create a new one with <strong>Shell Template<\/strong>. Next step is to install <code>Magic Gradients<\/code> NuGet. To do that you can:<\/p>\n<ul>\n<li>Search for <code>MagicGradients<\/code> at NuGet browser<\/li>\n<li>Or With Package Manager CLI: <code>Install-Package MagicGradients<\/code><\/li>\n<li>Alternatively, use the .Net CLI: <code>dotnet add package MagicGradients<\/code><\/li>\n<li>Also as an option you can just edit your <code>csproj<\/code> file and add <code>&lt;PackageReference Include=&quot;MagiGradients&quot; Version=&quot;1.0.0&quot; \/&gt;<\/code><\/li>\n<\/ul>\n<p>We should install it only for our &quot;Core&quot; project.<\/p>\n<h3 id=\"how-we-can-use-magic-gradients-\">How to Use Magic Gradients?<\/h3>\n<p><strong>Magic Gradients<\/strong> provides <code>GradientView<\/code> control which is just a surface for <strong>SkiaSharp<\/strong> inside. Inside <code>GradientView<\/code> you need to set <code>GradientSource<\/code> which is a default container. Inside it you can place single gradients <code>LinearGradient<\/code>, <code>RadialGradient<\/code> or multiple gradients with <code>GradientCollection<\/code> as a top element. Also it accepts <code>CssGradientSource<\/code> with inline CSS or with binding to CSS from a file via <code>StyleClass<\/code> or <code>StyleId<\/code>.<\/p>\n<p>Let&#39;s create dead simple gradient from <code>Red<\/code> to <code>Yellow<\/code>:<\/p>\n<p>For all samples we will import the namespace:<\/p>\n<pre class=\"lang:default decode:true\">xmlns:magic=&quot;clr-namespace:MagicGradients;assembly=MagicGradients&quot;<\/pre>\n<p>After that we can start to use Magic Gradients:<\/p>\n<pre class=\"lang:default decode:true\">&lt;magic:GradientView VerticalOptions=&quot;FillAndExpand&quot;&gt;\n     &lt;magic:GradientView.GradientSource&gt;\n         &lt;magic:LinearGradient Angle=&quot;90&quot;&gt;\n             &lt;magic:GradientStop Color=&quot;Red&quot; Offset=&quot;0&quot; \/&gt;\n             &lt;magic:GradientStop Color=&quot;Yellow&quot; Offset=&quot;1&quot; \/&gt;\n         &lt;\/magic:LinearGradient&gt;\n     &lt;\/magic:GradientView.GradientSource&gt;\n &lt;\/magic:GradientView&gt;\n<\/pre>\n<p align=\"center\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/RedToYellow.png\" \/><\/p>\n<p>Let us, instead, make a little bit interesting Gradient with two Linear Gradients inside:<\/p>\n<pre class=\"lang:default decode:true\">&lt;magic:GradientView VerticalOptions=&quot;FillAndExpand&quot;&gt;\n    &lt;magic:GradientView.GradientSource&gt;\n        &lt;magic:GradientCollection&gt;\n            &lt;magic:LinearGradient Angle=&quot;45&quot;&gt;\n                &lt;magic:GradientStop Color=&quot;Orange&quot; Offset=&quot;0&quot; \/&gt;\n                &lt;magic:GradientStop Color=&quot;#ff0000&quot; Offset=&quot;0.6&quot; \/&gt;\n            &lt;\/magic:LinearGradient&gt;\n            &lt;magic:LinearGradient Angle=&quot;90&quot;&gt;\n                &lt;magic:GradientStop Color=&quot;#33ff0000&quot; Offset=&quot;0.4&quot; \/&gt;\n                &lt;magic:GradientStop Color=&quot;#ff00ff00&quot; Offset=&quot;1&quot; \/&gt;\n            &lt;\/magic:LinearGradient&gt;\n        &lt;\/magic:GradientCollection&gt;\n    &lt;\/magic:GradientView.GradientSource&gt;\n&lt;\/magic:GradientView&gt;\n<\/pre>\n<p align=\"center\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/MultiLinearGradient.png\" \/><\/p>\n<p>Or add a complex one:<\/p>\n<pre class=\"lang:default decode:true\">&lt;StackLayout Spacing=&quot;0&quot;&gt;\n    &lt;magic:GradientView VerticalOptions=&quot;FillAndExpand&quot;&gt;\n        &lt;magic:GradientView.GradientSource&gt;\n            &lt;magic:RadialGradient Center=&quot;0.5,0.5&quot; RadiusX=&quot;200&quot; RadiusY=&quot;200&quot;&gt;\n                &lt;magic:GradientStop Color=&quot;Red&quot; Offset=&quot;0&quot; \/&gt;\n                &lt;magic:GradientStop Color=&quot;Yellow&quot; Offset=&quot;0.5&quot; \/&gt;\n                &lt;magic:GradientStop Color=&quot;Green&quot; Offset=&quot;1&quot; \/&gt;\n            &lt;\/magic:RadialGradient&gt;\n        &lt;\/magic:GradientView.GradientSource&gt;\n    &lt;\/magic:GradientView&gt;\n    &lt;magic:GradientView VerticalOptions=&quot;FillAndExpand&quot;&gt;\n        &lt;magic:GradientView.GradientSource&gt;\n            &lt;magic:RadialGradient Center=&quot;600,600&quot; RadiusX=&quot;600&quot; RadiusY=&quot;600&quot; Flags=&quot;None&quot;&gt;\n                &lt;magic:GradientStop Color=&quot;Red&quot; Offset=&quot;0&quot; \/&gt;\n                &lt;magic:GradientStop Color=&quot;Yellow&quot; Offset=&quot;0.5&quot; \/&gt;\n                &lt;magic:GradientStop Color=&quot;Green&quot; Offset=&quot;1&quot; \/&gt;\n            &lt;\/magic:RadialGradient&gt;\n        &lt;\/magic:GradientView.GradientSource&gt;\n    &lt;\/magic:GradientView&gt;\n&lt;\/StackLayout&gt;\n<\/pre>\n<p align=\"center\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/RadialGradient.png\" \/><\/p>\n<p>To use Magic Gradient for 100% and not import any CSS files into your project, try \ud83e\udd41 \u2014 <strong>Inline CSS \ud83e\udd2f<\/strong>. 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.<\/p>\n<pre class=\"lang:default decode:true\">&lt;magic:GradientView VerticalOptions=&quot;FillAndExpand&quot;&gt;\n    &lt;magic:GradientView.GradientSource&gt;\n        &lt;magic:CssGradientSource&gt;\n            &lt;x:String&gt;\n                &lt;![CDATA[\n                    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))\n                ]]&gt;\n            &lt;\/x:String&gt;\n        &lt;\/magic:CssGradientSource&gt;\n    &lt;\/magic:GradientView.GradientSource&gt;\n&lt;\/magic:GradientView&gt;\n<\/pre>\n<p align=\"center\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/CssSample1.png\" \/><\/p>\n<p>And if we want to use the same from CSS:<\/p>\n<pre class=\"lang:default decode:true\">.gradientStyledWithCss {\n    background: 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));\n}\n<\/pre>\n<pre class=\"lang:default decode:true\">&lt;ContentPage.Resources&gt;\n    &lt;StyleSheet Source=&quot;..\/Styles\/LinearGradientsPage.css&quot; \/&gt;\n&lt;\/ContentPage.Resources&gt;\n...\n&lt;magic:GradientView VerticalOptions=&quot;FillAndExpand&quot; StyleClass=&quot;gradientStyledWithCss&quot; \/&gt;\n<\/pre>\n<p>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 \ud83d\ude0b<\/p>\n<h2 id=\"css-gradient-source\">CSS Gradient Source<\/h2>\n<p>CSS Gradients, much more powerful and harder to understand or write, but we even don\u2019t need it \ud83d\ude43. 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 <a href=\"https:\/\/www.gradientmagic.com\">Gradient Magic site<\/a>.<\/p>\n<blockquote>\n<p>However, CSS a lot of ways to set same gradient! Magic Gradient NuGet try to support most popular of them, but it\u2019s still not 100%.<\/p>\n<\/blockquote>\n<p>Sometimes you may get some problems with copied CSS \ud83d\ude25, but all of them you can simply fix by hand modification of CSS.<\/p>\n<blockquote>\n<p>Or you may copy worked examples from Magic Gradient Playgroud App \ud83d\ude0e<\/p>\n<\/blockquote>\n<h3 id=\"style-pages-with-gradient-background-\">Style Pages with Gradient Background:<\/h3>\n<p>Simple and working solution is to create at <code>App.xaml<\/code> Control Template of Style for <code>ContentPage<\/code>. We will create one <code>Style<\/code> that will be applied for all pages and derived types(it might be helpful if you are using some MvvmFramework like MvvmCross or other) and one <code>ControlTemplate<\/code> which will be applied by key:<\/p>\n<pre class=\"lang:default decode:true\">&lt;ControlTemplate x:Key=&quot;PageWithGradient&quot;&gt;\n    &lt;Grid&gt;\n        &lt;magicGradients:GradientView VerticalOptions=&quot;FillAndExpand&quot; &gt;\n            &lt;magicGradients:GradientView.GradientSource&gt;\n                &lt;magicGradients:CssGradientSource&gt;\n                    &lt;x:String&gt;\n                        &lt;![CDATA[\n                                    linear-gradient(45deg, rgb(149, 10, 155) 0%, rgb(149, 10, 155) 9%,rgb(120, 16, 136) 9%, rgb(120, 16, 136) 13%,rgb(178, 3, 174) 13%, rgb(178, 3, 174) 32%,rgb(91, 23, 117) 32%, rgb(91, 23, 117) 42%,rgb(32, 36, 79) 42%, rgb(32, 36, 79) 46%,rgb(61, 30, 98) 46%, rgb(61, 30, 98) 70%,rgb(3, 43, 60) 70%, rgb(3, 43, 60) 100%)\n                                ]]&gt;\n                    &lt;\/x:String&gt;\n                &lt;\/magicGradients:CssGradientSource&gt;\n            &lt;\/magicGradients:GradientView.GradientSource&gt;\n        &lt;\/magicGradients:GradientView&gt;\n        &lt;ContentPresenter \/&gt;\n    &lt;\/Grid&gt;\n&lt;\/ControlTemplate&gt;\n&lt;Style TargetType=&quot;ContentPage&quot; ApplyToDerivedTypes=&quot;True&quot;&gt;\n    &lt;Setter Property=&quot;ControlTemplate&quot;&gt;\n        &lt;Setter.Value&gt;\n            &lt;ControlTemplate&gt;\n                &lt;Grid&gt;\n                    &lt;magicGradients:GradientView VerticalOptions=&quot;FillAndExpand&quot; &gt;\n                        &lt;magicGradients:GradientView.GradientSource&gt;\n                            &lt;magicGradients:CssGradientSource&gt;\n                                &lt;x:String&gt;\n                                    &lt;![CDATA[\n                                    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%)\n                                ]]&gt;\n                                &lt;\/x:String&gt;\n                            &lt;\/magicGradients:CssGradientSource&gt;\n                        &lt;\/magicGradients:GradientView.GradientSource&gt;\n                    &lt;\/magicGradients:GradientView&gt;\n                    &lt;ContentPresenter \/&gt;\n                &lt;\/Grid&gt;\n            &lt;\/ControlTemplate&gt;\n        &lt;\/Setter.Value&gt;\n    &lt;\/Setter&gt;\n&lt;\/Style&gt;\n<\/pre>\n<p>And usage of <code>ControlTemplate<\/code> in your Content Pages:<\/p>\n<pre class=\"lang:default decode:true\">&lt;ContentPage \n    &lt;!--...--&gt;\n    ControlTemplate=&quot;{StaticResource PageWithGradient}&quot;&gt;\n    &lt;!--...--&gt;\n&lt;\/ContentPage&gt;\n<\/pre>\n<p><center>\n<img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/SampleMainPage.png\" width=\"250\" \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/SampleDetailsPage.png\" width=\"250\" \/>\n<\/center><\/p>\n<p>This not restrict you to use only in Pages, you may use it everywhere you want in everything which apply some templates, like <strong>Shell Flyout Header<\/strong>:<\/p>\n<pre class=\"lang:default decode:true\">&lt;Shell.FlyoutHeaderTemplate&gt;\n    &lt;DataTemplate&gt;\n        &lt;Grid&gt;\n            &lt;Grid.RowDefinitions&gt;\n                &lt;RowDefinition Height=&quot;100&quot; \/&gt;\n            &lt;\/Grid.RowDefinitions&gt;\n                &lt;magicGradients:GradientView VerticalOptions=&quot;FillAndExpand&quot; &gt;\n                    &lt;magicGradients:GradientView.GradientSource&gt;\n                            &lt;magicGradients:CssGradientSource&gt;\n                                &lt;x:String&gt;\n                                    &lt;![CDATA[\n                                        linear-gradient(45deg, rgb(149, 10, 155) 0%, rgb(149, 10, 155) 9%,rgb(120, 16, 136) 9%, rgb(120, 16, 136) 13%,rgb(178, 3, 174) 13%, rgb(178, 3, 174) 32%,rgb(91, 23, 117) 32%, rgb(91, 23, 117) 42%,rgb(32, 36, 79) 42%, rgb(32, 36, 79) 46%,rgb(61, 30, 98) 46%, rgb(61, 30, 98) 70%,rgb(3, 43, 60) 70%, rgb(3, 43, 60) 100%)\n                                    ]]&gt;\n                                &lt;\/x:String&gt;\n                            &lt;\/magicGradients:CssGradientSource&gt;\n                    &lt;\/magicGradients:GradientView.GradientSource&gt;\n                &lt;\/magicGradients:GradientView&gt;\n            &lt;Label Text=&quot;Magic Gradients&quot; TextColor=&quot;White&quot; FontAttributes=&quot;Bold&quot;\n                    FontSize=&quot;20&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; \/&gt;\n        &lt;\/Grid&gt;\n    &lt;\/DataTemplate&gt;\n&lt;\/Shell.FlyoutHeaderTemplate&gt;\n<\/pre>\n<p align=\"center\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/ShellFlyoutHeader.png\" \/><\/p>\n<h3 id=\"magic-gradients-playground-app\">Magic Gradients Playground App<\/h3>\n<p>In official <a href=\"https:\/\/github.com\/mgierlasinski\/MagicGradients\/tree\/master\/Playground\">GitHub Repo<\/a> you may find a folder <code>Playground<\/code> where we place application with example of gradients:<\/p>\n<p><center>\n<img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/ShellTitlePage.png\" width=\"120\" \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/GradientGalleryPage.png\" width=\"120\" \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/PasteCssPage.png\" width=\"120\" \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/LinearGradientsPage.png\" width=\"120\" \/><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/03\/RadialGradientsPage.png\" width=\"120\" \/>\n<\/center><\/p>\n<p>Please pay attention to <strong>Gradient Gallery<\/strong> page, there you can find more than 400 cool gradients in CSS, to use them just open and copy CSS into your app. If that gradient works here will work in your project also.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>This is a great NuGet with the nice feature, hopefully \ud83d\ude43. It&#39;s:<\/p>\n<ul>\n<li>Easy to attach for any design<\/li>\n<li>Easy to use<\/li>\n<li>Simple \u2014 means fewer errors<\/li>\n<li>Open Source \u2014 you can see how it works, improve or suppose improvement.<\/li>\n<li>Up to date with newer versions<\/li>\n<li>May use Pure* CSS from examples(thousands cool examples)<\/li>\n<\/ul>\n<p>If you will have any questions or see how we could improve it, just ping us at Twitter. We don\u2019t bite \ud83e\udd20: @MGierlasinski; @bbenetskyy;<\/p>\n<h3 id=\"links-to-read-use-after-\">Links to Related Content:<\/h3>\n<ul>\n<li><a href=\"https:\/\/github.com\/mgierlasinski\/MagicGradients\">Magic Gradients NuGet<\/a><\/li>\n<li><a href=\"https:\/\/www.gradientmagic.com\">More Gradients<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/@benetskyybogdan\/gradient-background-for-your-xamarin-forms-app-6d7e46fba558\">Gradient Background for your Xamarin.Forms App<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/@benetskyybogdan\/xf-shell-gradient-flyout-with-magic-gradients-e9f0eb46bae0\">Xamarin.Forms Shell Gradient Fly-out with Magic Gradients<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/@benetskyybogdan\/xamarin-forms-gradient-background-for-all-pages-in-1-minute-9e172d986618\">Xamarin.Forms Gradient Background For All Pages in 1 minute<\/a><\/li>\n<\/ul>\n<h3 id=\"acknowledgments\">Acknowledgments<\/h3>\n<p>First, thank you to the main <strong>contributor<\/strong> and <strong>idea-holder<\/strong> of the magic that we have &#8211; <strong>Marcin Gierlasinski<\/strong>. Additionally, thank you to all our contributors at GitHub(<strong>Luce Carter<\/strong>, <strong>Bogus\u0142aw B\u0142o\u0144ski<\/strong>, &#8230;). Special <em>&quot;thanks&quot;<\/em> for authors of <a href=\"https:\/\/www.gradientmagic.com\">Gradient Magic<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magic Gradients is a NuGet that provide a possibility to add beautiful and enhanced gradients into Xamarin.Forms applications. Here is a quick taste of what you can do with the library using it as a separate layer or background.<\/p>\n","protected":false},"author":579,"featured_media":46610,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[556,367],"tags":[589,429,8152,8415,16],"class_list":["post-46603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","category-xamarin-forms","tag-community","tag-components","tag-gradients","tag-magic-gradients","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Magic Gradients is a NuGet that provide a possibility to add beautiful and enhanced gradients into Xamarin.Forms applications. Here is a quick taste of what you can do with the library using it as a separate layer or background.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/579"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=46603"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46603\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/46610"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=46603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=46603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=46603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}