CODEWITHSUNDEEP
xamarinxamarin.formsgradient
MainakChoudhury
MainakChoudhury

Reputation: 524

Gradient Button in Xamarin Forms

Gradient Button

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

Upvotes: 4

Views: 10010

Answers (4)

Elmer
Elmer

Reputation: 383

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>

Upvotes: 1

Thameem
Thameem

Reputation: 756

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:

enter image description here

Upvotes: 13

sumit sisodia
sumit sisodia

Reputation: 111

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>

Upvotes: 2

SilentCoder
SilentCoder

Reputation: 2000

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.

Upvotes: 4

Related Questions