Thursday, March 27, 2014

Loading Real Images to the Windows Phone Emulator

default_image_0

If you have ever used a Windows Phone, you have seen the 9 images loaded on every phone by default.  And if you are a developer, you have also seen them on the emulator, and noticed that they are the ONLY real images available without doing some tricks to get extra ones on there.

This is fine for testing, but I’ve seen too many screen shots in the store, and even promotional images and videos using them, even when the images are completely inappropriate for the app.  There is a great post by Matt Lacey about the 9 images that shouldn’t appear as part of your screen shots where he talks about this issue.

The following images were found in a few minutes by doing a quick search of the Photo section of the Windows Phone store.

wp_ss_20140326_0001 wp_ss_20140326_0002 wp_ss_20140326_0003 wp_ss_20140326_0004

Loading Real Photos

When I wrote my first Windows Phone app, Memorylage, just over a year ago, I wanted to make sure that my screen shots and promotional images really showed off my app, but wasn’t sure at first how to get any other images on there.  I could have taken screen shots directly from my phone, but that wouldn’t work for the 16:9 resolution that the 8X used.  Also, I made a promotional video doing a screen capture of the emulator, so I needed them on there for that as well.

I tried uploading some images to a web page on my site, and manually downloading them from the browser on the emulator, but that wasn’t very efficient, and I needed a lot of images to show off my app.  I needed a better way.

I ended up finding a command line program that is part of the Windows Phone SDK called IsolatedStorageExplorerTool.exe.  This lets you view the contents of an app’s isolated storage, either on a device, or on the emulator.  You can also download the contents to your computer, or even upload new content from your computer.

I had found a way to get files onto the emulator, but the program wasn’t exactly user friendly, and is limited in what it can do.  I ended up writing a simple phone app that took the images within its local storage, and saved them to the camera roll and saved pictures folder.  (These are the only two parts of a user’s photo library that an app can write to.)  I then used the .exe to load images to that app’s storage, and ran the app to get the images loaded directly into the emulator.

Doing Better

It all worked, and I was able to do all of my promotional material from the emulator without having to look at the default pictures.  I felt like the whole process could be improved though, but didn’t have time then, and left it.  Recently, however, I have been seeing the images still used in apps, even by seasoned devs, and felt it was time to take my solution, clean it up, and release it for others to use.

So, without further ado, here is the Visual Studio solution for my app.  (I am planning on hosting it on CodePlex, but was having trouble getting Git to successfully upload to it last night, so will update the post once it is there)

WPEmulatorImageLoader.zip

One Solution, Two Apps

The first project within the solution is a desktop app that allows you to select a folder containing images you want loaded to the phone’s camera roll, as well as a folder for images that will go in the saved pictures folder.  There is then a button to load those pictures to the emulator, which will use IsolatedStorageExplorerTool.exe internally.

The second project is a Windows Phone app that has two buttons for loading images from isolated storage to the camera roll and saved pictures folder on the phone/emulator. (Pardon the programmer UI)

ImageLoaderDesktopApp ImageLoaderPhoneApp

Using the applications is a 3-step process.

  1. Run the phone app within the emulator, but don’t press anything.  Just close the app immediately.  This must be done first, to load the app onto the emulator, so that the desktop program can then load data into it.
  2. Run the desktop app, and select a folder for the camera roll and saved pictures folder.  You can do one or the other, or both.  (By default, it will recursively load all sub-folders as well, but you can un-check that option)  After the folders are selected, just press the load button, and wait for the command windows that pops up to dissapear.
  3. Run the phone app again, but this time press the button for the camera roll and saved pictures folder.  These will now work, as the isolated storage should contain all of the images.

Wrap Up

And that is all you should need to get your own images, even hundreds or thousands of images, onto the emulator.  With this, there really isn’t any excuse for using the defaults anymore, so hopefully we’ll be seeing less of them in the store and on Twitter.

If anyone finds this useful, please let me know, as I would love to hear about it.