使WPF映像加载异步

我想加载Gravatar图像，并将它们从代码隐藏设置为WPF图像控件。 所以代码看起来像

imgGravatar.Source = GetGravatarImage(email);

其中GetGravatarImage看起来像：

BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri( GravatarImage.GetURL( "http://www.gravatar.com/avatar.php?gravatar_id=" + email) , UriKind.Absolute );
bi.EndInit();
return bi;

不幸的是，这会在网络连接缓慢时锁定GUI。有没有一种方法可以分配图像源，让它在后台加载图像而不阻塞UI

---

谢谢

我建议您使用XAML的imgGravatar绑定。在其上设置IsAsync=true，WPF将自动利用线程池中的线程来提取图像。您可以将解析逻辑封装到IValueConverter中，并简单地将电子邮件绑定为源

在XAML中：

<Window.Resouces>
    <local:ImgConverter x:Key="imgConverter" />
</Window.Resource>

...


<Image x:Name="imgGravatar" 
       Source="{Binding Path=Email, 
                        Converter={StaticResource imgConverter}, 
                        IsAsync=true}" />

---

我不明白为什么你的代码会阻止用户界面，因为BitmapImage支持在后台下载图像数据。这就是为什么它有一个属性和一个事件

无论如何，下面的代码展示了一种在单独的线程（从

线程池

）中完全下载和创建映像的简单方法。它使用实例下载整个图像缓冲区，然后再从该缓冲区创建BitmapImage。创建BitmapImage后，它将调用以使其可从UI线程访问。最后，它通过调用

Dispatcher.BeginInvoke

在UI线程中分配图像控件的

Source

属性

ThreadPool.QueueUserWorkItem(
    o =>
    {
        var url = GravatarImage.GetURL(
           "http://www.gravatar.com/avatar.php?gravatar_id=" + email);
        var webClient = new WebClient();
        var buffer = webClient.DownloadData(url);
        var bitmapImage = new BitmapImage();

        using (var stream = new MemoryStream(buffer))
        {
            bitmapImage.BeginInit();
            bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
            bitmapImage.StreamSource = stream;
            bitmapImage.EndInit();
            bitmapImage.Freeze();
        }

        Dispatcher.BeginInvoke((Action)(() => image.Source = bitmapImage));
    });

---

编辑：今天您只需使用异步方法：

var url = GravatarImage.GetURL(
    "http://www.gravatar.com/avatar.php?gravatar_id=" + email);
var httpClient = new HttpClient();
var responseStream = await httpClient.GetStreamAsync(url);
var bitmapImage = new BitmapImage();

using (var memoryStream = new MemoryStream())
{
    await responseStream.CopyToAsync(memoryStream);

    bitmapImage.BeginInit();
    bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
    bitmapImage.StreamSource = memoryStream;
    bitmapImage.EndInit();
    bitmapImage.Freeze();
}

image.Source = bitmapImage;

---

BitmapImage还有一个，这将为您节省BeginInit/EndInit调用。+1不知道，很好的提示。我只是从作者那里复制了代码，并没有考虑如何优化实际下载，相反，我专注于以一种优雅的方式解决UI块问题（当然，如果代码不是异步的，它会阻塞）。我认为，对于重复使用，转换器还可以从绑定中获得完整的url，以便于重用，而不是电子邮件。我不喜欢使用

ThreadPool

，因为您必须始终管理调度。这使得它对于纯MVVM应用程序来说不够优雅。您能解释一下为什么创建BitmapImage在非异步调用时会被阻止吗。那么为什么它有

IsDownloading

属性和

DownloadCompleted

事件呢。如果您只需将XAML中图像控件的

Source

属性设置为引用web上大图像的URL，UI将不会阻塞。相反，WPF会在后台下载图像，并在下载完成后立即显示。我很确定这是由BitmapImage执行的，因为（来自MSDN）“BitmapImage主要用于支持可扩展应用程序标记语言（XAML）语法，并为位图加载引入了BitmapSource未定义的其他属性”。我用一个巨大的图像（14MB）测试了一下，您完全正确。下载由

BitmapImage

在后台线程上自动执行。UI仅在将图像数据加载到UI时挂起。很抱歉给你带来了困惑。将

位图图像

指定为

源

后，下载开始，而不是使用

BeginInit（）

。因此，基本上作者的原始代码应该可以工作。因此，也许这与他在UI上使用的图像数量有关。

var url = GravatarImage.GetURL(
    "http://www.gravatar.com/avatar.php?gravatar_id=" + email);
var httpClient = new HttpClient();
var responseStream = await httpClient.GetStreamAsync(url);
var bitmapImage = new BitmapImage();

using (var memoryStream = new MemoryStream())
{
    await responseStream.CopyToAsync(memoryStream);

    bitmapImage.BeginInit();
    bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
    bitmapImage.StreamSource = memoryStream;
    bitmapImage.EndInit();
    bitmapImage.Freeze();
}

image.Source = bitmapImage;