函数在 UI 更改为可见之前运行，即使 UI 在函数运行之前设置为可见

Question

Basically I have a C# WinUI3 app which has a function which runs a process, and I wanted it to make some text labels visible to show the user what the app is doing, however even though I've set the visibility as visible, it doesn't get changed until all the functions have finished running and the button just stays clicked and looks as if the app is hanging even though it hasn't. Here's a photo of my code.

I have no idea where to start to fix this, I've looked up my problem and haven't seem to have found any answers so far. Sorry if I've done something wrong in my post, I'm pretty new to stack overflow

Answer 1

Your UI is not updating because you're running everything in the UI thread. I guess you need to learn about async / await . Here is a good tutorial from Stephen Cleary.

Try this code and you'll see that the UI gets updated.

<Button
    Click="Button_Click"
    Content="Start" />
<TextBlock
    x:Name="MessageTextBlock"
    Text="Click the button." />

private async void Button_Click(object sender, RoutedEventArgs e)
{
    // Starts running on the UI thread.
    MessageTextBlock.Text = "Running process...";
    await RunProcess();
    MessageTextBlock.Text = "Done!";
}

private async Task RunProcess()
{
    // Releases the thread that called this method, 
    // the UI thread in this case, 
    // and lets "another thread" to run this "heavy work".
    // This is why the UI thread can update the MessageTextBlock 
    // while "another thread" is doing the "heavy work".
    await Task.Run(async () =>
    {
        // heavy work.
        await Task.Delay(1000);
    });
    // Brings back the UI thread.
}