Animating a WPF property when it changes to a non specified value

Published Feb 16, 2014

While working on a small personal project, I decided to make a graphical tool that displayed a list of items in a Canvas. After making it work (for details go here), I've decided to make the items animate when changing their position. In my mind it had to be a simple solution, akin to jQuery animate or something like that; it was not.

The final solution was to finally give up on a generic method for this and switch to the trusted attached properties. But if you are curious to see what else I tried and how ugly it got, read it here:

Click here to get ugly!

First I had to detect the change in value. This is done by specifying in the bindings for the properties of interest the option NotifyOnTargetUpdated="True" and then creating an EventTrigger that fires on Binding.TargetUpdated. In that trigger, an animation can be stored and/or started. The code would be something like this:

<EventTrigger RoutedEvent="Binding.TargetUpdated">
    <EventTrigger.Actions>
        <BeginStoryboard>
            <Storyboard>
                <local:SafeDoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1" FillBehavior="Stop" />
                <local:SafeDoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger.Actions>
</EventTrigger>

The problem appears when the bound property that causes the trigger is the animated property. Basically the effect is for the animation to only work if you cause two animations to follow one another, in which case you see the second one. Otherwise the effect is an immediate and brusque change in the position. You may notice that instead of DoubleAnimation I used SafeDoubleAnimation, which is a custom class that inherits from DoubleAnimation and overrides the GetCurrentValueCore method to not throw stupid validation errors. I am sure this can be done in a nicer way, but I didn't research it. Here is the code of the class:

public class SafeDoubleAnimation:DoubleAnimation
{
    protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock animationClock)
    {
        if (double.IsNaN(defaultOriginValue)) defaultOriginValue = 0;
        if (double.IsNaN(defaultDestinationValue)) defaultDestinationValue = defaultOriginValue;
        try
        {
            return base.GetCurrentValueCore(defaultOriginValue, defaultDestinationValue, animationClock);
        }
        catch
        {
            return 0;
        }
    }
}

Back to the problem at hand. I tried to set a Delay to the bindings, it didn't work. I tried to set NotifyOnTargetUpdate on other bindings and randomly changed those values. Didn't work. I tried to add a StopStoryboard action before or after the BeginStoryboard action. I tried the properties for FillBehavior and HandOffBehavior. No effect. Funny enough, if I did set AutoReverse="True" it would work all the time, but it would just return to the previous values.
In the end I just decided to do it manually, which is really ugly and not MVVM at all. Thus I noticed that if I create the animation manually and run it, I get the same effect. The binding overrides the animation and the only way to make it work is to not fire PropertyChanged for the affected properties until the animation ends.
The result is so awful that I have qualms putting it here. It starts with:

public MyWindow()
{
    InitializeComponent();
    DataContextChanged += ItemGrid_DataContextChanged;
}

void ItemGrid_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    var vm = e.NewValue as INotifyPropertyChanged;
    if (vm != null)
    {
        vm.PropertyChanged += (s, ev) =>
        {
            if (ev.PropertyName == "SpecialPropertyName")
            {
                animateChanges();
            }
        };
    }
}

This assumes that the DataContext is only set once. If that would change, the property changed event handler would be a separate method and it would be removed from the previous DataContext when changing it. What it does is start a method when a special key is sent as the name of property changed.
In the ViewModel, I removed the OnPropertyChanged notifications for the variables that I am interested in. Therefore animateChanges will be able to access the items with their values unchanged, even if they're databound to items that have the correct values.
The animateChanges method looks like this:

private void animateChanges()
{
    var vm = (MyViewModel)DataContext;
    var zoom = vm.Zoom;
    var sb = new Storyboard();
    var converter=new CoordinateConverter(); // the same converter that I am using in the XAML databinding
    foreach (var child in lvKernelItems.Items)
    {
        var item=(KernelItem)child;
        var container = (UIElement)lvKernelItems.ItemContainerGenerator.ContainerFromItem(child); // ugly way of getting the UIElement associated to a data item
        var currentVal=Canvas.GetLeft(container);
        var nextVal=(double)converter.Convert(new object[] { item.X, lvKernelItems.ActualWidth, zoom },typeof(double),null,CultureInfo.CurrentCulture);
        var anim = new DoubleAnimation(nextVal, new Duration(TimeSpan.FromSeconds(0.5)))
        {
            FillBehavior = FillBehavior.Stop
        };
        Storyboard.SetTarget(anim, container);
        Storyboard.SetTargetProperty(anim, new PropertyPath("(Canvas.Left)"));
        sb.Children.Add(anim);
        currentVal = Canvas.GetTop(container);
        nextVal = (double)converter.Convert(new object[] { item.Y, lvKernelItems.ActualHeight, zoom }, typeof(double), null, CultureInfo.CurrentCulture);
        anim = new DoubleAnimation(nextVal, new Duration(TimeSpan.FromSeconds(0.5)))
        {
            FillBehavior = FillBehavior.Stop
        };
        Storyboard.SetTarget(anim, container);
        Storyboard.SetTargetProperty(anim, new PropertyPath("(Canvas.Top)"));
        sb.Children.Add(anim);
    }
    sb.Completed += sb_Completed;
    sb.Begin();
}

void sb_Completed(object sender, EventArgs e)
{
    foreach (var child in lvKernelItems.Items)
    {
        var item = (KernelItem)child;
        item.RefreshCoordinates();  //method that finally fires the OnPropertyChanged event on the X and Y properties, causing the final value to be set.
    }
}

Now, there is an advantage to doing it like this: it is more efficient, resource-wise. There is only one storyboard with animations for all the items instead of one storyboard for each item. But it is incredibly ugly.
I tried to create some sort of generic method of animating any property. I tried to inherit from Binding, MultiBinding, BindingBase, MarkupExtension, even Setter or SetterBase. Whoever built the classes for WPF wanted them sealed and internal protected and what not.

Well, long story short: attached properties. I created two attached properties CanvasLeft and CanvasTop. When they change, I animate the real properties and, at the end of the animation, I set the value. Here is the code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace Siderite.AttachedProperties
{
    public static class UIElementProperties
    {
        public static readonly DependencyProperty CanvasLeftProperty = DependencyProperty.RegisterAttached("CanvasLeft", typeof(double), typeof(UIElementProperties), new FrameworkPropertyMetadata(
                                                                                            0.0,
                                                                                            FrameworkPropertyMetadataOptions.OverridesInheritanceBehavior,
                                                                                            CanvasLeftChanged));

        [AttachedPropertyBrowsableForType(typeof(UIElement))]
        public static double GetCanvasLeft(DependencyObject element)
        {
            if (element == null)
            {
                throw new ArgumentNullException("element");
            }
            return (double)element.GetValue(CanvasLeftProperty);
        }

        [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
        public static void SetCanvasLeft(DependencyObject element, double value)
        {
            if (element == null)
            {
                throw new ArgumentNullException("element");
            }
            element.SetValue(CanvasLeftProperty, value);
        }

        private static void CanvasLeftChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var sb = new Storyboard();
            var oldVal = (double)e.OldValue;
            if (double.IsNaN(oldVal)) oldVal = 0;
            var newVal = (double)e.NewValue;
            if (double.IsNaN(newVal)) newVal = oldVal;
            var anim = new DoubleAnimation
            {
                From = oldVal,
                To = newVal,
                Duration = new Duration(TimeSpan.FromSeconds(1)),
                FillBehavior = FillBehavior.Stop
            };
            Storyboard.SetTarget(anim, d);
            Storyboard.SetTargetProperty(anim, new PropertyPath("(Canvas.Left)"));
            sb.Children.Add(anim);
            sb.Completed += (s, ev) =>
            {
                d.SetValue(Canvas.LeftProperty, newVal);
            };
            var fe = d as FrameworkElement;
            if (fe != null)
            {
                sb.Begin(fe, HandoffBehavior.Compose);
                return;
            }
            var fce = d as FrameworkContentElement;
            if (fce != null)
            {
                sb.Begin(fce, HandoffBehavior.Compose);
                return;
            }
            sb.Begin();
        }
        

        public static readonly DependencyProperty CanvasTopProperty = DependencyProperty.RegisterAttached("CanvasTop", typeof(double), typeof(UIElementProperties), new FrameworkPropertyMetadata(
                                                                                        0.0,
                                                                                        FrameworkPropertyMetadataOptions.OverridesInheritanceBehavior,
                                                                                        CanvasTopChanged));

        [AttachedPropertyBrowsableForType(typeof(UIElement))]
        public static double GetCanvasTop(DependencyObject element)
        {
            if (element == null)
            {
                throw new ArgumentNullException("element");
            }
            return (double)element.GetValue(CanvasTopProperty);
        }

        [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
        public static void SetCanvasTop(DependencyObject element, double value)
        {
            if (element == null)
            {
                throw new ArgumentNullException("element");
            }
            element.SetValue(CanvasTopProperty, value);
        }

        private static void CanvasTopChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var sb = new Storyboard();
            var oldVal = (double)e.OldValue;
            if (double.IsNaN(oldVal)) oldVal = 0;
            var newVal = (double)e.NewValue;
            if (double.IsNaN(newVal)) newVal = oldVal;
            var anim = new DoubleAnimation
            {
                From = oldVal,
                To = newVal,
                Duration = new Duration(TimeSpan.FromSeconds(1)),
                FillBehavior = FillBehavior.Stop
            };
            Storyboard.SetTarget(anim, d);
            Storyboard.SetTargetProperty(anim, new PropertyPath("(Canvas.Top)"));
            sb.Children.Add(anim);
            sb.Completed += (s, ev) =>
            {
                d.SetValue(Canvas.TopProperty, newVal);
            };
            var fe = d as FrameworkElement;
            if (fe != null)
            {
                sb.Begin(fe, HandoffBehavior.Compose);
                return;
            }
            var fce = d as FrameworkContentElement;
            if (fce != null)
            {
                sb.Begin(fce, HandoffBehavior.Compose);
                return;
            }
            sb.Begin();
        }
    }
}

and this is how you would use them:

<ListView ItemsSource="{Binding KernelItems}" 
          SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
          SelectionMode="Single"
          >
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Black" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="att:UIElementProperties.CanvasLeft" >
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource CoordinateConverter}">
                        <Binding Path="X"/>
                        <Binding Path="ActualWidth" ElementName="lvKernelItems"/>
                        <Binding Path="DataContext.Zoom" RelativeSource="{RelativeSource AncestorType={x:Type Window}}"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            <Setter Property="att:UIElementProperties.CanvasTop" >
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource CoordinateConverter}">
                        <Binding Path="Y"/>
                        <Binding Path="ActualHeight" ElementName="lvKernelItems"/>
                        <Binding Path="DataContext.Zoom" RelativeSource="{RelativeSource AncestorType={x:Type Window}}"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
            </Style.Resources>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Cyan"/>
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="White" Opacity="0.5" BlurRadius="10"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Canvas.ZIndex" Value="1000"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Hope it helps.

Comments

November 16, 2014

Honestly, I copy pasted it from previous work. It's so annoying to have to write that from scratch. But from what I remember it was all about children not inheriting the value. For example you want something like opacity to be handled down to the children, otherwise you have opaque elements hovering over translucent ones. In this case each element has their own property and you don't want to propagate it downwards.

Siderite

In your code, what did the FrameworkPropertyMetadataOptions.OverrideInheritanceBehavior accomplish? I tried to understand the documentation at MSDN, but it's not real clear and there are few examples of its use.

Craig S.

Comments

November 16, 2014

November 16, 2014

Post a comment