Using Isolated Storage to Save And Get an Image in Windows Phone 7

Introduction

In this article we are going to explore some interesting things such as saving and reading images using isolated storage in Windows Phone 7. Further we are explaining the details of when we have an image and want to store it with Windows Phone then we can do it easily using isolated storage. As we know, isolated storage is a virtual environment which we must create to store data or images then later we can retrieve that data or images. In the isolated storage we will use mostly the terms IsolatedStorageFile, which is a class used to create the virtual store and the other one is the IsolatedStorageFileStream, which is a class used to basically read and write the file from isolated storage space. Further in this, the main difference, when we talk about Images, is the usage of BitmapImage and WriteableBitmap classes. Further we have to see how it is possible to do such functionality then you have to do that using the steps given below.

Step 1 : In this step, first of all we have to open a Windows Phone application; let us see how to open it.

• Go to Visual Studio 2010
• File->New->Project
• Select the template named as Silverlight for Windows Phone
• Select the Windows Phone application
• Give it a name as you want

Step 2 : In this step we have to add some namespaces to the above namespaces and also add a reference to the Solution Explorer; first of all we will see how it will be added, which is given below.

Go to Solution Explorer.

Right-click on the reference folder.

Select the component named as Microsoft.Xna.Framework as see in the figure given below.

Whenever you click OK then you will see that the component reference has been added to the reference folder which will you see in the figure given below.

Step 3 : In this step you will see the code for the Button1 click code or save button code which is given below. In this code we are going to create a virtual store and file stream that will used to store the image into isolated storage and in the Step 4 we will see that we have to retrieve the image from isolated storage; further you will see the code given below.

Code:

private void button1_Click(object sender, RoutedEventArgs e)
   {
       // First of all create a filename for JPEG file in isolated storage.
       String myimg = "Background.png";
       // Now we are going to Create virtual store and file stream. Check for duplicate tempJPEG files.
       using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
       {
           if (ISF.FileExists(myimg))
           {
               ISF.DeleteFile(myimg);
           }
           IsolatedStorageFileStream FS = ISF.CreateFile(myimg);
           StreamResourceInfo Str_ri = null;
           Uri ur = new Uri(myimg, UriKind.Relative);
           Str_ri = Application.GetResourceStream(ur);
           BitmapImage BI = new BitmapImage();
           BI.SetSource(Str_ri.Stream);
           WriteableBitmap Wr_B = new WriteableBitmap(BI);
           // Furthe we have to encode WriteableBitmap object to a JPEG stream.
           Extensions.SaveJpeg(Wr_B, FS, Wr_B.PixelWidth, Wr_B.PixelHeight, 0, 85);
           Wr_B.SaveJpeg(FS, Wr_B.PixelWidth, Wr_B.PixelHeight, 0, 85);
           FS.Close();
           MessageBox.Show("Image has been saved");
       }
   }

 

Step 4 : In this step we will see the code which is given below for reading the images from the isolated storage to the Windows Phone.

 

Code:

private void button2_Click(object sender, RoutedEventArgs e)
   {
       BitmapImage Bit_Img = new BitmapImage();
       using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
       {
           using (IsolatedStorageFileStream FS = ISF.OpenFile("Background.png", FileMode.Open, FileAccess.Read))
           {
               Bit_Img.SetSource(FS);
               this.img2.Height = Bit_Img.PixelHeight;
               this.img2.Width = Bit_Img.PixelWidth;
           }
       }
       this.img2.Source = Bit_Img;
   }

 

Step 5: In this step we will see the button3 click code which will add an image to the media library and later we can retrieve that image; either saved inside the media library or not; let us see the code, which is given below.

 

Code:

private void button3_Click(object sender, RoutedEventArgs e)
   {
       using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
       {
           using (IsolatedStorageFileStream FS = ISF.OpenFile("Background.png", FileMode.Open, FileAccess.Read))
           {
               MediaLibrary ML = new MediaLibrary();
               Picture pic = ML.SavePicture("SavedBackground.png", FS);
               FS.Close();
               MessageBox.Show("Image stored to media library");
           }
       }
       PhotoChooserTask PCT = new PhotoChooserTask();
       PCT.Show();
   }

 

Step 6 : In this step we will see the complete code for the MainPage.xaml.cs file, which is given below.

 

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
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;
namespace Myimagesave
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            // Create a filename for JPEG file in isolated storage.
            String myimg = "Background.png";
            // Create virtual store and file stream. Check for duplicate tempJPEG files.
            using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
            {
                if (ISF.FileExists(myimg))
                {
                    ISF.DeleteFile(myimg);
                }
                IsolatedStorageFileStream FS = ISF.CreateFile(myimg);
                StreamResourceInfo Str_ri = null;
                Uri ur = new Uri(myimg, UriKind.Relative);
                Str_ri = Application.GetResourceStream(ur);
                BitmapImage BI = new BitmapImage();
                BI.SetSource(Str_ri.Stream);
                WriteableBitmap Wr_B = new WriteableBitmap(BI);
                // Encode WriteableBitmap object to a JPEG stream.
                Extensions.SaveJpeg(Wr_B, FS, Wr_B.PixelWidth, Wr_B.PixelHeight, 0, 85);
                Wr_B.SaveJpeg(FS, Wr_B.PixelWidth, Wr_B.PixelHeight, 0, 85);
                FS.Close();
                MessageBox.Show("Image has been saved");
            }
        }
        private void button2_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage Bit_Img = new BitmapImage();
            using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream FS = ISF.OpenFile("Background.png", FileMode.Open, FileAccess.Read))
                {
                    Bit_Img.SetSource(FS);
                    this.img2.Height = Bit_Img.PixelHeight;
                    this.img2.Width = Bit_Img.PixelWidth;
                }
            }
            this.img2.Source = Bit_Img;
        }
        private void button3_Click(object sender, RoutedEventArgs e)
        {
            using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream FS = ISF.OpenFile("Background.png", FileMode.Open, FileAccess.Read))
                {
                    MediaLibrary ML = new MediaLibrary();
                    Picture pic = ML.SavePicture("SavedBackground.png", FS);
                    FS.Close();
                    MessageBox.Show("Image stored to media library");
                }
            }
            PhotoChooserTask PCT = new PhotoChooserTask();
            PCT.Show();
        }
    }
}

 

Step 7 : In this step we will see the code for the MainPage.xaml file, which is given below.

 

Code:

<phone:PhoneApplicationPage
    x:Class="Myimagesave.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="PageTitle" Text="Save Image APP" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"
                       FontFamily="Comic Sans MS" FontSize="56">
                <TextBlock.Foreground>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                     <GradientStop Color="Black" Offset="0" />
                     <GradientStop Color="#FF50FFEA" Offset="1"/>
                  </LinearGradientBrush>
                 </TextBlock.Foreground>
                </TextBlock>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Background>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFBECB80" Offset="1" />
                </LinearGradientBrush>
            </Grid.Background>
            <Button Content="Save Image" Height="92" HorizontalAlignment="Left" Margin="85,50,0,0" Name="button1"
                    VerticalAlignment="Top" Width="216" Click="button1_Click" FontFamily="Comic Sans MS" FontSize="28">
                <Button.Background>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="#4937FFA9" Offset="1" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Button Content="Read Image" Height="88" HorizontalAlignment="Left" Margin="85,129,0,0" Name="button2" VerticalAlignment="Top"
                    Width="216" Click="button2_Click" FontFamily="Comic Sans MS" FontSize="28">
                <Button.Background>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="#FF23FFFF" Offset="1" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Image x:Name="img2"/>
            <Button Content="Save to media library" Height="72" HorizontalAlignment="Left" Margin="37,446,0,0" Name="button3"
                    VerticalAlignment="Top" Width="332" Click="button3_Click" FontFamily="Comic Sans MS" FontSize="28">
                <Button.Background>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="#FFFF8080" Offset="1" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Step 8 : In this step we will see the design page of the MainPage.xaml file; let us see the figure given below.

 

 

Step 9 : In this step we have to run the application by pressing F5 and the output regarding this is given below.

 

Output 1 : This is the default output whenever we run the application and you can see in the figure which is given below.

 

Output 2 : In this output we will see that whenever we will click on the save button then the image will be saved to the isolated storage space which you will see in the figure which is given below.

 

Output 3 : In this output we will see that whenever we click on the read button then it will display the images on the screen, and you can see it in the figure given below.

 

Output 4 : In this Output if we want to store an image inside the media library then click on the third button and the regarding figure is given below.

 

Output 5 : In this output you can see that images have been added to the media library which you can see it in the figure given below.

 

Output 6 : In this output you can see that it will stored or not then see in the figure given below.  

Here are some other related resources which may help you

Save And Read Data From Isolated Storage in Windows Phone 7

Multitasking or Tombstoning and Isolated Storage in Windows Phone 7

Isolated Storage Explorer Tool in Window Phone 7

Windows Azure Storage Client Library For Windows Phone: Part 1

Working with Isolated Storage in Silverlight