Operating with image files in a Windows Phone 7 application

Images Add to the Experience

Adding images to something that you are working on in the Windows 7 phone can be a great way to appeal to people in a more full way. This is to say that many users of your programs and services will expect to see images contained within. 

Humans are a visual species, and it is always nice when the tools that we use provide us with the images that we have come to expect from the services that we use. 

Any app developer for Windows 7 phones (or any other type of phone for that matter) understands that they need to use the tools at their disposal to put some images together in their apps. 

Not only are images nice to look at, but they can help convey certain messages that need to get across to people who are using the app as well. This is a big deal for many because they will understand that the images bring in more and more users. 

Images are one thing that is quite interesting to work within a Windows Phone 7 application. In fact, for some specific applications manipulating image files can be a necessity (for example, when the application saves and loads edited photos).

As you probably already know, the files that are created by a Windows Phone 7 application are stored inside the isolated storage – a storage unit designated for the current application that no other application can access.

Unlike regular text files that can be read as plain string units, images are handled in a different way. Even if you used Silverlight before, opening image files in a Windows Phone 7 application will require you to use a different approach, since you won’t be directly in control of the storage space.

Basically, saving an image locally (for example, from a web site) is quite easy. If you’ve read my previous article on file handling , then I can say that the same principles are applied here.

To show an example, I am going to use a WebClient to download an image and store it locally.

WebClient client = new WebClient();
client.OpenReadCompleted += new OpenReadCompletedEventHandler(client_OpenReadCompleted);

I am referencing the OpenReadCompleted event handler that will be triggered when the data from the specified resource will be completely cached. Therefore, all I will have to do is store it for permanent access. Here is how the actual event handler looks like:

void client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    var resInfo = new StreamResourceInfo(e.Result, null);
    var reader = new StreamReader(resInfo.Stream);

    byte[] contents;
    using (BinaryReader bReader = new BinaryReader(reader.BaseStream))
    {
        contents = bReader.ReadBytes((int)reader.BaseStream.Length);
    }

    IsolatedStorageFileStream stream = file.CreateFile("file.jpg");
    stream.Write(contents, 0, contents.Length);
    stream.Close();
}

This way, I am converting the downloaded stream to a byte array and I am storing it in the root folder as a JPEG image. The actual image download is triggered via OpenReadAsync:

client.OpenReadAsync(new Uri("http://www.google.com/images/srpr/nav_logo14.png"));

Here I am passing a sample image URL (feel free to change it to whatever image you want). So it is downloaded and stored. Now it’s time to read the contents.

To test this, I inserted an Image control on the page that will display the stored image. To retrieve the image, an instance of IsolatedStorageFileStream is used:

IsolatedStorageFileStream stream = new IsolatedStorageFileStream("filet.jpg", FileMode.Open, file);

var image = new BitmapImage();
image.SetSource(stream);

image1.Source = image;

Although the first thing that comes to mind would be using a relative URI for the image source, it will not work on a Windows Phone 7 application because the user has no direct control over the storage unit.

Making Sure Your Images Work Properly

Here is another thing that you don't always necessarily learn until you have some coding experience under your belt. It is that not all images are properly formatted when you are first starting out. 

You need to make sure you get the formatting down pat just right so your images will appear on screen as you desire for them to do. In other words, don't take a chance with getting a blurry image or an image that won't load on any project that you are working on. Sadly, this kind of thing happens to people sometimes, and the results can be less than desirable. 

To avoid the problem of potentially getting your images out of line, make sure you carefully look at how you format your images and ensure that the code is all set up properly. You don't want to put something out there with images that are off-kilter.

If you do so, you may get backlash from your users right away. They will make it clear that you should not have done something like that, and they will ultimately revolt against what you have created for them. Don't take a chance like that when you don't have to. 

Only Use Images That You are Permitted to Use

Most images on the Internet have some kind of copyright or attribution to them. You can't simply take them and use them for your own creations. If you do so, you are stealing someone else's work, and it is a very big deal. Instead, make sure you only look to resources that you are legally allowed to use in order to get the images that you require. 

There is nothing wrong with turning towards resources that are free and available for anyone to use. People use royalty-free images in their work all the time. In fact, it is a great way to ensure that your work remains safe and legally permitted.

The other option that you have is to pay for the copyright usage of the image that you want to work with. There are many photographers who will agree to license their image for you to use if you pay a certain fee to them for doing so. In most cases, the fee is just a few dollars to use their image. It may be significantly more for particularly popular images, so this is something that you must think about as well. Regardless, you may still decide that this is worthwhile to you if you come to find that the images that they have taken are images that you simply cannot live without. 

Update Your Images Regularly

Images can become less relevant over time. One way to avoid having images that are of no use to you is to make sure you are constantly updating your images so they don't go stale on you. 

When you are an Internet user and you see a website that has clearly not updated its images in a long time, then you ultimately may determine that this is not the kind of website that you want to spend much time with at all. 

It is understandable that you may come to this conclusion, and that is why developers need to update their images regularly to keep everything fresh and interesting for their users. 

If you do this, you will avoid the risk of losing traffic because people are less than impressed by the images that you use for the work that you do. Make this a top priority for your creations today.