WP 8.1 Linking image to http request

Question

I have a ListView element that contains data and images from an HTTP GET request. I can display all the data in a ListView, except for the image. To get the image, I have to make a separate HTTP GET request. I can display the image using this code:

private async void DisplayPicture() { var ims = new InMemoryRandomAccessStream(); var dataWriter = new DataWriter(ims); dataWriter.WriteBytes(App.answer.picture); await dataWriter.StoreAsync(); ims.Seek(0); BitmapImage bitmap = new BitmapImage(); bitmap.CreateOptions = BitmapCreateOptions.IgnoreImageCache; bitmap.SetSource(ims); } 

But this does not work if I would like to use a ListView with Binding. Here is the code I tried:

 public class BinaryToImageSourceConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { if (value != null && value is byte[]) { var bytes = value as byte[]; var ims = new InMemoryRandomAccessStream(); var dataWriter = new DataWriter(ims); dataWriter.WriteBytes(bytes); //await dataWriter.StoreAsync(); ims.Seek(0); BitmapImage bitmap = new BitmapImage(); bitmap.SetSource(ims); //var ims = new MemoryStream(bytes); //var image = new BitmapImage(); //image.SetSource(stream); //stream.Close(); return bitmap; } return null; } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } } 

The main problem is that I get the image in byte [] (bytearray) from the server, and only the above code can display it on WP8.1. So I have to use the dataWriter.StoreAsync() method, but if I use it, I have to use async , which should be invalid. But the return value of void is not suitable for me because of the binding.

You can see the source code that I have uncommented, but I cannot use it, because the input value for image.SetSource() must be RandomAccessStream. Therefore, I do not know how I can solve this problem.

Answer 1

If you want to set the binding and use the asynchronous method, then one way to make it work is to set the DataContext in the Task and bind it to the result. Stephen Cleary wrote a good article about this . You will also find useful information in his answer here .

Based on this answer, I created a sample that I think you can modify to suit your needs. Write a converter that returns a TaskCompletionNotifier (see Stephen's answer above):

 public class WebPathToImage : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { if (value == null) return null; // the below class you will find in Stephen answer mentioned above return new TaskCompletionNotifier<BitmapImage>(GetImage((String)value)); } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } private async Task<BitmapImage> GetImage(string path) { HttpClient webCLient = new HttpClient(); var responseStream = await webCLient.GetStreamAsync(path); var memoryStream = new MemoryStream(); await responseStream.CopyToAsync(memoryStream); memoryStream.Position = 0; var bitmap = new BitmapImage(); await bitmap.SetSourceAsync(memoryStream.AsRandomAccessStream()); return bitmap; } } 

then you can define the binding in XAML:

 <Image DataContext="{Binding ImageFromWeb, Converter={StaticResource WebPathToImage}}" Stretch="Uniform" Source="{Binding Result}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="2"/> 

Everything should work when you install ImageFromWeb :

 ImageFromWeb = @"http://www.onereason.org/wp-content/uploads/2012/02/universe-300x198.jpg";