Button BorderColor 渐变不支持运行时间颜色变化？

Question

通过使用自定义渲染器，可以在 Xamarin.Forms 中的按钮边框上创建渐变颜色效果。通过在 OnElementChanged 覆盖方法中编辑 BorderColor 属性来完成。 [渐变按钮归功于@Nico Zhu]

目前按钮渐变适用于初始 start-up。当边框（或 StartColor）在运行时间内改变时，渐变被遮盖。请参阅下面的结果。第一个是加载时显示的渐变，第二个显示当前选择的内容，第三个是先前选择的按钮，它将其边框颜色恢复为黑色，但这仍然掩盖了初始渐变。

XF按钮如何支持运行时间变化和保持渐变边框？

Xamarin.Forms 渐变按钮

using Xamarin.Forms;

namespace XamarinGradientButtonTest
{
    public class GradientButton : Button
    {
        public static readonly BindableProperty StartColorProperty = BindableProperty.Create(
    propertyName: "StartColor",
    returnType: typeof(Color),
    declaringType: typeof(GradientButton),
    defaultValue: default(Color));

        public Color StartColor
        {
            get { return (Color)GetValue(StartColorProperty); }
            set { SetValue(StartColorProperty, value); }
        }

    }
}

iOS渲染器

using System;
using CoreAnimation;
using CoreGraphics;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XamarinGradientButtonTest;
using XamarinGradientButtonTest.iOS;

[assembly: ExportRenderer(typeof(GradientButton), typeof(GradientButtonRenderer))]

namespace XamarinGradientButtonTest.iOS
{
    public class GradientButtonRenderer : ButtonRenderer
    {
        CAGradientLayer gradient;
        CAShapeLayer shape;
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            gradient = new CAGradientLayer();
            gradient.Colors = new CGColor[] { ((GradientButton)Element).StartColor.ToCGColor(), Element.BorderColor.ToCGColor() };

            shape = new CAShapeLayer();
            shape.LineWidth = (nfloat)(Element.BorderWidth);
            shape.StrokeColor = UIColor.Black.CGColor;
            shape.FillColor = UIColor.Clear.CGColor;
            gradient.Mask = shape;

            Control.Layer.AddSublayer(gradient);
            Control.Layer.BorderColor = UIColor.Clear.CGColor;
        }

        public override void Draw(CGRect rect)
        {
            base.Draw(rect);

            shape.Path = UIBezierPath.FromRect(rect).CGPath;
            gradient.Frame = rect;
        }
    }
}

XF 按钮创建

<local:GradientButton BorderColor="Black" BorderRadius="5" StartColor="White" BorderWidth="8" WidthRequest="50" HeightRequest="44" VerticalOptions="Start" HorizontalOptions="Start"/>

点击

private void btnClick(object sender, EventArgs e)
{
    ((GradientButton)sender).BorderColor = Color.Green;
}

在 De-Select

BorderColor = Color.Black;

Answer 1

可以在方法OnElementPropertyChanged中设置borderColor。在GradientButtonRenderer

中添加如下代码

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 {
    base.OnElementPropertyChanged(sender, e);

    if(e.PropertyName=="BorderColor")
     {
        var color = (Element as GradientButton).BorderColor;
        gradient.Colors = new CGColor[] { ((GradientButton)Element).StartColor.ToCGColor(), color.ToCGColor() };

        shape.StrokeColor = color.ToCGColor();
        shape.FillColor = UIColor.Clear.CGColor;
        gradient.Mask = shape;

        Control.Layer.AddSublayer(gradient);
        Control.Layer.BorderColor = UIColor.Clear.CGColor;

     }

}

Button BorderColor 渐变不支持运行时间颜色变化？

Button BorderColor gradient not supporting run time color change?

c#

xamarin.forms

renderer

Button BorderColor 渐变不支持 运行 时间颜色变化？

Button BorderColor gradient not supporting run time color change?

c#

xamarin.forms

renderer

Button BorderColor 渐变不支持运行时间颜色变化？