渐变作为按钮边框颜色？

我想为 Xamarin.Forms 按钮设置渐变边框颜色。我怎样才能做到这一点？

Current:

Desire:

有一些选项通过 Google 上升到了顶峰，但似乎没有一个选项是独立于平台且适用于 Button 的。

举几个例子：
-使用WebView并使用CSS设置渐变背景 （来源：Xamarin 论坛 https://forums.xamarin.com/discussion/22440/gradient-as-background-color)
-XFGloss https://github.com/tbaggett/xfgloss看起来是一个设计得非常好的解决方案，但不幸的是，正如所写的那样，它的范围似乎仅限于单元格视图和布局。同样，即使这确实适用于按钮，它似乎仅适用于 iOS 和 Android。

我们希望有一个兼容 iOS 和 UWP 的解决方案，用于将渐变应用于 Button 的 BorderColor。

进行了一些初步挖掘，但尚未找到任何与按钮有关的东西。如果我错过了关于 Button BorderColor 属性渐变的帖子，我万分抱歉。

您可以定制ButtomRender https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.UAP/ButtonRenderer.cs#L13在Xamarin Forms中实现渐变边框。编辑BorderColor https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.UAP/ButtonRenderer.cs#L49财产在OnElementChanged覆盖方法。你可以通过一个LinearGradientBrush https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.lineargradientbrush to Control.BorderBrush在 UWP 中实现此功能。详细请参考下面的代码。

UWP

public class MyButtonRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement != null)
        {
            if (Element.IsSet(Button.BorderColorProperty) && Element.BorderColor != (Color)Button.BorderColorProperty.DefaultValue)
            {
                UpdateBorderColor();
            }

        }
    }
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (e.PropertyName == Button.BorderColorProperty.PropertyName)
        {
            UpdateBorderColor();
        }
    }
    void UpdateBorderColor()
    {
        Control.BorderBrush = Element.BorderColor != Color.Default ? Element.BorderColor.ToGradientBrush() : (Brush)Windows.UI.Xaml.Application.Current.Resources["ButtonBorderThemeBrush"];
    }

}
internal static class ConvertExtensions
{
    public static Brush ToGradientBrush(this Color color)
    {
        var GradientBrush = new LinearGradientBrush();
        GradientBrush.StartPoint = new Windows.Foundation.Point(0.5, 0);
        GradientBrush.EndPoint = new Windows.Foundation.Point(0.5, 1);
        GradientBrush.GradientStops.Add(new GradientStop() { Color = Windows.UI.Colors.LightGray, Offset = 0.0 });
        GradientBrush.GradientStops.Add(new GradientStop() { Color = color.ToWindowsColor(), Offset = 1.0 });
        return GradientBrush;
    }

    public static Windows.UI.Color ToWindowsColor(this Color color)
    {
        return Windows.UI.Color.FromArgb((byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
    }

}

IOS

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

        gradient = new CAGradientLayer(); 
        // add start color          
        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;
     }
}

This is 代码示例 https://github.com/ZhuMingHao/XamarinGradientButtonTest.git包含UWP和IOS平台的请查看。