how to store an image received from the web and display it in the windows phone 7 application

Question

I am building my first app in windows phone 7 application. I have an image which comes from the web and when the image is clicked i am navigated to another page. My xaml code is:

 <Button Click="Image_Click" Name="image1" Margin="-33,-16,-26,-13">
            <Button.Background>
                <ImageBrush Stretch="Fill"  ImageSource = "http://political-leader.vzons.com/ArvindKejriwal/images/icons/landing.png"/>
            </Button.Background>
        </Button>

My .cs code is

private void Image_Click(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/AAP.xaml", UriKind.Relative));
    }

Now the issue is that i want to store the image so that it can be even viewed while offline. Can anyone help me what modification should i do to for this purpose.

Answer 1

This is a working example on how to do that. The logic is as follow :

1. In the page's constructor, call LoadImage method.
2. The method will set imageBrush's ImageSource to image in Isolated storage if available.
3. If the image not exists in Isolated storage, LoadImage method will download the image from web and call an event handler when download completed.
4. The event handler (DownloadCompleted method) will then, save the image to Isolated Storage and call LoadImage again. Refer to point 2 for what happen next.

You may want to improve it later to implement MVVM and using DataBinding.

References: nickharris.net, geekchamp.com

string imageName = "myImage.jpg";
string imageUrl = "http://political-leader.vzons.com/ArvindKejriwal/images/icons/landing.png";

public MainPage()
{
    InitializeComponent();
    LoadImage();
}

private void LoadImage()
{
    BitmapImage bi = new BitmapImage();
    using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
    {
        //load image from Isolated Storage if it already exist
        if (myIsolatedStorage.FileExists(imageName))
        {
            using (IsolatedStorageFileStream fileStream = myIsolatedStorage.OpenFile(imageName, FileMode.Open, FileAccess.Read))
            {
                bi.SetSource(fileStream);
                imageBrushName.ImageSource = bi;
            }
        }
        //else download image to Isolated Storage
        else
        {
            WebClient wc = new WebClient();
            wc.OpenReadCompleted += new OpenReadCompletedEventHandler(DownloadCompleted);
            wc.OpenReadAsync(new Uri(imageUrl, UriKind.Absolute), wc);
        }
    }
}

private void DownloadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    if (e.Error == null && !e.Cancelled)
    {
        try
        {
            using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                IsolatedStorageFileStream fileStream = myIsolatedStorage.CreateFile(imageName);

                BitmapImage bitmap = new BitmapImage();
                bitmap.SetSource(e.Result);
                WriteableBitmap wb = new WriteableBitmap(bitmap);

                // Encode WriteableBitmap object to a JPEG stream.
                Extensions.SaveJpeg(wb, fileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);
                fileStream.Close();
            }
            //after image saved to Iso storage, call LoadImage method again
            //so the method will set imageBrush's ImageSource to image in Iso storage
            LoadImage();
        }
        catch (Exception ex)
        {
            //Exception handle appropriately for your app  
        }
    }
    else
    {
        //Either cancelled or error handle appropriately for your app  
    }
}