渐变作为按钮的边框颜色? [英] Gradient as a Buttons BorderColor?

查看:41
本文介绍了渐变作为按钮的边框颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

当前:

愿望:

一些选项通过 Google 升至顶部,但似乎没有一个是独立于平台的并且适用于 Buttons.

命名一对:
- 使用 WebView 并使用 CSS 设置渐变背景(来源:

这是包含 UWP 和 IOS 平台的代码示例,请检查.

I want to set a gradient border color for a Xamarin.Forms button. How can I do that?

Current:

Desire:

A few options rise to the top through Google, but none seem to be platform independent AND work for Buttons.

To name a couple:
-Using a WebView and setting the gradient background using CSS (source: Xamarin forums)
-XFGloss looks to be a outstandingly well-designed solution but, unfortunately its scope, as written, appears to be Cell views and Layouts only. Likewise even if this does work for Buttons, it appears to be iOS & Android only.

The desire is an iOS & UWP compatible solution for applying gradients to a Button s BorderColor.

Did some preliminary digging and have yet to find anything for Buttons. A thousand apologies if I missed a post on SO regarding Button BorderColor property gradients.

解决方案

You could custom ButtomRender to realize gradient border in Xamarin Forms. Edit the BorderColor property in OnElementChanged override method. You could pass a LinearGradientBrush to Control.BorderBrush to realize this feature within UWP. For detail, please refer the following code.

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 code sample that contain UWP and IOS platform please check.

这篇关于渐变作为按钮的边框颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆