Question

我想加载Gravatar-Images并将它们从代码后面设置为WPF Image-Control。所以代码看起来像

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？

谢谢！

Answer 1

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

在XAML中

：

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

...


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

代码中的

：

public class ImgConverter : IValueConverter
{
    public override object Convert(object value, ...)
    {
        if (value != null)
        {
             BitmapImage bi = new BitmapImage();
             bi.BeginInit();
             bi.UriSource = new Uri( 
                 GravatarImage.GetURL(
                     "http://www.gravatar.com/avatar.php?gravatar_id=" + 
                      value.ToString()) , UriKind.Absolute 
                 );
             bi.EndInit();
             return bi;                
        }
        else
        {
            return null;
        }

    }
}

Answer 2

我无法理解为什么你的代码会阻止UI，因为BitmapImage支持在后台下载图像数据。这就是为什么它有IsDownloading属性和DownloadCompleted事件。

无论如何，以下代码显示了一种直接下载和完全在单独的线程（来自ThreadPool）创建图像的方法。在从该缓冲区创建BitmapImage之前，它使用WebClient实例下载整个图像缓冲区。创建BitmapImage后，它调用Freeze以使其可以从UI线程访问。最后，它通过Source调用在UI线程中分配Image控件的Dispatcher.BeginInvoke属性。

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;

使WPF图像加载异步

2 个答案: