How to Save a Transparent or a .png image file in Isolated Storage of Windows phone app

This is a small blog post in which I shall explain you how to save a transparent or a .png image file in isolated storage of Windows phone app.

By default you can save a WriteableBitmap object as .jpeg image file in the isolated storage of your application using SaveJpeg method.

But you can easily add an extension to it and provide a .png method of saving the images.

 

You will have to follow certain steps given below to add this extension to your project

 

Step1:
Add two external references (packages) to your project. They are

1) SharpZipLib-WP7

2) WriteableBitmapEx

 


 

If you don’t know how to add a reference to your project you can refer to the following blog post.

http://www.windowsapptutorials.com/windows-phone/how-to-integrate-a-toolkit-or-third-party-sdk-with-windows-phone-app-using-nuget-package-manager-2/

 

Step2:
Add the following class to your project.

PngChunkTypes.cs

 


 

After you have completed the above two steps. You will be provided with some additional methods for the WriteableBitmap object which are Writepng and Setsource. Using these two methods you can save a .png format file in the isolated storage of your Windows phone app.

A small example has been given below

 

 

I hope this post will be helpful to you.

 

 


How to take Screenshot dynamically in Windows phone app using c#

Often times, you want to take a screenshot of an application’s page. There can be multiple reasons for this. For instance, you can use this to provide an easy feedback method to beta testers. So in this article I shall be providing you with a simple way of doing it.

In the following example given below I shall be taking the screenshot of the whole page except the application bar buttons as shown in the image below.

 


 

WriteableBitmap

We will be using WriteableBitmap to capture the screen. Its Render method takes two parameters, UIElement and Transform. We specify the LayoutRoot (the root element for the UI defined in XAML) as the UIElement which renders the whole UI into the bitmap. The second parameter is the MatrixTransform which is applied to elements before they are drawn into the bitmap – we specify an empty transform in this case so that elements are drawn as they would be to the device screen.

 

You can easily capture the screenshot by following the steps given below

1. Select the UI Element(example Grid,StackPannel) whose image you want to capture. In the above example it is LayoutRoot.

2. Then take a WriteableBitmap of the same size (height and width) as that of UI Element.

3. Render the UI element of WriteableBitmap.

4. Then save the following image to your Medialibrary.

 

The code for the following is given below

 

Namespace required are

 

 

Code for the click event handler of save button is

 

 

You can download the full project source from the link given below.

 
Download full project file Screenshot.zip