All about WP7 Isolated Storage - Read and Save Images

published on: 4/5/2011 | Views: N/A | Tags: IsoStore Images

by WindowsPhoneGeek

This is the 7th article from the "All about WP7 Isolated Storage " series of short articles focused on real practical examples with source code rather than a plain theory. I am going to talk about how to read and save Images into Isolated Storage.

• All about WP7 Isolated Storage - intro to Isolated Storage
• All about WP7 Isolated Storage - Folders and Files
• All about WP7 Isolated Storage - Store data in IsolatedStorageSettings
• All about WP7 Isolated Storage - Read and Save Text files
• All about WP7 Isolated Storage - Read and Save XML files using XmlSerializer
• All about WP7 Isolated Storage - Read and Save XML files using XmlWriter
• All about WP7 Isolated Storage - Read and Save Images
• All about WP7 Isolated Storage - Read and Save Captured Image
• All about WP7 Isolated Storage - Read and Save Binary files
• All about WP7 Isolated Storage - File manipulations
• All about WP7 Isolated Storage - Recommendations and Best Practices
• All about WP7 Isolated Storage - open source Databases and Helper libraries

To begin with lets first create a sample Windows Phone 7 application project and add an image called "logo.jpg" with build action "Content".

NOTE: For more info about build actions take a look at this post: WP7 working with Images: Content vs Resource build action

Next include the following namespaces in MainPage.xaml.cs (alternatively you can use the code in another page):

using System.IO.IsolatedStorage;
using System.Windows.Media.Imaging;
using System.IO;
using System.Windows.Resources;
using Microsoft.Xna.Framework.Media;
using Microsoft.Phone.Tasks;

NOTE: Microsoft.Xna.Framework.Media; is needed only if you want to Read/Save images to the MediaLibrary!

Reading and saving Images to the Isolated Storage is a common task for many WP7 applications.  In windows phone 7 you can also Read/Save images  to the MediaLibrary.

Basically we use IsolatedStorageFileStream class  to to read, write and create files in isolated storage. The main difference when talking about Images is the usage of BitmapImage and WriteableBitmap classes.

NOTE: When working with files always use Using statement because it provides a convenient syntax that ensures the correct use of IDisposable objects.

Save Image to Isolated Storage

In this example at first we will check if the file already exists and after that we will save the Image to the IsolatedStorage (encoding  WriteableBitmap object to a JPEG stream).

Basically at first we create virtual store and file stream, check for duplicate tempJPEG files and IsolatedStorageFileStream. After that we create a stream out of the sample JPEG file and WriteableBitmap.Next we encode WriteableBitmap object to a JPEG stream.

// Create a filename for JPEG file in isolated storage.
            String tempJPEG = "logo.jpg";

            // Create virtual store and file stream. Check for duplicate tempJPEG files.
            using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                if (myIsolatedStorage.FileExists(tempJPEG))
                {
                    myIsolatedStorage.DeleteFile(tempJPEG);
                }

                IsolatedStorageFileStream fileStream = myIsolatedStorage.CreateFile(tempJPEG);

                StreamResourceInfo sri = null;
                Uri uri = new Uri(tempJPEG, UriKind.Relative);
                sri = Application.GetResourceStream(uri);

                BitmapImage bitmap = new BitmapImage();
                bitmap.SetSource(sri.Stream);
                WriteableBitmap wb = new WriteableBitmap(bitmap);

                // Encode WriteableBitmap object to a JPEG stream.
                Extensions.SaveJpeg(wb, fileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);

                //wb.SaveJpeg(fileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);
                fileStream.Close();
            }

NOTE: Alternatively you could use  WriteableBitmap to save an Image: wb.SaveJpeg(fileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);

Read Image from Isolated Storage

In this example at first open an existing logo.jpg Image file from the Isolated Storage and read its content. After that the content is visualized in an Image control.

BitmapImage bi = new BitmapImage();

            using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream fileStream = myIsolatedStorage.OpenFile("logo.jpg", FileMode.Open, FileAccess.Read))
                {
                    bi.SetSource(fileStream);
                    this.img.Height = bi.PixelHeight;
                    this.img.Width = bi.PixelWidth;
                }
            }
            this.img.Source = bi;

NOTE: When open an existing file from the Isolated Storage we use  FileMode.Open, when we want to read to a file we use FileAccess.Read! You can find a list of all FileAccess possibilities here.

NOTE: "img" is an ImageControl placed inside MainPage.xaml: <Image x:Name="img"/>

Saving an image to the phone's Media Library

Note that you have to add reference to Microsoft.XNA.Framework in order to be able to use the MediaLibrary.

In this example we will create a new stream from isolated storage (we will read an image from the Isolated Storage), and save the JPEG file to the Media Library on Windows Phone.

In order to view the result we will use PhotoChooserTask.

using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream fileStream = myIsolatedStorage.OpenFile("logo.jpg", FileMode.Open, FileAccess.Read))
                {
                    MediaLibrary mediaLibrary = new MediaLibrary();
                    Picture pic = mediaLibrary.SavePicture("SavedLogo.jpg", fileStream);
                    fileStream.Close();
                }
            }

            PhotoChooserTask photoChooserTask = new PhotoChooserTask();
            photoChooserTask.Show();

And finally the result is as follows:

In this article I talked about reading and saving Images into Isolated Storage. Here is the full source code:

Stay tuned with the rest of the posts. I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'All about WP7 Isolated Storage - Read and Save Images'

Title Your Name

Comment