Waiting .1 second until hiding an image

Question

I am making a small program in C# for Windows Phone. One thing that it should do is hide a toolbar of buttons whenever the user taps the "Hide" button.

I've finished the code to hide the toolbar. It hides the buttons, like expected. But what happens now is that all the buttons disappear at once. In order to make a sort of "animation", I've decided to wait .1 second until hiding all the buttons.

How would I wait .1 second?

Here's my code right now.

    bool panelopened = false;

    private void image1_MouseEnter(object sender, MouseEventArgs e)
    {
        if (panelopened == false)
        {
            ImageSourceConverter imgs = new ImageSourceConverter();
            image1.SetValue(Image.SourceProperty, imgs.ConvertFromString("/Main%20View;component/Images/hide.png"));
            image3.Width = 50;
            image4.Width = 50;
            image5.Width = 50;
            panelopened = true;
        }
        else
        {
            ImageSourceConverter imgs = new ImageSourceConverter();
            image1.SetValue(Image.SourceProperty, imgs.ConvertFromString("/Main%20View;component/Images/more.png"));
            image3.Width = 0;
            image4.Width = 0;
            image5.Width = 0;
            panelopened = false;
        }
    }

score 5 · Answer 1 · edited May 23 '17 at 12:26

5

Check out this previous answer. Using this you can do

Dispatcher.DelayInvoke(TimeSpan.FromSeconds(0.1), () => 
{
   image3.Width = 0;
   image4.Width = 0;
   image5.Width = 0;
}

edited May 23 '17 at 12:26

Community

1
1

answered Apr 09 '11 at 17:26

BrokenGlass

158,293
28
286
335

-1 awful hack in this case - there is "out of the box" functionality. UI Thread is blocked, app freezes, horrible User Expirience. – Lukasz Madon Apr 09 '11 at 17:49
@lukas: What are you talking about? **Nothing freezes or is blocked and this is not a hack** - care to explain? This solution uses a non-blocking dispatch timer as part of an extension method, how do you think this will cause "freezing and a horrible user experience" ? – BrokenGlass Apr 09 '11 at 17:51
Sorry didn't notice that is an extension method, but this is not the best way of doing it. Firstly, there is built-in fuctionalty. Secondly, the best pratice is to use Opacity. Here is an explanation http://tiny.cc/v0zo8 (the white papier in the links below video has more details). This is really important, because seting Width of an UI element has an impact on Visual tree, hence everthing has to be refresed. *Silverlight != Silverlight for Windows Phone* and this is an example. (next ver. of SL will implement SL for WP7 model and maybe even WPF) – Lukasz Madon Apr 09 '11 at 18:11
I was flipping through my Java book when I came across this: Thread.Sleep(0100); It works in C# too. Would there be any downsides to using this? – JavaAndCSharp Apr 09 '11 at 18:15
@JavaAndCSharp: Now *that* would block the UI thread - you shouldn't do that. – BrokenGlass Apr 09 '11 at 18:16
1

@lukas: point taken on setting the width (I just copied that part from OP's question), but the approach still holds when you set the visibility instead. While story boards are powerful indeed, if you just want to hide an image after a short period of time you don't need one. – BrokenGlass Apr 09 '11 at 18:19
I tried Thread.Sleep(0100);, and it turns out it didn't work and froze the app. – JavaAndCSharp Apr 11 '11 at 22:31

score 1 · Accepted Answer · answered Apr 09 '11 at 17:47

The way you are doing this is not to best - a lot od work on UI Thread.

I use in my app following code. Remeber, Sroryboards animations run on Compositor Thread which is lightweight and built execly for this purpose.

// fade animation of the Popup to opacity 1.0
    private void ShowPopup()
    {
        exitPopup.Visibility = Visibility.Visible;
        Storyboard storyboard = new Storyboard();
        DoubleAnimation fadeAnimation = new DoubleAnimation();
        fadeAnimation.To = 1;
        fadeAnimation.Duration = TimeSpan.FromSeconds(1);
        //fadeAnimation.FillBehavior = FillBehavior.Stop;
        StoryBoardHelper.SetTarget(fadeAnimation, exitPopup);
        Storyboard.SetTargetProperty(fadeAnimation, new PropertyPath("(Canvas.Opacity)"));
        storyboard.Children.Add(fadeAnimation);
        storyboard.Duration = fadeAnimation.Duration;
        storyboard.Begin();
    }

    // fade aninmation to opacity 0.0
    private void ClosePopup()
    {
        Storyboard storyboard = new Storyboard();
        DoubleAnimation fadeAnimation = new DoubleAnimation();
        fadeAnimation.To = 0;
        fadeAnimation.Duration = TimeSpan.FromSeconds(0.2);
        //fadeAnimation.FillBehavior = FillBehavior.Stop;
        StoryBoardHelper.SetTarget(fadeAnimation, exitPopup);
        Storyboard.SetTargetProperty(fadeAnimation, new PropertyPath("(Canvas.Opacity)"));
        storyboard.Children.Add(fadeAnimation);
        storyboard.Duration = fadeAnimation.Duration;
        storyboard.Begin();
        storyboard.Completed += (sender, e) => exitPopup.Visibility = Visibility.Collapsed;
    }

You need one more thing. Set BeginTime to start the animation form 1s.

You can always change this code to XAML which is smaller and more explicite.

I would gladly use this instead of waiting, though I have no idea of how to use it in my code. — JavaAndCSharp, Apr 09 '11 at 18:11
You have the buttons in some Panel. StackPanel for example. change the exitPopup to the name of your panel. Then change the PropertyPath("(Canvas.Opacity)" to StackPanel.Opacity (if this is StackPanel). and just one more thing: yourAnimation.BeginTime = TimeSpan.FromSeconds(1); to start it a second later. — Lukasz Madon, Apr 09 '11 at 18:17
You don't give the OP what he asked for, the outcome is somewhat predictable. You owe @Broken a comp vote btw. — Hans Passant, Apr 09 '11 at 18:23
oh yeah I forgot http://stackoverflow.com/questions/3485272/storyboard-gettarget-in-silverlight-for-windows-mobile — Lukasz Madon, Apr 13 '11 at 00:24
Thanks- It works perfectly. When my app dominates the marketplace, I'll take pity on you. — JavaAndCSharp, Apr 13 '11 at 23:10

Waiting .1 second until hiding an image

2 Answers2

Linked