Save as Image in Picture Library in Windows 8 XAML Metro App


In this article we would see how we would save an image into Local System’s Picture Library.


You should be having:

  1. Windows 8 (Consumer Preview)
  2. Visual Studio 2012 RC

Get Started

Fire up Visual Studio 2012 RC and create a Windows Metro Style application in C#. From the templates you could choose any, but for this sample I am using a Grid App (XAML).

Get rid of the Sample Data that is added by default and other xaml files except the starting page (GroupedItemsPage).

Now we would add another page for displaying the Selected Image from the GroupedItemsPage.

So add a Basic Page to the application as SelectedPicturePage.

The Data displayed in the GroupedItemsPage, is a collection of TopsyData (Sample Data). The GridView that displays it has the following properties.

The Data Template used is as follows:

Now to load the sample data, the HTTP Client is used, which would make a GET request, and receive the data in it’s ReadAsStringAsync method.

Further we are assigning the DefaultViewModel.

So let’s see the Data Now!

Yeah, it’s working.

Now, the page we had added for displaying the selected image; we need to bind the data.

As you see above, the DataContext is set as the TopsyListItem, which is a property that is being passed from the parent page.

And we are binding the url property of the TopsyListItem.

The following code shows, how we are passing data to the SelectedPicturePage.

On LoadState of the SelectedPicturePage, we would do the basic stuff, like assigning the DefaultViewModel value.

Also we have added an AppBar to this page, and a button which says Save.

So, basically on the Save button click we would save the image to the Pictures Library.

The method in the Save case is where we are doing the actual file creation from the image url.

First of all we would make the method as async.

Then first thing we would do is hit the url again.

On the response, we would check whether the File already exists.

If File does not exist then it would return file as null value.

As you in the above code snippet, we are creating a file in the Pictures Library. Also we are displaying messages on success and on file existence.

Now, let’s run the app and try saving an image.

Ohh, you would get the following error saying, “Access to the specified location (PicturesLibrary) requires a capability to be declared in the manifest.”

We would do as the error says.

Open the Package.appmanifest in the GUI mode (default mode, just double click on it).

Go to the Capabilities Tab, you would see that Internet (Client) option is already ticked. This is done automatically when you write code for HTTPClient.

Now tick the “Pictures Library Access”.

We would run the application again.

The above image is when you select the image from the parent page.

And we are able to see the success message.

Let’s check whether it really got saved!

Ohh, great. This is saved.

The thing is you have to press OK, to complete the async method, then only you would able to preview the file.


We have successfully achieved saving Image file in Pictures Library. Similar way you could write files to other Libraries.

Thanks for reading, hopefully you liked it.

Source Code: Click here

Article as PDF: Click here

Related Posts:

1) FileSavePicker in Windows 8 XAML App

2) FileOpenPicker in Windows 8 XAML App

3) Data Template Selector in Windows 8 Metro XAML App

4) Remove Windows 8 from your Dual-Boot Setup