渐变作为按钮的边框颜色？

Question

我想为 Xamarin.Forms 按钮设置渐变边框颜色。我该怎么做？

当前：

愿望：

一些选项通过 Google 上升到顶部，但 none 似乎与平台无关并且适用于按钮。

一对夫妇的名字：
-使用 WebView 并使用 CSS 设置渐变背景（来源：Xamarin forums）
-XFGloss 看起来是一个设计精良的解决方案，但不幸的是，它的范围，正如所写的那样，似乎只是单元格视图和布局。同样，即使这对按钮有效，它似乎也只是 iOS & Android。

需要一个 iOS 和 UWP 兼容的解决方案，用于将渐变应用到 Button 的 BorderColor。

进行了一些初步挖掘，但尚未找到 Buttons 的任何内容。如果我错过了关于 Button BorderColor 属性渐变的 post，我深表歉意。

Answer 1

您可以使用 SKOR Nuget package。用法很简单，大家可以查看文档

Answer 2

您可以自定义 ButtomRender to realize gradient border in Xamarin Forms. Edit the BorderColor property in OnElementChanged override method. You could pass a LinearGradientBrush 到 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;
     }
}

这是 code sample，包含 UWP 和 IOS 平台，请检查。

渐变作为按钮的边框颜色？

Gradient as a Buttons BorderColor?

gradient

xamarin.ios

border-color

xamarin.forms

xamarin.uwp