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

In the previous page, you created the UI of your application and got an overview of what you will be creating. In this page, we will tackle the next big thing - which is adding the code that will actually load our image.

To add the code, click on the Project tab, right click on the Solution entry, and choose Edit in Visual Studio:

[ invoke Visual Studio directly on this project from the Project pane ]

A few seconds later, Visual Studio will launch with your current Solution displayed. In the Solution Explorer in Visual Studio, you will see the exact same project structure that you see in Blend. Anyway, double-click on Page.xaml.cs to open it for editing. You are now ready to add some code.

The Code
Copy the following code and overwrite your public Page constructor by pasting directly over it:

public Page()

{

// Required to initialize variables

InitializeComponent();

 

// Load the image once the page has loaded

LoadImage();

}

 

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));

}

 

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 imageControl control I have in XAML

//

imageControl.Source = loadedImage;

}

 

void downloader_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)

{

// Progress Updates

progressBar.Value = e.ProgressPercentage;

}

Once you have pasted your code in, things aren't all sun and roses. There are some extra things you will need to do. First, you need to fix all of the little squiggly lines that indicate that some of your classes cannot be found.

[ missing assembly references or using directives abound! ]

These squiggly lines represent missing assembly references and using directives, and another tutorial explains in detail what all of that means. In a nutshell, the classes you use are defined in various DLL files that are a part of Silverlight. Certain classes, though, while part of Silverlight, are from DLLs that aren't referenced by default. This means that you have to manually add the reference yourself.

The first one we will look at is the WebClient class. Right clicking on it doesn't give you a familiar Resolve menu-item indicating that only a using directive was missing. You will have to add the assembly (a fancy name for a DLL file...most of the time!) yourself. Right click on your References folder and select Add Reference:

[ right-click on the References folder and select Add Reference ]

The Add Reference window will appear. Scroll down until you see an entry for System.Net. Once you see it, double-click on it. A few seconds later, this Add Reference window will close and you will see an entry for System.Net displayed in your list of References:

[ System.Net will be displayed among the list of References your project is aware of ]

If you go back to your code, right click on a squiggly, underlined WebClient instance, the Resolve menu will be there as well. From the Resolve menu, select the entry for using System.Net:

[ add the System.Net using directive ]

Once you have done this, you will see that almost all of your "missing assembly reference" errors go away. The only place you will need to fix up your code is the BitmapImage class.

That should be an easy one, though. Just right click on the BitmapImage text and go Resolve | using System.Windows.Media.Imaging:

[ resolve the missing using directive for BitmapImage as well ]

You should not be seeing any errors once you fix up BitmapImage, and you can verify by hitting F6 to Build. Your build should succeed without any errors being displayed.

Not having errors doesn't mean that you can run your application though. That is because an important piece is currently missing - the image that you will be loading!

Onwards to the next page!

1 | 2 | 3 | 4 | 5