In this recipe we will learn how to save image files to a local storage folder. We will make use of the IsolatedStorageFile class.
For this recipe let's copy the simple MyTasks app solution folder we built in the previous recipe and rename the folder to Ch2_Recipe4_MyTasks. After you open the project, just press F5 and run it to make sure you don't get any errors.
Let's add a button control in the settings page to launch the built-in Photo Chooser utility. Once the desired photo is selected we will save the image to local storage.
- Open the settings
.xamlfile and add a text block control and button control inside theContentPanelgrid:<TextBlock Height="55" HorizontalAlignment="Left" Margin="12,199,0,0" Name="textBlock1" Text="Bacground Image" TextWrapping="Wrap" VerticalAlignment="Top" Width="115" /> <Button Content="Browse" Height="77" Margin="119,0,70,331" Name="btnBrowse" VerticalAlignment="Bottom" Click="btnBrowse_Click" />
- Open the
settings.xaml.csfile and add the following twousingstatements:using System.Windows.Media.Imaging; using Microsoft.Phone.Tasks;
- Let's create an instance of
PhotoChooserTask, which will let us pick photos using Photo Chooser. Add the following code before theSettingsconstructor:private PhotoChooserTask bkPhotoTask;
- Add the following code inside the
Settingsconstructor to initializePhotoChooserTaskand then the photo task completed event handler in theSettingsconstructor:// initialize PhotoChooserTask bkPhotoTask = new PhotoChooserTask(); // add an event bkPhotoTask.Completed += new EventHandler<PhotoResult>(bkPhotoTask_Completed);
- In the button event click method, call the
PhotoTask.Showmethod to launch the Photo Chooser. After the photo is selected, thePhotoTask_Completedevent is triggered, which calls the methodbkPhotoTask_Completed. This method saves the selected image to theBitmapImagestream:private void btnBrowse_Click(object sender,RoutedEventArgs e) { bkPhotoTask.Show(); } private void bkPhotoTask_Completed(object sender, PhotoResult e) { if (e.TaskResult == TaskResult.OK) { BitmapImage bkImage = new BitmapImage(); bkImage.SetSource(e.ChosenPhoto); // save the image to local storage SaveImageToLocalStorage(bkImage); } } - Add the saved image stream to an isolated storage file. Here the
Imaging Extensionclass is used to encode the image into theJPEGimage stream. Then the image is set to app background:// save the image to local storage private void SaveImageToLocalStorage(BitmapImage bkImage) { using(IsolatedStorageFile isFile = IsolatedStorageFile.GetUserStoreForApplication()) { WriteableBitmap wImage = new WriteableBitmap(bkImage); if(!isFile.DirectoryExists("Images")) { isFile.CreateDirectory("Images"); } using(IsolatedStorageFileStream imageStream = isFile.OpenFile(@"ImageskgroundImage.jpg", System.IO.FileMode.OpenOrCreate)) { Extensions.SaveJpeg(wImage, imageStream, wImage.PixelWidth, wImage.PixelHeight, 0, 100); } var app = Application.Current as App; if (app == null) return; var imageBrush = new ImageBrush { ImageSource = bkImage, Opacity = 0.5d }; app.RootFrame.Background = imageBrush; } } - Press F5 and navigate to the Settings page. Click on the Browse button. This will launch the Photo Chooser:
- In the Photo Chooser, you should be able to see all the albums in your phone. Pick the album:
- Now pick a photo to make it your background. After you select the picture,
PhotoChooserTaskconfirms that Settings Saved Successfully. Click on ok to close the message box.
- As we apply the image application background brush, the Settings page background will display the selected photo. Now you can navigate back to the main page. You should see the selected photo as the background image.
In order to save the image to local store, we use the IsolatedStorageFile class. We first create the Images folder.
Using the IsolatedStorageFileStream we open the image file chosen for the background image. We use the FileMode as OpenOrCreate. If it already exists, then it just opens, otherwise the image is saved to the file stream using the SaveJpeg method of the Extensions class.
In this recipe, we explored how to save images and create folders. You can learn more about files and folders at the following MSDN address: http://msdn.microsoft.com/en-us/library/ff626519%28v=VS.92%29.aspx.
Read the Opening and creating a file recipe in this chapter to understand more on Opening and Creating files in local storage. Also, in Chapter 5, Using On-Device Databases, we will learn how to use the on-device databases as another option to save information locally.