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

In the previous page, you added the code that you will need to display the image when you load your Silverlight application. There is just one minor hitch. Where is the image? Let's add it in now.

Adding the Image
Because we want to simulate adding the image from an external source, we can't embed it as part of our XAP - which is currently the default behavior when you insert an image into your document. Instead, we need to go to the folder where your XAP lives and place the image in that same folder.

If you haven't done so yet, make sure to hit F6 to build your project and to ensure you see no errors. You shouldn't see any errors if you resolved the missing assembly reference and using directives from the previous page.

Anyway, since you are already in Visual Studio, right click on the C# Project icon in your Solution Explorer and select Open Folder in Windows Explorer. Once you have done that, Windows Explorer will launch with the location of your C# Project as the start location:

[ you should now be seeing your project and related files in Windows Explorer ]

From here, navigate to your bin \ Debug folder. You will see a splattering of files here - the most important of which is your XAP file. Into this folder, save the following JPEG image and give it the name kirupaCard:

After you have saved this image into the Debug location for your project, your list of files should look as follows:

Notice that your kirupaCard.jpg file is in the same location as your XAP file - which in my case is called LoadingImage_Tutorial.xap. If you go back into Blend now, and press F5 to run your application, you will see your default browser launch and display your Silverlight application!

Everything should work with the image displayed at the location of your image control. With the loaded application, though, you may notice that pressing the Reload Image button does not do anything. That is because the code currently is only designed to display the image on Load and not when a button is clicked. That is very quick fix, so let's go ahead and take care of that now itself.

Loading Image when Button is Clicked
As I explained earlier, we want to refresh our image when the Reload Image button is clicked. In Blend, select your reloadImageButton, switch into your Properties pane, and click on the Events button:

[ access your Reload Image Button's events ]

Once you have clicked the events button, you will see your Properties pane display all of the events you can assign event handlers to. In the field next to the Click event, enter the text ReloadImage:

[ associate the Click event with a ReloadImage event handler ]

Hit the Enter key after you've done that, notice that you will be whisked back into Visual Studio with the event handler for this Click event created for you.

This event handler will be blank, so go ahead and add the following two lines of code:

private void ReloadImage(object sender, RoutedEventArgs e)

{

imageControl.Source = null;

LoadImage();

}

Once you have added this code, go back to Blend and hit F5 to run your Silverlight application. This time, when you click on the Reload Image button, you will see that your image flashes and reappears.

Because you are testing this application locally, you won't "enjoy" the benefits of a real connection where you can see the few seconds of delay before your image loads or where your progress bar updates as your image gets loaded. It's ok - you can trust me that it works (bad idea!) or you can upload to a web server and see for yourself.

In the next page, let's start delving into the code and see why things work the way they do.

Onwards to the next page!

1 | 2 | 3 | 4 | 5