INotifyPropertyChanged 和更改数据的动画

Question

在我的应用程序中，我有一个矩形指示基于其宽度的信息，这只是一个自定义进度条。我没有将其宽度绑定到 ViewModels 属性，因为更改并不平滑，并且条形图看起来不连贯，但我希望在数据更改时获得平滑的动画。

因此，我的事件处理程序对 PropertyChanged 事件的底层依赖作出反应，通知应反映在 UI 中的相应属性，但矩形的处理方式不同。基本上它运行

Rectangle.BeginAnimation(FrameworkElement.WidthProperty,
    new DoubleAnimation(width, TimeSpan.FromMilliseconds(200)));

我很好奇引入一个宽度属性是否合理，当它发生变化时会引发PropertyChanged 事件，然后对该属性进行动画处理，以便通过在我的 ViewModel 中为宽度属性设置动画来动画矩形。在那种情况下甚至可以为自定义属性设置动画吗？

Answer 1

您可以创建一个附加属性 TargetWidth，在设置时为 FrameworkElement 的 Width 属性设置动画。

public static class FrameworkElementExtension
{
    public static readonly DependencyProperty TargetWidthProperty =
        DependencyProperty.RegisterAttached(
            "TargetWidth",
            typeof(double),
            typeof(FrameworkElementExtension),
            new PropertyMetadata(TargetWidthPropertyChanged));

    public static double GetTargetWidth(this FrameworkElement obj)
    {
        return (double)obj.GetValue(TargetWidthProperty);
    }

    public static void SetTargetWidth(this FrameworkElement obj, double value)
    {
        obj.SetValue(TargetWidthProperty, value);
    }

    private static void TargetWidthPropertyChanged(
        DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var element = obj as FrameworkElement;
        if (element != null)
        {
            if (double.IsNaN(element.Width))
            {
                element.Width = 0;
            }

            element.BeginAnimation(
                FrameworkElement.WidthProperty,
                new DoubleAnimation((double)e.NewValue, TimeSpan.FromSeconds(0.2)));
        }
    }
}

您现在可以直接设置TargetWidth 喜欢

Rectangle.SetTargetWidth(width);

或将其绑定到视图模型属性：

<Rectangle ... local:FrameworkElementExtension.TargetWidth="{Binding RectangleWidth}" />