1

Picture library image control for Windows 8 store apps

So on a recent Windows 8 store app project, we wanted to let the user pick images from his hard drive to use them inside the app.

But with Windows 8 store apps we are a bit restricted on rights to get a hold on files anywhere on the pc’s hard drive. Sure when you select the file you can read it, but when the app restarts that location could be no longer available to the app itself due to rights restrictions.

So, how could we solve this? We could store the images binary inside some sort of database… but for our app that would be a bit too much. Other solution is just using the default Picture library that is available on the pc itself!
It’s easy to give the app rights to this folder… it’s right there in the Capabilities section all you have to do is switch it on!

image

With that in place we only needed to create an image control that would allow us to use a normal string, representing the path to the location of the image, as source. But the control should also let the user select images and copy those over to the picture library so we can reuse them later!

So let me introduce to you the PictureLibraryImage control!
It’s a user control that contains an Image and has some extra Dependency Properties.

The xaml looks like this – note there are 2 fading animations, they are used to let the Placeholder image fade out and the Source image fade in, after it has been loaded!

The properties we are introducing are:

  • Placeholder : we use this to show a dummy image when there has no source been set yet
  • Source : the path to an image inside the picture library
  • FolderName : the name for the folder we use to put the user selected images

When you place the control in your app and run the app, you can tap on it to get a hold of a FilePicker, this will let the user choose an image! When an image is chosen we copy it over to the given FolderName location inside the Picture library… the code looks like this:

Now comes the last part of our control! We have to be able to use a string pointing to a file inside the picture library as source…

This is actually very easy with the Source dependency property in place and the Picture Library capability. We only have to read out the file and set it as BitmapImage to the image ssource inside the control! The code for this is

Only thing left to do is use it in your project… the source can be binded to some MVVM property of course.


Let me get one thing straight, this is not by any chance the most elegant solution… but for our needs it served the purpose very well.

Just go through the code, maybe there are other things you could reuse instead of the actual control itself 🙂

Everything is up on my Github here… so download, use and any suggestions or improvements are welcome!

Uncategorized

Depechie

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *