[WPF] Asynchronously Loading Image From Internet using C# 5.0 (.NET Framework 4.5)

Requirement

I want to create a WPF window which displays many images from internet. I put many <Image> element on the window and set the Source of every <Image>. When I run the application, the UI is locked till all images loaded completely. This, UI locked, is not what I want. Is there any way to load image asynchronously?

Old Implement by ThreadPool

Then, an idea come to my head: make a user control and load image in another thread. My first implement use ThreadPool, Dispather to achieve this goal. But that is not the point of this article.

C# 5.0 and .NET Framework 4.5 do more for you

Recently I read that C# 5.0 introduced new keyword async and await. It make asynchronous programming simple. So I want to take a try. And I just want to share with you what I found.

The markup of <AsyncImage>

I create a user control named AsyncImage and put an Image element named “img” inside. The xaml is very simple.

<UserControl ...>   <Grid>     <Image name="img" />   </Grid> </UserControl>

As it is a control that can be put on the UI. I want to set the image source string when using it. Therefor I add a dependency property into the code.

public string ImageSource {     get { return (string)GetValue(ImageSourceProperty); }     set { SetValue(ImageSourceProperty, value); } } public static readonly DependencyProperty ImageSourceProperty =     DependencyProperty.Register("ImageSource", typeof(string), typeof(AsyncImage), new UIPropertyMetadata("", OnImageSourceChanged));

When ImageSouce is set, it will call OnImageSourceChanged. It looks like this.

private static void OnImageSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {     AsyncImage v = d as AsyncImage;     if (v == null)         return;     v.ShowImageAsync(e.NewValue.ToString()); }

The key word async And await

Let’s see the rest codes.

protected async void ShowImageAsync(string source) {     img.Source = await LoadImageSourceAsync(source); } private async Task<ImageSource> LoadImageSourceAsync(string address) {     ImageSource imgSource = null;     try {         MemoryStream ms = new MemoryStream(await new WebClient().DownloadDataTaskAsync(new Uri(address)));         ImageSourceConverter imageSourceConverter = new ImageSourceConverter();         imgSource = (ImageSource)imageSourceConverter.ConvertFrom(ms);     } catch (Exception ex) {         Debug.WriteLine(ex.Message);         Debug.WriteLine(ex.StackTrace);     }     return imgSource; }

ShowImageAsync is a void method modified by async keyword. Because there is a await call in the method block. 

LoadImageSource is another asynchronous method. It downloads the image by await call to WebClent.DownloadDataTaskAsync. WebClient class in .Net Framework 4.5 adds several asynchronous method which adding the word, “Async”, behind the original method name. The new method of the WebClient is the key point. It can do works in the background and return value when works completed. When I set img.Source by await call to LoadImageSourceAsync, it will do its works in the background, too.

I put AsyncImage in a test window. When downloading image, the window can still drag, move, change size. Only one thing. UI will still be locked in a very short time when Image.ImageSource is setting.

Responsive UI is easy

With async and await, asynchronous method call is like normal method. It reduced the cross thread call exceptions. A high performance and responsive UI is more and more easy.