In the past couple of months I’ve worked a lot with Windows 8 JavaScript and C#, I’ve also wrote plenty of posts on that subject and there is much more stuff to talk about.

In this post I’ll show two things:

1. Using File Picker using JavaScript
2. Change Windows 8 Lock Screen Image Programmatically

Download Demo Project

Step 1: Create Blank JavaScript Project

In the app.onactivated function we add the following code to listen the Choose Picture button and calling the displayCurrentImg function.
When you click the Choose Picture button we call the openFilePicker function.

Step 2: Find The Current Lock Screen Image

You might notice that in the previous step I used $ char to find the button element, no I’m not using JQuery, I’ve just create a function that return the querySelector return value based on the value we pass. I said it before and I’ll say it again there is not need to add JQuery to Windows 8 Application everything you need is there!

Now for getting the current Lock Screen Image we’ll use the WinRT UserProfile.
Windows.System.UserProfile.LockScreen has couple of interesting function you can use:

• getImgeStream – will return the current Lock Screen Image as Stream.
• originalImageFile – the current Image file object.
• setImageFileAsync – Set a new Image from File
• setImageStreamAsync – Set a new Image from Stream

For now we just want to display the file path of the Lock Screen image.

Step 3: Using File Picker

File Picker is also a part of WinRT, the file picker allow us to brose through the user files.
First we need to create a new instance of FileOpenPicker from Windows.Storage.Pickers.

After we have the picker object we can define the view mode – how we’ll see the files on the picker screen:

• List
• Thumbnail

picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

Now we can define the suggestedStartLocation object that will open our picker at a specific location.

picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

Enum Windows.Storage.Pickers.PickerLocationId:

• computerFolder
• desktop
• documentsLibrary
• downloads
• homeGroup
• musicLibrary
• picturesLibrary
• videosLibrary

We define the file filter to allow Images selection only by replacing all existing filters and adding new once.

picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);

Finally we call the pickSingleFileAsync to open the File Picker screen, you can also use pickMultipleFilesAsync for multiple file selection.

Full Code:

Step 4: Set New Lock Screen Image

After we use the file picker to pick a new image the Lock Screen we just need to call setImageFileAsync function passing the file object from the picker and we’re Done!

Download Demo Project

Enjoy.