MagicGradients

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:

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.

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.

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:

For complex backgrounds you can use GPU accelerated version GradientView:

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.

: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:

Or even shorter using implicit conversion to CssGradientSource:

Styling from CSS stylesheet is also possible:

.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.

: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.

 

ClipMode set to Include and Exclude

Rectangle

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:

Or even simplier with markup extension:

Each corner can be defined separately. By defining different width and height you can have ellipse corner rather that circle:

Ellipse

Draws GradientView as oval shape. Use Size property for custom sizing.

To create EllipseMask inline, use markup extension:

Path

With PathMask you can turn GradientView into any shape, just set Data property with any SVG path.

To create PathMask inline, use markup extension:

Text

To draw a text painted with gradient, use TextMask and set it's Text property. For font customization use properties from Label control like: FontFamily, FontSize, FontAttributes.

Text can be positioned inside GradientView with HorizontalTextAlignment and VerticalTextAlignment just like with Label:

To create TextMask inline, use markup extension:

Mask Collection

You can combine multiple masks in one GradientView with MaskCollection:

:clapper: Animations (preview)

Magic Gradients comes with built-in animation system. You can animate any element and property of the gradient. Each type of animation extends Timeline class with common properties:

Property	Values
Target	{x:Reference myGradient}	Reference to animated element.
Duration	3000	Length of single loop (in ms).
Delay	200	Time before animations starts (in ms).
Easing	{x:Static Easing.SinInOut}	Easing function.
RepeatBehavior	1x, 3x, Forever	How many times animation must be repeated.
AutoReverse	True, False	If true, next loop will be animated backwards.

Be sure to check Magic playground app for sample animations:

Running animation

Animations can be run from Behavior or can be controlled by view model with DataTrigger and dedicated actions.

To run animation automatically, use AnimateBehavior and set Animation property:

Running animation from view model can be done with dedicated BeginAnimation and EndAnimation actions inside DataTrigger. To avoid boilerplate XAML for setting EnterActions and ExitActions, you can use AnimationTrigger markup extension. Setup Animation property and set IsRunning that will turn animation on and off when value changes:

:warning: If you set RepeatBehavior to Forever, make sure you stop every running animation by calling End() before you leave the page.

Property animations

With this type of animation you can animate single property between two values defined as From and To.

Property	Values
TargetProperty	magic:GradientStop.Color	Animated property with full namespace.
From	Value matching TargetProperty type	Value when animation starts.
To	Value matching TargetProperty type	Value when animation ends.

Animate color sample:

Built-in property types:

ColorAnimation, DimensionsAnimation, DoubleAnimation, IntegerAnimation, OffsetAnimation, PointAnimation, ThicknessAnimation

For custom types, see Custom animation types.

Storyboards

With Storyboard you can run multiple animations simultaneously in the same time period. Unlike standalone animation, Duration and RepeatBehavior is controlled by Storyboard. Each animation can start and end at different point of Storyboard timeline, this can be controlled by attached properties:

Attached property	Values
anim:Storyboard.BeginAt	from 0 to 1	Start animation at given point of Storyboard.
anim:Storyboard.FinishAt	from 0 to 1	End animation at given point of Storyboard.

Below you can see an example of animating two colors of a gradient stop. First anima