Xamarin forms BoxView animation - animation

Question

I'm trying to create a blinking BoxView. I created a BlinkingBoxView that extends BoxView and added 1 Boolean property called "Blink". So what I want is, every time Blink changes and it's value is true, I want to start the blinking animation, if the value is false stop the animation.
Do I need to do this in C# code, or can I use only XAML like WPF?
Here is my try...
public class BlinkingBoxView : BoxView
{
public BlinkingBoxView()
: base()
{
}
public static readonly BindableProperty BlinkProperty = BindableProperty.Create<BlinkingBoxView, bool>(w => w.Blink, default(bool), BindingMode.TwoWay);
public bool Blink
{
get { return (bool)GetValue(BlinkProperty); }
set
{
SetValue(BlinkProperty, value);
var blinkAnimation = new Animation(d => this.FadeTo(0, 750, Easing.Linear)).WithConcurrent(new Animation(d => this.FadeTo(1, 750, Easing.Linear)));
if (this.Blink)
this.Animate("Blink", blinkAnimation);
}
}
}

Answer 1

You should use OnPropertyChanged override to catch properties changes:
public class BlinkingBoxView : BoxView
{
volatile bool isBlinking;
public static readonly BindableProperty BlinkProperty = BindableProperty.Create<BlinkingBoxView, bool>(w => w.Blink, default(bool), BindingMode.OneWay);
public bool Blink
{
get
{
return (bool)GetValue(BlinkProperty);
}
set
{
SetValue(BlinkProperty, value);
}
}
public static readonly BindableProperty BlinkDurationProperty = BindableProperty.Create<BlinkingBoxView, uint>(w => w.BlinkDuration, 500, BindingMode.OneWay);
public uint BlinkDuration
{
get
{
return (uint)GetValue(BlinkDurationProperty);
}
set
{
SetValue(BlinkDurationProperty, value);
}
}
protected override void OnPropertyChanged(string propertyName)
{
base.OnPropertyChanged(propertyName);
if (propertyName == BlinkProperty.PropertyName)
{
SetBlinking(Blink);
}
if (propertyName == BlinkDurationProperty.PropertyName)
{
if (isBlinking)
{
SetBlinking(false);
SetBlinking(Blink);
}
}
}
void SetBlinking(bool shouldBlink)
{
if (shouldBlink && !isBlinking)
{
isBlinking = true;
var blinkAnimation = new Animation(((d) => {
Opacity = d;
}), 0f, 1f, Easing.SinInOut);
this.Animate("BlinkingBoxViewBlink", blinkAnimation, length: BlinkDuration, repeat: () => isBlinking);
}
else if (!shouldBlink && isBlinking)
{
isBlinking = false;
}
}
}
You can use it in XAML just the same as any other View.