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

In the previous page, we started looking at the nuts and bolts of our application. First up was the LoadImage method that is responsible for setting all of the other wheels in motion. In this page, let's look at those other wheels!

First up is the downloader_OpenReadCompleted event handler:

void downloader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

{

//

// Create a new BitmapImage and load the stream

//

BitmapImage loadedImage = new BitmapImage();

loadedImage.SetSource(e.Result);

 

//

// Setting our BitmapImage as the source of a BackgroundImage control I have in XAML

//

imageControl.Source = loadedImage;

}

This method is the event handler that gets called when your OpenReadCompleted event is fired when your download has completed.

Because what we are downloading is image data, I need to store that data into a type that can handle it:

BitmapImage loadedImage = new BitmapImage();

loadedImage.SetSource(e.Result);

That type is BitmapImage. The results of what I download are stored as a stream - a collection of data that makes up "something". What the something actually is...is handled by the recipient of this stream. Because I know for certain that this data is a stream that contains data making up an image, it makes sense for my recipient to be BitmapImage. In a nutshell, I access the data (e.Result) and pass it in to my BitmapImage object's SetSource method.

The final step is to actually have our image display:

imageControl.Source = loadedImage;

Because I already have an Image control that I created earlier in Blend, I can just pass in my BitmapImage object directly to it. That is done by setting my image control's Source property to the BitmapImage object, loadedImage, itself.

The next block of code we will look at is the one that powers our ProgressBar control:

void downloader_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)

{

// Progress Updates

progressBar.Value = e.ProgressPercentage;

}

This method is the event handler for the DownloadProgressChanged that you declared earlier on your WebClient downloader object. Each time something gets downloaded, this method gets called.

One of the arguments for this method is an object of type DownloadProgressChangedEventArgs which contains a ProgressPercentage property which gives you a number between 0 and 100 to indicate download progress.

The ProgressBar control you added earlier, whose name is progressBar, has a Value property that (in its default state) also takes a number between 0 and 100. Combine this with the ProgressPercentage value and you have a working download progress indicator!

The last line of code we will look at is what happens when you click on the Reload Image button aptly called reloadImageButton:

private void ReloadImage(object sender, RoutedEventArgs e)

{

imageControl.Source = null;

LoadImage();

}

The first thing I do is clear out the image that is currently being displayed. That can be easily done by setting the Source property of your Image control to null.

Finally, I make another call to our LoadImage function to start the process of downloading our image again.

Conclusion
And with that last sentence, you are done with this tutorial. We rushed through the UI part where you placed the controls and gave them an appropriate name, but hopefully you found the more slower, detailed look at the code more helpful.

Below you will find the final source files in case you want to see how my version looks:

Download Source Files

1 | 2 | 3 | 4 | 5