WebClient Load JPG & GIF to Image

Question

In my XAML, I have:

<Image Height="150" HorizontalAlignment="Left" Margin="0,4,0,0" Name="imgLogo" Stretch="Fill" VerticalAlignment="Top" Width="417" />
<Image Height="343" HorizontalAlignment="Left" Margin="0,155,0,0" Name="imgPhoto" Stretch="Fill" VerticalAlignment="Top" Width="417" />

In the C# code behind, I have:

WebClient wcForLogo = new WebClient();
wcForLogo.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wcForLogo_DownloadStringCompleted);
wcForLogo.DownloadStringAsync(new Uri("http://mySite/logo.gif"));

WebClient wcForPhoto = new WebClient();
wcForPhoto.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wcForPhoto_DownloadStringCompleted);
wcForPhoto.DownloadStringAsync(new Uri("http://mySite/photo.jpg"));

But now I don't know how to catch the image and post it in the XAML controls I built.

2 questions:

1. Is there a way to copy the e.Result directly to the Image controls, or should I cache the image and use the cache as the source, or should I save the image to the isolated storage and then use that as the source, then delete the image when I'm done with it? Whichever case, could you please show me how with code?
2. Are GIF's and JPG's dealt with differently? If so, can you show me the 2 different ways?

Answer 1

If you just want to display the picture, you don't have to use a WebClient. You can set the Uri directly in the image source, and the control will take care of the downloading:

imgLogo.Source = new BitmapImage(new Uri("images/yourPicture.png", UriKind.Relative));

Note that GIF aren't supported by the Image control. You can still display them by using the converter from the ImageTools library: Display GIF in a WP7 application with Silverlight

Answer 2

using System.Net;
using System.IO;
        private void Form1_Load(object sender, EventArgs e)
        {
            WebClient webclient = new WebClient();
            webclient.DownloadDataAsync(new Uri("http://mySite/logo.gif"));
            webclient.DownloadDataCompleted += callback;

        }
        void callback(object sender,DownloadDataCompletedEventArgs e)
        {
            var ms = new MemoryStream(e.Result);
            pictureBox1.Image = Image.FromStream(ms);
        }

Answer 3

If you want to save in isolated storage use like this

            WebClient m_webClient = new WebClient();

            Uri m_uri = new Uri("http://URL");

            m_webClient.OpenReadCompleted += new OpenReadCompletedEventHandler(webClient_OpenReadCompleted);

            m_webClient.OpenReadAsync(m_uri);




        }



    void webClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
    {
        int count;

        Stream stream = e.Result;

        byte[] buffer = new byte[1024];


        using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
        {




            using (System.IO.IsolatedStorage.IsolatedStorageFileStream isfs = new IsolatedStorageFileStream("IMAGES.jpg", FileMode.Create, isf))
            {
                count = 0;

                while (0 < (count = stream.Read(buffer, 0, buffer.Length)))
                {
                    isfs.Write(buffer, 0, count);
                }

                stream.Close();
                isfs.Close();
            }
        }

To get image form isostore:

byte[] data;

        using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
        {

            using (IsolatedStorageFileStream isfs = isf.OpenFile(uri, FileMode.Open, FileAccess.Read))
            {
                data = new byte[isfs.Length];
                isfs.Read(data, 0, data.Length);
                isfs.Close();
            }

        }


        MemoryStream ms = new MemoryStream(data);

        BitmapImage bi = new BitmapImage();

        bi.SetSource(ms);

If you give the image name as image then set the source as bi:

        image.source = bi;

If you want to add directly

  WebClient client = new WebClient();
  Stream stream = client.OpenRead(imageUrl);
  Bitmap bitmap = new Bitmap(stream);
  image.source = bitmap;

Answer 4

Let's say your image control is called MyImage, you can just do this to load an image from an URL:

MyImage.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("http://mySite/photo.jpg"));

No need to do all the plumbing just to download the image, the framework already does that for you!