Make Slider bounce WPF Animation

Question

I want to give a hint - that a Slider is moveable. For this I want to make it bounce when it got focus.

I have so far an animation that makes it at least side it to a Value, but I want it to slide back after it or even make it a bit bounce.

This is the Trigger part of my custom Slider.

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="UIElement.GotFocus">
         <BeginStoryboard>
             <Storyboard>
                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RangeBase.Value)" >
                     <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                 </DoubleAnimationUsingKeyFrames>
             </Storyboard>
         </BeginStoryboard>
     </EventTrigger>
 </ControlTemplate.Triggers>

Is there a better event maybe too?

`Trigger.ExitActions` like this https://stackoverflow.com/questions/35942800/set-image-opacity-with-an-doubleanimation — Salah Akbari, Jun 13 '17 at 13:47

Bish25 · Accepted Answer · 2017-06-13T14:46:50.610

2

You could try and use AutoReverse with RepeatBehaviour

<Storyboard>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RangeBase.Value)" >
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="90"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

update

<EventTrigger RoutedEvent="UiElement.Click">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" >
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="90"/>
            </DoubleAnimationUsingKeyFrames>
         </Storyboard>
    </BeginStoryboard>
</EventTrigger>

edited Jun 13 '17 at 14:46

answered Jun 13 '17 at 14:05

Bish25

606
1
10
35

I dont want it to repeat for ever just 3 seconds and it does not find `RepeatBehaviour` or `AutoReverse` – Peter Jun 13 '17 at 14:10
you could set the `RepeatBehaviour="3"` – Bish25 Jun 13 '17 at 14:13
1

or you could use `RepeatBehaviour="0:0:3"` – Bish25 Jun 13 '17 at 14:14
Thank you very much - i solved this. But i have now the problem that I can't slide it while the animation. And I currently see no solution to this. That the application will only used with Touch makes it even worse. – Peter Jun 13 '17 at 14:38
1

there is two options really, add a click or mouse down event `Storyboard sb = (Storyboard)this.FindResource("name");` then use `sb.Stop();` or see update – Bish25 Jun 13 '17 at 14:44
2

It would be simpler and more efficient to fire off the storyboard on the UIElement.GotFocus event with one single keyframe animation using a [BounceEase](https://msdn.microsoft.com/en-us/library/system.windows.media.animation.bounceease(v=vs.110).aspx) Easing Function without any RepeatBehavior (which by the way if you did it 3 times the syntax would be ="3x" not ="3") just a tip :) – Chris W. Jun 13 '17 at 19:08

Make Slider bounce WPF Animation

1 Answers1