WPF多图片加载时序问题：实现单图返回即动态显示

当前问题并非图片加载失败，而是加载时序问题：所有图片要等整个处理流程跑完才会一起显示，不是修改Image控件源之后立刻显示。

流程逻辑：调用外部图形接口，接口返回对应图片后，将图片放到Grid里作为图标展示。现在希望第一张图片返回后就能马上显示，不用等所有图片都处理完再统一展示。目前是项目原型，后续会用列表优化，但动态实时更新的需求优先级更高。

XAML 代码片段 #

<!-- 每个图片对应一个这样的Grid -->
<Grid>
   <Image Width="600" Height="363" Name="GraFrota_img"
          MouseLeftButtonDown="GraFrota_click" Visibility="Hidden" Stretch="Fill"/>
      <TextBlock Name="txtGraFrota" FontSize="18" FontWeight="Bold" FontStyle="Italic" 
                 VerticalAlignment="Center" HorizontalAlignment="Center"
                 Visibility="Visible">
         Carregando Imagem do Gráfico <!-- 加载图表图片 -->
      </TextBlock>
</Grid>

后台C#代码片段 #

public BrowseAcidentes()
{
   InitializeComponent();
   ContentRendered += (sender, e) =>
   {
      CarregaGrafico();
   };
}

private void CarregaGrafico()
{
   capturaTela("FR", grafrota.abre(2, true));
   // 这里还调用了多个类似的图表接口
   ....
}

private void capturaTela(string pGrafico,Bitmap pBmp = null)
{
 if (pBmp != null)
 {
     MemoryStream memory = new MemoryStream();
     pBmp.Save(memory, ImageFormat.Png);

     BitmapImage bitmap = new BitmapImage();
     bitmap.BeginInit();
     bitmap.StreamSource = memory;
     bitmap.EndInit();

     switch (pGrafico)
     {
       case "FR":                       
         GraFrota_img.Source = bitmap;
         GraFrota_img.Visibility = Visibility.Visible;
         txtGraFrota.Visibility = Visibility.Hidden;
         break;

      // 其他图表的处理逻辑
     }
}

解决方案：异步处理每个图片加载逻辑 #

问题根源是CarregaGrafico在UI线程同步执行，所有图表接口调用和图片处理都卡住了UI线程，导致界面无法实时更新。要实现单图加载完成即显示，需把每个图表的加载逻辑放到异步线程，处理完成后切回UI线程更新控件。

方式1：直接改造加载方法为异步 #

private async void CarregaGrafico()
{
    // 异步处理第一个图表
    await Task.Run(() => {
        var bmp = grafrota.abre(2, true);
        // 切回UI线程更新控件
        Application.Current.Dispatcher.Invoke(() => {
            capturaTela("FR", bmp);
        });
    });

    // 异步处理第二个图表，以此类推
    await Task.Run(() => {
        var bmp = 其他图表接口调用();
        Application.Current.Dispatcher.Invoke(() => {
            capturaTela("其他标识", bmp);
        });
    });
}

方式2：封装异步处理方法（更规范） #

private async Task ProcessaGraficoAsync(string graficoId, Func<Bitmap> carregaGrafico)
{
    // 后台线程加载图表
    var bmp = await Task.Run(carregaGrafico);
    // 切回UI线程更新控件
    await Application.Current.Dispatcher.InvokeAsync(() => {
        capturaTela(graficoId, bmp);
    });
}

// 调用示例
private async void CarregaGrafico()
{
    await ProcessaGraficoAsync("FR", () => grafrota.abre(2, true));
    await ProcessaGraficoAsync("其他标识", () => 其他图表接口.abre(...));
    // 更多图表...
}

额外优化：避免内存泄漏 #

在capturaTela方法中给BitmapImage设置缓存选项，确保流可以安全释放：

BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = memory;
bitmap.CacheOption = BitmapCacheOption.OnLoad; // 加载完成后释放流
bitmap.EndInit();
memory.Close(); // 安全关闭流

这样每个图表加载完成后会立刻更新UI，无需等待全部处理结束。

内容的提问来源于stack exchange，提问作者Vinicius Souza