Xamarin Forms: Animations with OpacityProperty BindableProperty - animation

Question

In the ViewModel I have a dependency property called IsButtonVisible, either true or false.
In the View layer I have this layout that I need to show or hide, depending on the value of IsButtonVisible. But I don't just want to show or hide it abruptly, I want to smoothly fade it in and out.
I read online that the way to do it is via events, e.g. to fade the control to 0% or 100% over 3 seconds:
await image.FadeTo(0, 3000);
await image.FadeTo(1, 3000);
But now I want to do it via databinding. The old code was:
MyControl.SetBinding(IsVisibleProperty, "IsButtonVisible");
Now I need to use smooth opacity instead, the farthest I could reach is:
MyControl.SetBinding(OpacityProperty, "IsButtonVisible", BindingMode.OneWay, new MyButtonConverter()););
public class MyButtonConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((bool)value)
return 1; // 100%; visible
return 0; // 0%; invisible
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Problem is it's as abrupt as visibility is involved.
Is there a way I can use animation somewhere, whether in the databinding statement or inside the converter?
Thanks.

Answer 1

You do not what to add the View (animation) logic inside your ViewModel as that will break its independance of the ContentPage/View/..., testing becomes difficult, etc, ... (lots of SO Q/As regarding this already).
So lets assume that your ViewModel exposes a property change event, an assignable callback Command or Action, or a System.Reactive subject (my personal choice), etc... for your IsButtonVisible property that you can attach to in your View (not the ViewModel), something like this in the ContentPage .ator:
InitializeComponent();
BindingContext = viewModel = new AnimPageViewModel();
viewModel.PropertyChanged += ViewModel_PropertyChanged;
Now when the IsButtonVisible changes you can run your animation, this example just toggles the Opacity back and forth each time that property changes.
async void ViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == "IsButtonVisible")
{
await animateButton
.FadeTo(
Math.Abs(animateButton.Opacity) > double.Epsilon ? 0 : 1,
2000,
Math.Abs(animateButton.Opacity) < double.Epsilon ? Easing.CubicIn : Easing.CubicOut);
}
}