Magic Gradients

(this picture is draggable, check it out)

Draw breathtaking backgrounds in your Xamarin.Forms application today, from simple gradients to complex textures. It's a kind of magic :sparkles:

| Supported platforms | |---| | :heavy_check_mark: Android | | :heavy_check_mark: iOS | | :heavy_check_mark: UWP |

• Linear and radial gradients supported
• Draw as many gradients as you want with single control, blend them together for unique effects
• Supports CSS gradients, find your ideal background somewhere on the web and copy + paste into your app
• Make your background alive with built-in XAML animations
• Gradient'em all - paint gradient on any shape or text with clipping masks
• Powered by

| Drawing gradient | :art: Styling with CSS | :performing_arts: Masks | :clapper: Animations | :joystick: Download | | --- | --- | --- | --- | --- |

Installation

Magic Gradients are available via NuGet:

Install into shared project, no additional setup required.

To start using Magic Gradients in XAML import namespace:

<ContentPage xmlns:magic="http://magic.com/schemas/gradients" />

Sample app

In Magic Gradients repository you can find Magic Playground app for browsing and creating gradients visually. Android, iOS and UWP are supported.

Magic Playground contains samples for all kinds of gradients, animations, masks and other features. It's the best place to start and see gradients in action.

:joystick: Play with Magic Gradients

Install Magic Playground on your device and see some cool backgrounds right now.

Drawing gradient

To draw a gradient add GradientView control to your XAML page and create LinearGradient or RadialGradient as direct content.

<magic:GradientView>
    <magic:LinearGradient>
        <magic:GradientStop Color="Red" />
        <magic:GradientStop Color="Yellow" />
    </magic:LinearGradient>
</magic:GradientView>

It is also possible to add collection of gradients. You can mix linear and radial gradients, use transparency in color definitions to get blend effect.

<magic:GradientView>
    <magic:GradientCollection>
        <magic:LinearGradient Angle="45">
            <magic:GradientStop Color="Orange" Offset="0" />
            <magic:GradientStop Color="#ff0000" Offset="0.6" />
        </magic:LinearGradient>
        <magic:LinearGradient Angle="90">
            <magic:GradientStop Color="#33ff0000" Offset="0.4" />
            <magic:GradientStop Color="#ff00ff00" Offset="1" />
        </magic:LinearGradient>
    </magic:GradientCollection>
</magic:GradientView>

You can also build gradient in C# using GradientBuilder with Fluent API:

 var gradients = new GradientBuilder()
    .AddLinearGradient(g => g
        .Rotate(45)
        .AddStop(Color.Red, Offset.Prop(0.2))
        .AddStop(Color.Blue, Offset.Prop(0.4)))
    .AddRadialGradient(g => g
        .Circle().At(0.5, 0.5, o => o.Proportional())
        .Radius(200, 200, o => o.Absolute())
        .StretchTo(RadialGradientSize.FarthestSide)
        .Repeat()
        .AddStops(Color.Red, Color.Green, Color.Blue))
    .AddCssGradient("linear-gradient(red, orange)")
    .Build();

To apply gradient created in C#, you can use ToSource() extension method:

 var source = new GradientBuilder()
    .AddLinearGradient(g => g
        .Rotate(20)
        .AddStops(Color.Red, Color.Green, Color.Blue))
    .ToSource();

gradientView.GradientSource = source;

Version 1.3 introduced improved linear gradient rendering, turned on by default. If for some reason you prefer the old one, use attached property:

<magic:GradientView magic:LinearGradient.UseLegacyShader="True" />

For complex backgrounds you can use GPU accelerated version GradientView:

<GradientGLView />

Discover amazing backgounds

Be sure to check out the Gallery in Magic Playground app. It contains over 1700+ samples :hear_no_evil: from Gradient Magic, ready to use in any Xamarin.Forms app. Find your best, pick and copy over to your app.

<div> <img src="./Assets/Gifs/playground_gallery_ios.gif" height="500" width="255" /> <img src="./Assets/Gifs/playground_battle_test_ios.gif" height="500" width="255" /> <img src="./Assets/Gifs/playground_build_gradient_ios.gif" height="500" width="255" /> </div>

:art: Styling with CSS

Magic Gradients supports following CSS functions:

• Linear gradients: linear-gradient, repeating-linear-gradient
• Radial gradients: radial-gradient, repeating-radial-gradient

CSS gradient can be embeded in XAML inline:

<magic:GradientView>
    <magic:CssGradientSource>
        <x:String>
            <![CDATA[
                linear-gradient(242deg, red, green, orange)
            ]]>
        </x:String>
    </magic:CssGradientSource>
</magic:GradientView>

Or even shorter using implicit conversion to CssGradientSource:

<magic:GradientView GradientSource="linear-gradient(242deg, red, green, orange)" />

Styling from CSS stylesheet is also possible:

<magic:GradientView StyleClass="myGradient" />

.myGradient {
    background: linear-gradient(90deg, rgb(235, 216, 9), rgb(202, 60, 134));
}

CSS can be also set via C#:

gradientView.GradientSource = CssGradientSource.Parse("linear-gradient(red, green, blue)");

Linear gradient function

linear-gradient(direction | angle, color-stop1, color-stop2, ...);

| Value | Description | | ------| ----------- | | direction | Possible values: to left, to right, to top, to bottom, to left top, to right bottom etc. | | angle | In degrees (135deg) or proportional (0.45turn, range between 0-1) |

Each color stop should contain color information and optionally position described in percents or pixels. Suppored color formats:

• colors in RGB or HSL format: rgb(red, green, blue), rgba(red, green, blue, alpha), hsl(hue, saturation, lightness), hsla(hue, saturation, lightness, alpha)
• colors in hex: #ff0000
• named colors: red, green, blue, orange, pink

Examples

linear-gradient(45deg, blue, red);
linear-gradient(to left top, #0000ff, #ff0000);
linear-gradient(blue, green 40%, red);

Radial gradient function

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

| Value | Description | | ------| ----------- | | shape | Possible values: circle, ellipse | | size | In pixels (px), proportional (%) or named sizes: closest-side, closest-corner, farthest-side, farthest-corner (default) | | position | In pixels (px), proportional (%) or named directions: left, right, top, bottom, center |

Examples

radial-gradient(circle at top left, red, green);
radial-gradient(circle 100px at 70% 20%, red, green);           // one radius for circle
radial-gradient(ellipse closest-corner at 30% 80%, red, green);
radial-gradient(ellipse 200px 300px at 50% 60%, red, green);    // two radiuses for ellipse

Play with CSS

You can play around with CSS functions live in Magic Playground app, Hot Reload :fire: included.

<div> <img src="./Assets/Gifs/css_add_only.gif" height="480" width="245" /> <img src="./Assets/Gifs/css_hot_reload.gif" height="480" width="245" /> </div>

:performing_arts: Masks

Masks can be used to clip GradientView into any shape or even text. Each mask type shares common properties:

| Property | Values | | | -------- | ------ | --- | | ClipMode | Include, Exclude | Draw shape or cut shape from the background. | | Stretch | None, AspectFit, AspectFill, Fill | Other than None will ignore shape size and match GradientView bounds. | | IsActive | True, False | If False, mask will be ignored. |

<p align="center"> <img src="./Assets/Images/clip_mode_include.png" height="150" />&nbsp; <img src="./Assets/Images/clip_mode_exclude.png" height="150" /> <br /> <em><b>ClipMode</b> set to <b>Include</b> and <b>Exclude</b></em> </p>

Rectangle

<img src="./Assets/Images/mask_rectangle.png" height="150" />

Enhances GradientView with custom sizing and rounded corners. To customize shape of the rectangle use properties:

| Property | Values | | | -------- | ------ | --- | | Size | 200,200, 90%,90%, 50% | Uniform or two dimensions, pixels and percent supported. | | Corners | 20,20,30,30, 10%,15% | Direction from top left to bottom right clockwise, pixels and percent supported. |

Rounding corners of a GradientView scaled down to 90% of available space can be made like this:

<magic:Gra