Question

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

当前：

愿望：

一些选项通过Google登顶，但似乎没有一个是平台无关的，并且可以用于Buttons。

列举几个名字：
-使用WebView并使用CSS设置渐变背景（来源：Xamarin forums）
-XFGloss似乎是一个设计出色的解决方案，但不幸的是，如所写，其范围似乎仅是单元格视图和布局。同样，即使这确实适用于Buttons，它也似乎仅适用于iOS和Android。

愿望是一种与iOS＆UWP兼容的解决方案，用于将渐变应用于Button的BorderColor。

进行了一些初步挖掘，但尚未为Buttons找到任何东西。一千个道歉，如果我错过了关于Button BorderColor属性渐变的文章。

Answer 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平台。

Answer 2

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

渐变作为按钮BorderColor吗？

2 个答案: