Display Image from Stream in Windows 8 and Windows Phone 8


The alternative title could also have been “Converting Stream to  IRandomAccessStream in windows store apps and windows phone 8.”

Frequently we might need to extract an image from a stream and display it in a XAML control,also called Image.

Typically the Stream can come from WebResponse or through any other source.

Stream stream= response1.GetResponseStream();

Where response1 is the WebResponse.Now it’s a daunting task to extract the image from the stream in Windows RT and Windows Phone 8 specially since we do not have access to system.imaging and related namespaces. So how do we go about it ?

Step 1:

Convert Stream to Memory Stream.The reason for this is that later,we need to convert Stream to IRandomAccessStream section.Memory Stream inherits from Stream.Memory Stream is a special class for accessing and storing the data in memory.

The MemoryStream class creates streams that have memory as a backing store instead of a disk or a network connection

MemoryStream ms = new MemoryStream();
 stream.CopyTo(ms);

Step 2:Convert MemoryStream to IRandomAccessStream.

This is the trickiest part as because there is no built in simple of way of doing this.IRandomAccessStream ia windows RT stream for random access of data.While coding,you might need to convert to and fro between .NET streams and Windows RT streams.For doing that,there are extension methods . These are AsInputStream and AsOutputStream .The problem with AsInputStream is that it converts a Stream to an IInputStream.  What we need is a Stream converted to an IRandomAccessStream

Lets see how this is done,

We implement an user defined function for doing so

 

 public static async Task<IRandomAccessStream> ConvertToRandomAccessStream(MemoryStream memoryStream)
        {
            var randomAccessStream = new InMemoryRandomAccessStream();
            var outputStream = randomAccessStream.GetOutputStreamAt(0);
            var dw = new DataWriter(outputStream);
            var task = Task.Factory.StartNew(() => dw.WriteBytes(memoryStream.ToArray()));
                await task;
                await dw.StoreAsync();
                await outputStream.FlushAsync();
            return randomAccessStream;
        }

What this basically does is creates a new InMemoryRandomAccessStream which implements IRandomAccessStream.Then we point to the location in the output stream at which to begin through the GetOutputStreamAt function..Then we create the Datawriter and manually asynchronously copy the data from the memory stream to the output stream and store it.

step 3:

we set the source of the bitmapImage

IRandomAccessStream a1 = await ConvertToRandomAccessStream(ms);
await bitmapImage.SetSourceAsync(a1);

Step 4: Finally

imageBox1.Source = bitmapImage;

We set the source property of the XAML image control and set it to the bitmap image.

Here’s the consolidated code.

Stream stream= response1.GetResponseStream();
BitmapImage bitmapImage= new BitmapImage();
MemoryStream ms = new MemoryStream();
 stream.CopyTo(ms);
 IRandomAccessStream a1 = await ConvertToRandomAccessStream(ms);
 await bitmapImage.SetSourceAsync(a1);
 imageBox1.Source = bitmapImage;
Advertisements

6 responses to “Display Image from Stream in Windows 8 and Windows Phone 8

  1. Hi Abhik Mitra,

    I haven’t found InMemoryRandomAccessStream in wp8 environment. Can you please tell me how can i achieve this without using of InMemoryRandomAccessStream.

  2. Why not just do this?

    using (var stream = new MemoryStream(data))
    {
    var bitmap = new BitmapImage();
    bitmap.CreateOptions = BitmapCreateOptions.None;
    bitmap.SetSource(stream);
    return bitmap;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s