Xamarin Forms 中的渐变按钮

Gradient Button in Xamarin Forms

如何使用渲染器在 Xamarin Forms 中创建带有渐变效果的按钮?

在 xamarin 中,您不能将渐变颜色添加为内置功能。您必须创建不同的渲染功能。 link 将指导您。

在 Xamarin 中形成 Craets

public class GradientColorStack:StackLayout
    {
        public Color StartColor { get; set; }
        public Color EndColor { get; set; }
    }

然后是渲染器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);
            }
        }
    }

并在Ios项目渲染中

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);
        }
    }

现在您可以像这样在PCL项目中使用

<local:GradientColorStack StartColor="#DF596C" EndColor="#FFB239" >
</local:GradientColorStack>

现在 Xamarin forms 4.8 可以使用渐变画笔和拖放功能等新功能。

看看这个 link => https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/brushes/

您可以为按钮、框架、框视图等任何元素添加渐变背景。

按钮的示例代码:

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

输出:

如果您想将它添加到样式文件中,以下方法对我有用:

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>