Animate a WPF Window left and right with a shake effect?

Question

Could someone please show me how to animate a window from its current position. I am looking for a shake effect which simply shakes the window left and right say 5 to 6 times.

I understand that I need to use Animation.By. This is something I have started but am not getting far.

This However does not work.

<Storyboard x:Key="sbShake1" FillBehavior="Stop">
    <DoubleAnimation Storyboard.TargetName="W1" Storyboard.TargetProperty ="(Window.Left)"
                     By="10" Duration="0:0:1">
    </DoubleAnimation >
</Storyboard >

I have managed to get the right shake effect but I cannot do it from the windows current position.

<Storyboard x:Key="sbShake" RepeatBehavior ="00:00:01" SpeedRatio ="25" >
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty ="Left">
        <SplineDoubleKeyFrame KeyTime ="00:00:00.1000000" Value ="-10"/>
        <SplineDoubleKeyFrame KeyTime ="00:00:00.3000000" Value ="0"/>
        <SplineDoubleKeyFrame KeyTime ="00:00:00.5000000" Value ="10"/>
        <SplineDoubleKeyFrame KeyTime ="00:00:00.7000000" Value ="0"/>
    </DoubleAnimationUsingKeyFrames >
</Storyboard >

All help would be appreciated.

score 6 · Accepted Answer · answered Jul 30 '14 at 09:02

Set the Left property of your window to 500 and add this code:

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.MouseDown" >
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard TargetProperty="Left">
                    <DoubleAnimation From="500" To="515" Duration="0:0:0.05"
                                     AutoReverse="True" RepeatBehavior="3x"
                                     FillBehavior="Stop"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>

You should set the property Left of Window manually when you don't mention From="x" otherwise it set to Auto and when you try to shake your window the value of Left is NaN and an exception will be thrown.

It has been a long time but I have just come back to this. Thank you Ali. — darbid, Oct 13 '14 at 12:49

Emond · Answer 2 · 2013-07-04T04:09:00.860

1

You could use a BounceEase to make the window shake:

<Storyboard x:Name="myStoryboard">
    <DoubleAnimation By="10" Duration="00:00:3"
                     AutoReverse="True" RepeatBehavior="1"
                     Storyboard.TargetName="W1" 
                     Storyboard.TargetProperty="Left">
        <DoubleAnimation.EasingFunction>
            <BounceEase Bounces="2" EasingMode="EaseOut" 
                        Bounciness="2" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

edited Jul 04 '13 at 04:09

answered Jul 02 '13 at 20:21

Emond

50,210
11
84
115

For me this only works with a `From` value too. Otherwise Window will keep moving to the right out of sight. – LPL Jul 02 '13 at 20:57
Ah sorry to both. My first code snippet does in fact not work. It does keep going off the screen. I have edited me original post. I am not sure the BounceEase is the kind of shake I am looking for. This shake indicates an error so would prefer just a left right movement of equal size, speed etc. – darbid Jul 04 '13 at 03:11
Just make sure you set autoreverse property to true and repeat property correct – Emond Jul 04 '13 at 04:08
Thank you for updating your email. But it still just goes off the screen. I have found similar code here in my search so what else do I have to set? http://social.msdn.microsoft.com/Forums/vstudio/en-US/a40f7e0f-f1cc-410b-9b5f-eb0b46b085e7/problem-during-moving-window-using-doubleanimation – darbid Jul 06 '13 at 19:50
ElasticEase is better for this purpose (shaking effect). And no need for AutoReverse — instead of "By" use From="-100" To="0" so it will jump to the original position from some distance and then oscillate. – ai_enabled Dec 27 '22 at 22:31

Animate a WPF Window left and right with a shake effect?

2 Answers2

Linked