C# XAML - For loop only displaying last iteration and nothing in between

Question

I'm currently working with C#/Xaml in VisualStudio (WPF application) to create a game for my first project. To simplify my problem, I currently have a button display a random image in a position in a window (I laid out 4 images, all collapsed, then this code will make a random one appear per second and then disappear).

Instead of a button click, I want a for loop to cycle through the code and display a random image, wait a second, then have that disappear and have another one pop up. I want this to happen automatically for a certain amount of cycles.

A section of my current code is:

private void Button_Click(object sender, RoutedEventArgs e)
{
    for (int j = 0; j < 5; j++)
    {
        Food1.Visibility = Visibility.Collapsed;
        Food2.Visibility = Visibility.Collapsed;
        Food3.Visibility = Visibility.Collapsed;
        Food4.Visibility = Visibility.Collapsed;

        int ImageToDisplay = RandomFood.Next(0, 4);

        if (ImageToDisplay == 0)
        {
            Food1.Visibility = Visibility.Visible;
        }
        else if (ImageToDisplay == 1)
        {
            Food2.Visibility = Visibility.Visible;
        }
        else if (ImageToDisplay == 2)
        {
            Food3.Visibility = Visibility.Visible;
        }
        else if (ImageToDisplay == 3)
        {
            Food4.Visibility = Visibility.Visible;
        }

        Thread.Sleep(1000);
    }
}

When I execute my code, it freezes for 5 seconds, the window is blank, then only displays the last image after 5 seconds. How do I get it to display a different image and then disappear every second for 5 seconds?

It freezes because you are telling it to do so. It does a bunch of `if` conditions and then sleeps and when it wakes up it has to do the next loop. Keeps doing that 5 times and then it has a chance to show the last image since that is what happened on the last iteration. You need [this](http://stackoverflow.com/questions/5410430/wpf-timer-like-c-sharp-timer) — CodingYoshi, Apr 18 '17 at 03:07

score 1 · Accepted Answer · answered Apr 18 '17 at 03:01

You're putting the UI thread to sleep. You need to work with async/await for this one. Here's an option:

private async void Button_Click(object sender, RoutedEventArgs e)
{
    for (int j = 0; j < 5; j++)
    {
        Food1.Visibility = Visibility.Collapsed;
        Food2.Visibility = Visibility.Collapsed;
        Food3.Visibility = Visibility.Collapsed;
        Food4.Visibility = Visibility.Collapsed;

        int ImageToDisplay = RandomFood.Next(0, 4);

        if (ImageToDisplay == 0)
        {
            Food1.Visibility = Visibility.Visible;
        }
        else if (ImageToDisplay == 1)
        {
            Food2.Visibility = Visibility.Visible;
        }
        else if (ImageToDisplay == 2)
        {
            Food3.Visibility = Visibility.Visible;
        }
        else if (ImageToDisplay == 3)
        {
            Food4.Visibility = Visibility.Visible;
        }

        await Task.Delay(1000);
    }
}

Notice the async void Button_Click(...) and the await Task.Delay(1000). That's all that changed.

This works perfectly! I did exactly that and it works exactly how I wanted. Thank you so much! — freeflow488, Apr 18 '17 at 03:15

C# XAML - For loop only displaying last iteration and nothing in between

1 Answers1