Как создать анимацию FadeTo () на основе изменения BindableProperty, стиля MVVM?

Question

Допустим, у меня есть представление с элементом <Image>, которое отображается в зависимости от того, имеет ли оно ненулевое свойство или нет в модели представления.Вот так:

<Image IsVisible="{Binding HasPhoto}" Source="{Binding Url}" />

С помощью этой ViewModel (скопирована только соответствующая часть):

private string url {get;set;}
public string Url {
    get => url;
    set {
        url = value;
        OnPropertyChanged(nameof(HasPhoto));
        OnPropertyChanged();
    }
}

public bool HasPhoto { get => Url != null; }

И где-то в ViewModel я установил: Url = null.Это приведет к тому, что HasPhoto станет ложным, и немедленно сделает элемент <Image> невидимым, не оставляя места для анимации с .FadeTo(0) в поведении.Это моя текущая реализация поведения:

public class FadingBehavior : Behavior<VisualElement>
{
    public uint FadeTime { get; set; } = 250;

    protected override void OnAttachedTo(VisualElement bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.PropertyChanged += VisibilityMightHaveChanged;
    }

    protected override void OnDetachingFrom(VisualElement bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.PropertyChanged -= VisibilityMightHaveChanged;
    }

    private void VisibilityMightHaveChanged(object sender, PropertyChangedEventArgs args)
    {
        var element = sender as VisualElement;
        if (args.PropertyName == VisualElement.IsVisibleProperty.PropertyName)
        {
            var fadeToValue = element.IsVisible ? 1 : 0;

            element.Opacity = -fadeToValue + 1;
            element.FadeTo(fadeToValue, FadeTime);
        }
    }
}

Это хорошо, когда <Image> становится видимым, потому что сначала он становится видимым, затем он исчезает с 0 непрозрачности до 1. Но для исчезновения этогоэто не хорошо, так как URL-адрес удаляется мгновенно, что делает изображение пустым и невидимым, поэтому анимация затухания не может даже запуститься.

Какой хороший способ создать анимацию на основе изменения значения привязываемого свойства

Answer 1

Я думаю, что вы недалеко от хорошего решения.

Что бы я сделал, это унаследовал от Image и создал FadableImage с привязываемым свойством, которое называется что-то вроде VisibilityHelper.Затем, когда вы назначите ему значение, изображение все равно будет видимым, и вы сможете запустить анимацию так, как вы это уже делаете.Просто в конце, когда анимация завершится, вы должны проверить значение VisibilityHelper, а если оно все равно, также установить IsVisible на соответствующее значение.