Dynamic animation using storyboards

Question

I develop an application in WPF using the MVVM pattern. I am displaying an oriented graph, with nodes and links (see following picture).

http://free0.hiboox.com/images/1110/diapo1c36a4b95802846b8553d2fe9b9e6639.png?26

The user can drag and drop the nodes from one "cell" to another. When the user drops a node, its position is changed to align it in the grid. What I want to do, is to animate the node when its position is adjusted during the alignment routine.

The nodes, links and separators are all items displayed in an ItemsControl. Their representation is controlled with some DataTemplates, and their position with Styles.

What I am doing is the following :

private void Align() {
    // Computations...
    TX = ... //Target X is set
    TY = ... //target Y is set
    X = TX;
    Y = TY; // X and Y setters fire PropertyChanged
}

<Style x:Key="NodeViewStyle">
    <Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/>
    <Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/>

What I want to do is the following :

private void Align() {
    // Computations...
    TX = ...
    TY = ... //TX and TY setters fire PropertyChanged
}

<Style x:Key="NodeViewStyle">
    <Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/>
    <Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding State}" Value="UPDATEPOS">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="{Binding TX}" Duration="0:0:1"
                                         Storyboard.TargetProperty="(Canvas.Left)"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>

But this does not work at runtime, since I cannot bind to "To" property of my DoubleAnimation (it's a Freezable).

What is the simpliest way of doing such a dynamic animation ? Animating the "X" property through a timer directly in the viewmodel ?

Answer 1

I solved a similar problem animating an ancillary (attached) property from 0 to 1 and then binding the desired target property to the ancillary one with a value converter. Does it makes sense?