WPF中后台执行UI操作时显示进度条的问题

问题根源 #

1. 代码笔误：最后一行本该隐藏进度条，却错误写为SpinnerVisibility = Visibility.Visible，导致进度条始终处于显示状态。
2. UI线程阻塞：ShowAllTracksThread作为耗时UI操作，你通过Dispatcher.BeginInvoke将其加入UI线程队列，但当前方法仍在UI线程同步执行——先设置进度条可见，接着把耗时操作加入队列，随后立刻错误设置进度条可见，整个过程UI线程没有机会刷新界面，进度条根本来不及正常显示，同时耗时操作会直接阻塞UI，导致界面卡顿。

修正步骤 #

1. 修复笔误

把最后一行代码改为：

SpinnerVisibility = Visibility.Collapsed;

2. 避免UI线程阻塞，让进度条正常显示

绘制操作属于UI操作，必须在UI线程执行，但需让UI线程先完成进度条刷新，再执行耗时操作，同时确保操作结束后隐藏进度条。以下提供两种可行方案：

方案一：让UI线程先刷新进度条，再执行耗时操作

public async void OnShowAllTrackClick()
{
    // 显示进度条
    SpinnerVisibility = Visibility.Visible; 
    // 让UI线程优先处理界面刷新
    await System.Windows.Application.Current.Dispatcher.InvokeAsync(() => {}, System.Windows.Threading.DispatcherPriority.Background);
    
    try
    {
        // 执行耗时UI绘制操作
        ShowAllTracksThread();
    }
    finally
    {
        // 隐藏进度条
        SpinnerVisibility = Visibility.Collapsed; 
    }
}

方案二：拆分逻辑，后台处理计算，UI线程仅负责绘制
如果ShowAllTracksThread包含可在后台执行的计算逻辑（比如图像数据生成），将这部分移到后台线程，仅把UI绘制部分放回UI线程：

public async void OnShowAllTrackClick()
{
    SpinnerVisibility = Visibility.Visible; 

    try
    {
        // 后台执行耗时数据计算（不操作UI）
        var drawData = await Task.Run(() => GenerateDrawData());
        // 回到UI线程执行绘制
        ShowAllTracksOnUI(drawData);
    }
    finally
    {
        SpinnerVisibility = Visibility.Collapsed; 
    }
}

// 后台计算方法（不可操作UI元素）
private YourDataType GenerateDrawData()
{
    // 此处处理耗时的数据准备逻辑
    // ...
}

// UI线程绘制方法
private void ShowAllTracksOnUI(YourDataType data)
{
    // 在Canvas上完成图像绘制操作
    // ...
}

关键注意点 #

• WPF UI元素只能在创建它的UI线程操作，任何直接修改Canvas的代码必须放在UI线程执行。
• 使用async/await可以更简洁地处理线程切换，避免回调嵌套。
• 用try/finally确保无论操作成功或失败，进度条都会被隐藏。

内容的提问来源于stack exchange，提问作者jyoti mallalli