Geek Answers Handbook

Dynamic animation using storyboards

I am developing an application in WPF using the MVVM pattern. I am showing a directed graph with nodes and links (see the following figure).

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

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

Nodes, links, and delimiters are all the items displayed in the ItemsControl. Their presentation is controlled by some DataTemplates and their position with styles.

I do 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}"/>

I want to do 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>

, "To" DoubleAnimation ( Freezable).

​​ ? "X" ?

+5
1

, () 0 1, . ?

+1

More articles:


All Articles