按钮 BorderColor 渐变不支持运行时颜色更改？答案

【问题标题】：Button BorderColor gradient not supporting run time color change?按钮 BorderColor 渐变不支持运行时颜色更改？
【发布时间】：2019-05-02 21:36:30
【问题描述】：

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

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

如何支持运行时变化并保持XF Button上的渐变边框？

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

取消选择

BorderColor = Color.Black;

【问题讨论】：

问题解决了吗？
@LucasZhang-MSFT 是的。您的解决方案完美运行。到现在为止，我无论如何都无法做出回应。再次感谢。

标签： c# xamarin.forms renderer

【解决方案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;

     }

}

【讨论】：