Gradient Button in Xamarin Forms - xamarin

Question

How do I create this button with Gradient Effect in Xamarin Forms using Renderer ?

Answer 1

Now it is possible with Xamarin forms 4.8 with new features like gradient brushes and drag and drop features.
Check out this link => https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/
You can add a gradient background for any element such as button, frame, boxview etc..
Example code for Button:
<Button Text="Submit Order" CornerRadius="5" TextColor="White">
<Button.Background>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.1" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>
</Button.Background>
</Button>
The output:

Answer 2

In xamarin you can't add gradient colors as a built in feature. You have to create a different rendering feature. This link will guide you.

Answer 3

In Xamarin Forms Craets
public class GradientColorStack:StackLayout
{
public Color StartColor { get; set; }
public Color EndColor { get; set; }
}
And then Renderer Android
public class GradientColorStackRenderer : VisualElementRenderer<StackLayout>
{
private Color StartColor { get; set; }
private Color EndColor { get; set; }
protected override void DispatchDraw(global::Android.Graphics.Canvas canvas)
{
#region for Horizontal Gradient
var gradient = new Android.Graphics.LinearGradient(0, 0, Width, 0,
#endregion
this.StartColor.ToAndroid(),
this.EndColor.ToAndroid(),
Android.Graphics.Shader.TileMode.Mirror);
var paint = new Android.Graphics.Paint()
{
Dither = true,
};
paint.SetShader(gradient);
canvas.DrawPaint(paint);
base.DispatchDraw(canvas);
}
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || Element == null)
{
return;
}
try
{
var stack = e.NewElement as GradientColorStack;
this.StartColor = stack.StartColor;
this.EndColor = stack.EndColor;
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(#"ERROR:", ex.Message);
}
}
}
And In Ios Project Rendering
public class GradientColorStackRenderer : VisualElementRenderer<Frame>
{
public override void Draw(CGRect rect)
{
base.Draw(rect);
GradientColorFrame stack = (GradientColorStack)this.Element;
CGColor startColor = stack.StartColor.ToCGColor();
CGColor endColor = stack.EndColor.ToCGColor();
#region for Vertical Gradient
var gradientLayer = new CAGradientLayer();
#endregion
gradientLayer.Frame = rect;
gradientLayer.Colors = new CGColor[] { startColor, endColor
};
NativeView.Layer.InsertSublayer(gradientLayer, 0);
}
}
Now you can Use in PCL Project Like this
<local:GradientColorStack StartColor="#DF596C" EndColor="#FFB239" >
</local:GradientColorStack>

Answer 4

Should you want to add it in a Styles file, the following worked for me:
Reference Post
<Style TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0.6"/>
<GradientStop Color="Blue" Offset="1.0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>