Loading images from byte arrays in Windows 8 Store apps (WinRT)

Win8Blue_WebI’ve been porting a library and test applications from .NET Framework 3.5 to a Windows 8 Modern UI Store App (WinRT). Windows 8 Store Apps have a cut down implementation of the .NET Framework so that they are none blocking and always responsive. This means that many of the synchronous APIs we are used to have been removed and we’re forced to use their asynchronous counter parts. It has also meant that we’ve needed to port our library to instead be a Portable Class Library so that we can reuse it in different versions of Windows.

The library I’m working on returns byte arrays contains JPEG image data. In the .NET Framework 3.5 it simply took the byte array fed it into a MemoryStream and then into the BitmapDecoder object. Unfortunately this implementation isn’t possible in Windows 8 Store Apps as the BitmapDecoder is blocking and we don’t have blocking APIs in Windows Store apps.

Our old implementation:

public void SetImage(byte[] data, 
    Windows.UI.Xaml.Controls.Image image)
{
    MemoryStream stream = new MemoryStream(data);
    var decoder = BitmapDecoder.Create(stream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
    image.Source = decoder.Frames[0];
}

The new implementation is based around using a InMemoryRandomAccessStream object which we first write the data too, reset the internal pointer to the beginning of the data, and create a BitmapImage object which we then feed into our XAML image object.

Our new implementation:

public async void SetImageFromByteArray(byte[] data, 
    Windows.UI.Xaml.Controls.Image image)
{
    using (InMemoryRandomAccessStream raStream = 
        new InMemoryRandomAccessStream())
    {
        using (DataWriter writer = new DataWriter(raStream))
        {
            // Write the bytes to the stream
            writer.WriteBytes(data);

            // Store the bytes to the MemoryStream
            await writer.StoreAsync();

            // Not necessary, but do it anyway
            await writer.FlushAsync();

            // Detach from the Memory stream so we don't close it
            writer.DetachStream();
        }

        raStream.Seek(0);

        BitmapImage bitMapImage = new BitmapImage();
        bitMapImage.SetSource(raStream);

        image.Source = bitMapImage;
    }
}

Speeding up by slowing down and animations

At the moment I’m learning User Experience design and how it can be used to dramatically improve the experience of the product, improve the workflow of an application or website, get people to ‘want’ to use your product and to ultimately save and make money. Today I put my own relationship with the tools and applications I use under the microscope and took a look at animations.

Anyone who has ever seen me work will find that I when I’m really working I work very quickly. I’ve configured Windows and my Android phone so that I can find things and get to things fast, my computer has been optimised to be fast, all of the Window animations has been turned off so that windows appear quickly, I work in a fashion where things whiz around my screen quickly and where there is a constant buzz of information. This is great, but can easily lead you down to path of becoming mentally exhausted and on edge.

The solution slowing things down. I recently tried turning Window animations back on, and turning back on many of the visual elements of Windows which to begin with used to annoy me. The result? More time to think, more time to more carefully consider what I’m doing and ultimately produce better results. Sometime animations are put in there because, well it looks cool (to the designer / hacker coder at least). But other times the can be used to not only provide visual feedback to what’s happening but also to relax you and to help to give you time to more carefully consider what you are doing, and what the results of your actions may be.

I’m not saying here that every application should include animations, or to animate for animations sake. Instead to use animations to illustrate the information being presented on screen, to provide visual feedback and visual cues to their actions and also to help relax the user to use the application, whilst at the same time not being an obstruction to the user or the task they’re trying to do.