WPF应用UI重绘时显示加载指示器的方案咨询

我完全懂你的痛点——500个不同高度的项没法用虚拟化，勾选复选框时一次性更新所有项的TextBlock状态直接让UI冻住，用户连个反馈都看不到。咱们可以通过异步分批次更新UI+加载指示器即时反馈的组合来解决，核心就是别让UI线程一次性扛下所有更新任务，拆成小批次处理，同时让加载提示先出来。

第一步：准备加载指示器UI #

先在页面里加一个覆盖在ItemsControl上方的加载遮罩，确保UI忙碌时能立刻显示出来：

<!-- 假设你的ItemsControl放在根Grid里 -->
<Grid>
    <!-- 原有的ItemsControl -->
    <ItemsControl x:Name="ItemList" ItemsSource="{Binding YourItemCollection}">
        <!-- 你的模板选择器和各类项模板 -->
    </ItemsControl>

    <!-- 加载指示器，默认隐藏 -->
    <Grid x:Name="LoadingOverlay" Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"
          Background="#80000000">
        <Ellipse Width="40" Height="40" Stroke="White" StrokeThickness="4">
            <Ellipse.RenderTransform>
                <RotateTransform x:Name="LoadingRotate" CenterX="20" CenterY="20" />
            </Ellipse.RenderTransform>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="LoadingRotate" Storyboard.TargetProperty="Angle"
                                             From="0" To="360" Duration="0:0:1" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Grid>
</Grid>

第二步：用异步分批次更新UI（MVVM场景） #

如果用MVVM，在ViewModel里加两个核心属性，再写异步更新逻辑：

private bool _isShowingExtraText;
public bool IsShowingExtraText
{
    get => _isShowingExtraText;
    set
    {
        if (_isShowingExtraText == value) return;
        _isShowingExtraText = value;
        OnPropertyChanged();
        // 触发异步更新，用_=避免警告
        _ = UpdateItemTextVisibilityAsync(value);
    }
}

private bool _isLoading;
public bool IsLoading
{
    get => _isLoading;
    set
    {
        _isLoading = value;
        OnPropertyChanged();
    }
}

// 处理用户快速切换复选框的情况，取消未完成的任务
private CancellationTokenSource _updateCts;

private async Task UpdateItemTextVisibilityAsync(bool showText)
{
    // 先取消之前的更新任务
    _updateCts?.Cancel();
    _updateCts = new CancellationTokenSource();
    var token = _updateCts.Token;

    try
    {
        // 立刻显示加载指示器
        IsLoading = true;

        // 把500个项拆成小批次，比如每次20个
        var batchSize = 20;
        var items = YourItemCollection.ToList();
        for (int i = 0; i < items.Count; i += batchSize)
        {
            if (token.IsCancellationRequested) break;

            var currentBatch = items.Skip(i).Take(batchSize).ToList();
            // 回到UI线程更新当前批次，用Background优先级让加载动画先渲染
            await Application.Current.Dispatcher.InvokeAsync(() =>
            {
                foreach (var item in currentBatch)
                {
                    // 假设每个项的ViewModel有IsExtraTextVisible属性，绑定到TextBlock的Visibility
                    item.IsExtraTextVisible = showText;
                }
            }, DispatcherPriority.Background);

            // 给UI线程留一点时间处理动画和布局
            await Task.Delay(10, token);
        }
    }
    catch (OperationCanceledException)
    {
        // 任务被取消，无需额外处理
    }
    finally
    {
        // 不管成功还是取消，都隐藏加载指示器
        IsLoading = false;
        _updateCts.Dispose();
        _updateCts = null;
    }
}

第三步：非MVVM场景的调整 #

如果没用MVVM，直接在复选框的事件里写逻辑：

private async void ShowExtraTextCheckBox_Checked(object sender, RoutedEventArgs e)
{
    await UpdateItemTextVisibilityAsync(true);
}

private async void ShowExtraTextCheckBox_Unchecked(object sender, RoutedEventArgs e)
{
    await UpdateItemTextVisibilityAsync(false);
}

private async Task UpdateItemTextVisibilityAsync(bool showText)
{
    LoadingOverlay.Visibility = Visibility.Visible;
    var cts = new CancellationTokenSource();
    var token = cts.Token;

    try
    {
        var items = ItemList.Items.Cast<YourItemType>().ToList();
        var batchSize = 20;
        for (int i = 0; i < items.Count; i += batchSize)
        {
            if (token.IsCancellationRequested) break;

            var currentBatch = items.Skip(i).Take(batchSize).ToList();
            await Dispatcher.InvokeAsync(() =>
            {
                foreach (var item in currentBatch)
                {
                    var container = ItemList.ItemContainerGenerator.ContainerFromItem(item) as FrameworkElement;
                    if (container != null)
                    {
                        var targetTextBlock = container.FindName("YourTargetTextBlock") as TextBlock;
                        if (targetTextBlock != null)
                        {
                            targetTextBlock.Visibility = showText ? Visibility.Visible : Visibility.Collapsed;
                        }
                    }
                }
            }, DispatcherPriority.Background);

            await Task.Delay(10, token);
        }
    }
    catch (OperationCanceledException)
    {
    }
    finally
    {
        LoadingOverlay.Visibility = Visibility.Collapsed;
    }
}

关键细节说明 #

1. 分批次更新：把500个项拆成小批量，避免UI线程被一次性占满，保证加载动画能正常渲染。
2. DispatcherPriority.Background：让WPF优先处理加载指示器的渲染，再更新项的状态，确保用户能立刻看到加载反馈。
3. CancellationTokenSource：处理用户快速切换复选框的场景，防止多个更新任务冲突。
4. Task.Delay：每次更新后短暂等待，给UI线程喘息空间，平衡更新速度和流畅度。

这样调整后，用户勾选/取消复选框时，加载指示器会立刻出现，UI不会完全冻结，而是在后台悄悄分批次更新项，完成后自动隐藏加载提示，体验会好很多。

内容的提问来源于stack exchange，提问作者Dhinnesh Jeevan