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;
        }
    } 

Answer 1

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.

Answer 2

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;
}