渐变作为按钮边框颜色？答案

【问题标题】：Gradient as a Buttons BorderColor?渐变作为按钮边框颜色？
【发布时间】：2018-12-27 20:25:27
【问题描述】：

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

当前：

愿望：

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

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

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

进行了一些初步挖掘，但尚未找到任何关于 Button 的信息。如果我错过了关于 Button BorderColor 属性渐变的 SO 帖子，我们深表歉意。

【问题讨论】：

你看过css appearance吗？ css-tricks.com/almanac/properties/a/appearance

标签： xamarin.forms xamarin.ios gradient xamarin.uwp border-color

【解决方案1】：

您可以自定义ButtomRender 在 Xamarin Forms 中实现渐变边框。在 OnElementChanged 覆盖方法中编辑 BorderColor 属性。您可以将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平台请查收。

【讨论】：

【解决方案2】：

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

【讨论】：