Кнопка градиента BorderColor не поддерживает изменение цвета во время выполнения?
С помощью пользовательского средства визуализации можно создать эффект градиента цвета на границе кнопки в Xamarin.Forms. Завершено редактированием свойства BorderColor в методе переопределения OnElementChanged. [Градиент Баттон кредитует @Nico Zhu]
В настоящее время кнопки градиента работают при первоначальном запуске. Когда граница (или StartColor) изменяется во время выполнения, градиент маскируется. Смотрите результаты ниже. Первая - это градиент, как показано при загрузке, вторая - это то, что выбрано в данный момент, а третья - ранее выбранная кнопка, которая вернула свой цвет границы обратно в черный, но опять-таки это маскирует исходный градиент.
Как поддержать изменения во время выполнения и сохранить градиент Граница на кнопке XF?
Кнопка градиента Xamarin.Forms
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;
0 ответов
Вы можете установить 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;
}
}