渐变作为按钮边框颜色？

Posted 2023-03-25

【中文标题】渐变作为按钮边框颜色？

【英文标题】：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

【参考方案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。用法很简单，可以查看文档。