Question

I am attempting to create a multi-part timer that does the following…

• Slide canvas object down.
• Change object off-screen.
• Slide canvas object up (to original position).

This will be triggered every 5 seconds by a Dispatcher timer but i am unsure as to how to get the object to slide up/down as my attempts at using a loop for this have caused the application to lock up.

Any ideas on how this could be done would be of a huge help to me, thanks.

Answer 1

WPF has a nice animation class to handle stuff like this.

Here is a quick example (code behind only) I use this method in mutiple applications to quickly create an animation.

    /// <summary>
    /// Creates a double animation.
    /// </summary>
    /// <param name="from">From position</param>
    /// <param name="to">To position</param>
    /// <param name="duration">The duration.</param>
    /// <param name="delay">The delay.</param>
    /// <param name="autoreverse">if set to <c>true</c> [autoreverse].</param>
    /// <param name="repeat">The times to repeat.</param>
    /// <returns>new double animation</returns>
    public static DoubleAnimationUsingKeyFrames GetDoubleAnimation(double from, double to, int duration, int delay, bool autoreverse, int repeat)
        {
            var doubleanimation = new DoubleAnimationUsingKeyFrames();
            doubleanimation.AutoReverse = autoreverse;
            doubleanimation.IsAdditive = false;
            Storyboard.SetDesiredFrameRate(doubleanimation, 30);
            doubleanimation.IsCumulative = false;
            doubleanimation.BeginTime = new TimeSpan(0, 0, 0, 0, delay);
            doubleanimation.Duration = new Duration(TimeSpan.FromMilliseconds(duration));
            doubleanimation.RepeatBehavior = repeat == -1 ? RepeatBehavior.Forever : new RepeatBehavior(repeat);
            EasingDoubleKeyFrame start = new EasingDoubleKeyFrame(from, KeyTime.FromPercent(0));
            EasingDoubleKeyFrame end = new EasingDoubleKeyFrame(to, KeyTime.FromPercent(1.0));
            doubleanimation.KeyFrames.Add(start);
            doubleanimation.KeyFrames.Add(end);
            return doubleanimation;
        }

Usage:

   myCanvas.BeginAnimation(Canvas.TopProperty, GetDoubleAnimation(100, 400, 2000,0,false,1));

This will animate the canvas vertically from 100 to 400 over 2 seconds.

Xaml:

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Canvas Name="myCanvas" Margin="77,102,191,102" Background="Black" Height="73" Width="113" />
    </Canvas>
</Window>