Add delay to MouseLeave Storyboard

Question

I have a storyboard plays an animation when the MouseLeave is triggered for the particular control.

I want to introduce a delay of 500 millisecond after MouseLeave is triggered and check if the mouse is no longer over the control. Only then play the control. If the user has brought back the mouse over the control within 500 millisecond I need not play the storyboard animation. How to achieve this?

This can all be done in xaml. Just set the begintime of the storyboard to 00:00:00.5 and stop the storyboard if the mouse enters the control. — Silvermind, Feb 18 '14 at 12:34

Mujahid Daud Khan · Accepted Answer · 2014-02-18T13:08:26.417

2

Code to Achieve your Requirement

private void UIElement_OnMouseLeave(object sender, MouseEventArgs e)
{
    var uiElement = sender as UIElement;
    uiElement.MouseLeave -= UIElement_OnMouseLeave;

    Task.Factory.StartNew(() =>
    {
        Thread.Sleep(1000); // or 500ms
        Dispatcher.Invoke(() =>
        {
            if (!uiElement.IsMouseOver)
            {
                // Animation Code Goes Here;
            }
            uiElement.MouseLeave += UIElement_OnMouseLeave;
        });
    });
}

OR on Demand for Tarec

private readonly DispatcherTimer _dispatcherTimer = new DispatcherTimer
{
    Interval = new TimeSpan(0,0,0,0,1000),
};

_dispatcherTimer.Tick += (sender, args) =>
{
    _dispatcherTimer.Stop();
    if (!uIElement.IsMouseOver)
    {
        // Animation Code Goes Here;
    }
};

private void UIElement_OnMouseLeave(object sender, MouseEventArgs e)
{
    // Reset Timer if Mouse Leave
    _dispatcherTimer.Stop();
    _dispatcherTimer.Start();
}

edited Feb 18 '14 at 13:08

answered Feb 18 '14 at 11:24

Mujahid Daud Khan

1,983
1
14
23

Casting an object with `as` and not null-checking it then is unacceptable. Also - I think that firing the method should be stopped/reseted everytime the mouse gets back to the uiElement. In your answer it is checked only once after exactly 1000ms from FIRST occurence of `OnMouseLeave`, so getting back and goint out with a mouse pointer within those 1000ms is ignored. – Tarec Feb 18 '14 at 12:23
Thanks Mujahid for the nice answer, I couldn't have solved it better. – Carbine Feb 19 '14 at 09:41
Why do we need `_dispatchTimer.Stop()` within OnMouseLeave when it is already stopped as part of the `Tick`? I didn't understand this part, could you please clarify? – Carbine Feb 19 '14 at 10:02
i took this hack from [**How to Reset Timer**](http://stackoverflow.com/questions/1042312/how-to-reset-a-timer-in-c) this is the only difference in **Code 1** and **Code 2** as the timer restarts from 0 if the mouse leave instead of an intermediate value – Mujahid Daud Khan Feb 20 '14 at 05:43

Tarec · Answer 2 · 2014-02-18T12:27:53.790

0

Set a flag bool isMouseOver = true. On MouseLeave set a flag to false and on MouseEnter set it to true. Create yourself a method that fires animation if isMouseOver == false and attach it to the timer with 500ms delay. The timer itself should be started/reseted on MouseLeave event and stopped on MouseEnter.

edit: Of course you should use IsMouseOver property instead of custom flag if available.

edited Feb 18 '14 at 12:27

answered Feb 18 '14 at 10:56

Tarec

3,268
4
30
47

Add delay to MouseLeave Storyboard

2 Answers2