Кнопка градиента BorderColor не поддерживает изменение цвета во время выполнения? - PullRequest
Новая
       28

Кнопка градиента BorderColor не поддерживает изменение цвета во время выполнения?

0 голосов
/ 30 ноября 2018

С помощью пользовательского средства визуализации можно создать эффект градиента цвета на границе кнопки в Xamarin.Forms.Завершено редактированием свойства BorderColor в методе переопределения OnElementChanged.[Gradient Button кредитует @Nico Zhu]

В настоящее время градиент кнопок работает при первом запуске.Когда граница (или StartColor) изменяется во время выполнения, градиент маскируется.Смотрите результаты ниже.Первая - это градиент, как показано при загрузке, вторая - это то, что выбрано в данный момент, а третья - ранее выбранная кнопка, которая вернула свой цвет границы обратно в черный, но опять-таки это маскирует исходный градиент.

Как поддерживать изменения времени выполнения и поддерживать градиент Граница на кнопке XF?

states of color

Xamarin.Forms Gradient Button 

using Xamarin.Forms;

namespace XamarinGradientButtonTest
{
    public class GradientButton : Button
    {
        public static readonly BindableProperty StartColorProperty = BindableProperty.Create(
    propertyName: "StartColor",
    returnType: typeof(Color),
    declaringType: typeof(GradientButton),
    defaultValue: default(Color));

        public Color StartColor
        {
            get { return (Color)GetValue(StartColorProperty); }
            set { SetValue(StartColorProperty, value); }
        }

    }
}

iOS Renderer 

using System;
using CoreAnimation;
using CoreGraphics;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XamarinGradientButtonTest;
using XamarinGradientButtonTest.iOS;

[assembly: ExportRenderer(typeof(GradientButton), typeof(GradientButtonRenderer))]

namespace XamarinGradientButtonTest.iOS
{
    public class GradientButtonRenderer : ButtonRenderer
    {
        CAGradientLayer gradient;
        CAShapeLayer shape;
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            gradient = new CAGradientLayer();
            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;
        }
    }
}

Создание кнопки XF 

<local:GradientButton BorderColor="Black" BorderRadius="5" StartColor="White" BorderWidth="8" WidthRequest="50" HeightRequest="44" VerticalOptions="Start" HorizontalOptions="Start"/>

При нажатии 

private void btnClick(object sender, EventArgs e)
{
    ((GradientButton)sender).BorderColor = Color.Green;
}

При снятии выбора 

BorderColor = Color.Black;

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете установить borderColor в методе OnElementPropertyChanged. Добавьте следующий код в GradientButtonRenderer

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 {
    base.OnElementPropertyChanged(sender, e);

    if(e.PropertyName=="BorderColor")
     {
        var color = (Element as GradientButton).BorderColor;
        gradient.Colors = new CGColor[] { ((GradientButton)Element).StartColor.ToCGColor(), color.ToCGColor() };

        shape.StrokeColor = color.ToCGColor();
        shape.FillColor = UIColor.Clear.CGColor;
        gradient.Mask = shape;

        Control.Layer.AddSublayer(gradient);
        Control.Layer.BorderColor = UIColor.Clear.CGColor;

     }

}
...