Load an image from a Base64 string on WinRT

I've been working on a small WinRT (Windows Phone and Windows 8+) app over the past couple of days. It's been going well, but the JSON API I'm dealing with sends an image over the wire as a base64 string rather than just sending a URL for the image; I then need to convert that string to an image and display it to the users as an authentication method.

Regardless of the actual effectiveness of images as account security measures, this was something that I couldn't skip. Having never dealt with base64 strings in a XAML context, I assumed that it would be similar to HTML in that I could just set the string as the image source and be on my way.

I was wrong, that's not how it works in XAML. Instead you'll need to:

1. Convert your base64 string into a stream.
2. Convert that stream into a WinRT IRandomAccessStream.
3. Create a new BitMapImage object.
4. Set the stream as the bitmap's source
5. Set the bitmap as your XAML image's source.

Unfortunately it took me some time to piece it together, as all of the documentation out there is for older XAML programs and doesn't cover the new way that WinRT does it. I'm posting the code here for posterity.

(Remember, the following code is for Windows Phone, Windows 8 and Windows Universal apps, commonly referred to as WinRT.)

In YourPage.xaml file:

Here's what that XAML looks like:

In YourPage.xaml.cs file:

After running this page and tapping on the 'Get New Images' button, we get our new image loaded into the XAML from a Base64 string:

I'm writing a book called The Shopify Development Handbook, and it's all about building rock-solid Shopify apps with C# and ASP.NET. If you haven't done so already, join the mailing list below by typing in your email address. I'll send you a free developer's guide on using the Shopify billing API to get paid for your app.