Gradient Color View¶

The Gradient Color View is an expressive way to add beautiful, blended views into any portion of your app. Perfect for backgrounds or any other area that needs a bit of flair.

GradientColorView

Properties¶

GradientRotationAngle - double¶

Gets or sets the rotation angle of the gradient. Default is 0d.

GradientStartColor - Color¶

Gets or sets the start color of the gradient. Default color is Xamarin.Forms.Color.Default.

GradientStopColor - Color¶

Gets or sets the stop color of the gradient. Default color is Xamarin.Forms.Color.Default.

Ripples - bool¶

Gets or sets a value indicating whether the control has ripples.

TapAnimationDuration - uint¶

Gets or sets the tap animation duration. Default is 40u.

Command - ICommand¶

Gets or sets the command.

CommandParameter - object¶

Gets or sets the command parameter

Tapped - bool¶

Gets or sets a value indicating whether the control is tapped.

Example Usage¶

Xaml¶

<aurora:GradientColorView x:Name="control" HeightRequest="300" GradientStartColor="Blue" GradientStopColor="#FFA500" />

C#¶

var color = new GradientColorView
{
    GradientStartColor = Color.Green,
    GradientStopColor = Color.Purple,
    Ripples = false,
    GradientRotationAngle = 120
};

Example Styles¶

A Gradient Color View with GradientRotationAngle of 180 , GradientStartColor of BlueViolet and GradientStopColor of Crimson:

Example1

var color = new GradientColorView
{
    GradientStartColor = Color.BlueViolet,
    GradientStopColor = Color.Crimson,
    GradientRotationAngle = 180
};

<aurora:GradientColorView x:Name="color" GradientStartColor="#8A2BE2" GradientStopColor="#DC143C" GradientRotationAngle="180" />

A Gradient Color View with GradientRotationAngle of 25 , GradientStartColor of LightBlue and GradientStopColor of SandyBrown:

Example2

var color = new GradientColorView
{
    GradientStartColor = Color.LightBlue,
    GradientStopColor = Color.SandyBrown,
    GradientRotationAngle = 25
};

<aurora:GradientColorView x:Name="color" GradientStartColor="##ADD8E6" GradientStopColor="##F4A460" GradientRotationAngle="25" />