Question

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

当前，按钮渐变可在初始启动时使用。在运行期间更改边框（或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;
}

取消选择时

BorderColor = Color.Black;

Answer 1

您可以在方法borderColor中设置OnElementPropertyChanged。在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;

     }

}

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

1 个答案: