Question

I have this xaml:

    <Canvas Width="75" Height="75">
        <Button x:Name="button" Background="Olive" Canvas.Left="0" Canvas.Top="0" Width="75" Height="75" Click="button_Click"/>
    </Canvas>

And this code behind:

    Private Sub button_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
        Canvas.SetTop(sender, -75)

        Dim sb1 As New Storyboard
        Dim da1 As New DoubleAnimationUsingKeyFrames
        da1.BeginTime = TimeSpan.FromSeconds(0)
        Storyboard.SetTargetName(da1, CType(sender, Button).Name)
        Storyboard.SetTargetProperty(da1, New PropertyPath(Canvas.TopProperty))

        Dim t1 As Double = Canvas.GetTop(sender)
        da1.KeyFrames.Add(New SplineDoubleKeyFrame(t1 + 75, TimeSpan.FromSeconds(0.2)))
        sb1.Children.Add(da1)

        BeginStoryboard(sb1)        
    End Sub

When I click the button the first time, it properly goes up by 75 and animates back to 0, but when I click the button again, it just animates down by 75. Why is it skipping the Canvas.SetTop line and goes straight to the animating part? And how to fix this?

Answer 1

Use this code (it is in C#) before Canvas.SetTop

(sender as UIElement).BeginAnimation(Canvas.TopProperty, null);

This will avoid that any animation overrides the value Canvas.TopProperty

This link will help you

http://joshsmithonwpf.wordpress.com/2008/08/21/removing-the-value-applied-by-an-animation/