Preloading and Displaying an Image - Page 4
       by kirupa  |  19 October 2008

In the previous page, you got your application working! You aren't done yet though. The more interesting part is learning why your application works the way it does, and that can only be done by examining the code in greater detail.

In this and the next page, you will learn about the behind-the-scenes work that goes on with having your application load an image.

Looking at the Code
To take a step back, our application does one thing - it loads an image from an external location and displays it inside an Image control. Along the way, as the image is being loaded, it gives you progress information that you feed to a ProgressBar control. The code that you copied and pasted is the C# version of the  preceding two sentences, so let's see how all of that works.

 Let's start by looking at the LoadImage method:

private void LoadImage()

{

//

// Creating WebClient object and setting up events

//

WebClient downloader = new WebClient();

downloader.OpenReadCompleted += new OpenReadCompletedEventHandler(downloader_OpenReadCompleted);

downloader.DownloadProgressChanged += new DownloadProgressChangedEventHandler(downloader_DownloadProgressChanged);

 

//

// Specify Image to load

//

string fileName = "kirupaCard.jpg";

 

downloader.OpenReadAsync(new Uri(fileName, UriKind.Relative));

}

The most important method in our code is LoadImage. This collection of code is responsible for telling your application which file to download, what method to call once a file has downloaded, and what method to call while the file is being downloaded.

A large part of those tasks is handled by your WebClient object:

WebClient downloader = new WebClient();

downloader.OpenReadCompleted += new OpenReadCompletedEventHandler(downloader_OpenReadCompleted);

downloader.DownloadProgressChanged += new DownloadProgressChangedEventHandler

The WebClient class contains a lot of functionality relating to downloading content. I first declare and initialize a WebClient object called downloader. That is what the first line shows.

The second and third lines are interesting. Getting notified on when the content has fully downloaded and when content is being downloaded is handled by events the WebClient object exposes. What I do is just hook into those events and set up the event handlers appropriately for both OpenReadCompleted and DownloadProgressChanged.

OpenReadCompleted is the event that gets called when whatever you are downloading has fully been downloaded. DownloadProgressChanged is the event that gets called as your content is being downloaded. Declaring these events and hooking them up to event handlers isn't enough to get them going though.

What you need to do is actually force a download of an external file, and that is done in the last two lines of this method:

string fileName = "kirupaCard.jpg";

 

downloader.OpenReadAsync(new Uri(fileName, UriKind.Relative));

In the first line, I specify the name of the file I am interested in downloading. This is just a straight-up variable of type string, so there is nothing particularly interesting to see here.

It is the second line that is responsible for initiating the download. OpenReadAsync is the method you call to asynchronously load your content, and it takes a Uri as its argument. This Uri stores information about the file we are loading...such as the name of the file and whether that file is relative to the XAP or not.

Phew - that was quite a method! In the next page, I will cover the remaining code and wrap things up.

Onwards to the next page!

1 | 2 | 3 | 4 | 5