1. Code
  2. Silverlight

Create a Wallview for Images with Silverlight: Code


Welcome to the second part of creating an iTunes-inspired Wallview. In this part we are going to write the whole code in C# for the two UserControls that we created with Expression Blend in the previous tutorial.

Final Result Preview

Take another look at the video demo of final result we will be working towards (or just check out the web based demo above):

Step 1: Open the Project

Open Visual Studio and click on "File" > "Open" > "Project/Solution" in the menu bar.

Then browse to the project we created in the first part of this tutorial. We called it "WallviewApp".

Step 2: Open the C# Documents

On the right side of Visual Studio is the Solution Explorer by default. Here you can see every file from the project. Go ahead and open the two *.cs files "image.xaml.cs" and "wallview-img.xaml.cs" from the two UserControls we created in the previous tutorial in Blend as well as the "MainPage.xaml.cs" which got provided automatically.

Once you have opened these three files you can see that all three classes are pretty empty.

Step 3: image Class Declare Variables

Let's start with coding the image class. Make sure you are currently editing the "image.xaml.cs" file and add the following declarations right above the constructor "public image()":

Step 4: image Class Write the Constructor

Now we are going to program the constructor which has two parameters: a BitmapImage and a String. Furthermore the previous declared variables are initialized, the parameters from the constructor are assigned to the source of the "img" and the text of the "imgName" Textblock. We also register an eventhandler for the MouseLeftButtonDown event of the "img":

The parameter BitmapImage is underlined with a red color because Visual Studio can't find the namespace. To fix that just click the word BitmapImage and a small blue rectangle should appear under the letter B:

When you move your mouse over the small rectangle a drop-down menu will appear. Click on the entry "Using System.Windows.Media.Imaging;":

Now Visual Studio knows that namespace, and the red underline will disappear.

Step 5: image Class Code Some Methods

Right after the constructor we are going to write a couple of methods which we will need later. The methods are pretty self descriptive from their method names. image_MouseLeftButtonDown is the event handler of the MouseLeftButtonDown event of the "img" that we registered in the constructor. It basically controls what happens when you click the image, depending on its status (whether it is selected already or not):

Now we're done with the image class.

Don't worry about the red underlined parts in your code. These variables and methods don't exist yet and that's why Visual Studio doesn't know them but we are going to change that soon.

Step 6: wallview-img Class Declare Variables

Since we are done with the image class open the "wallview-img.xaml.cs" document. At first write the declarations of variables right above the constructor "public wallview_img()":

Just like before with the BitmapImage Visual Studio doesn't know the namespace of List. To fix this, as before, click one of the Lists, then on the blue rectangle and select "using System.Collections.Generic;" from the menu:

Step 7: wallview-img Class Code the Constructor

Add the following code which initializes the previously declared variables, registers some events and disables the buttons in the navigation bar:

Step 8: wallview-img Class Write the Methods

Add the following methods below the constructor. The comment before each method explains what the method is doing:

Step 9: wallview-img Class Eventhandlers

In this step we write the needed event handlers for the events we registered in the constructor earlier:

Now we are done with the wallview-img class. Let's continue with creating a webservice which we will need for the MainPage class.

Step 10: Create a Webservice

The webservice that we are going to write basically provides us with the images from a certain folder. To create a webservice right-click on "WallviewApp.Web" in the Solution Explorer on the right side of Visual Studio and select "Add" > "New Item" from the menu:

From the popup select "Silverlight-enabled WCF Service Visual C#" and enter "WCF.svc" for a name, then click "Add":

As you can see we obtained another class called WCF with its own code document, "WCF.svc.cs".

Step 11: WCF Class Code Two Methods

Add the following two methods in the WCF class right beneath the line that says "// Add more operations here and mark them with [OperationContract]":

Fix the missing namespaces like we did earlier by clicking into the affected names, then on the blue rectangle and on "import ..." or by adding these two lines manually at the top of the document:

Step 12: Service Reference Part 1

In order to be able to use the webservice we need to add a Service Reference to the main project. Before we can successfully do this we have to build the project once. Therefore click on "Build" from the menu at the very top of Visual Studio and after that on "Build WallviewApp":

Step 13: Service Reference Part 2

After the build succeeds, right-click on "WallviewApp" on the right side in the Solution Explorer and choose "Add Service Reference" from the menu:

Step 14: Service Reference Part 3

In the upcoming popup click on the button "Discover" and enter "WCFRef" in the Namespace field, then click "OK":

Without building the project before trying to add a Service Reference you would have gotten this error message:

Step 15: MainPage Class Declare Variables

Open the "MainPage.xaml.cs" file and add the following lines of code above the constructor "public MainPage()":

Step 16: MainPage Class Program the Constructor

The constructor of the MainPage looks like this. We initialize the declarations from the previous step, register the webservice's eventhandlers and add the wallview_img named "wvi" to the Grid "LayoutRoot" of the MainPage:

Step 17: Code the Eventhandlers for the Webservice

Add the following two eventhandlers and the method below the constructor of the MainPage.

The "client_getFileNamesCompleted()" gets an array of strings which get returned by the webservice. The array is converted into separate strings from which the filename is extracted.

Using the localhost address, the port, the image directory, and filename, we build a Uri called "src". That Uri is used to create a new BitmapImage "bmi" which is needed to create a new image "tmp". The image "tmp" then gets added to the wallview_img "wmi".

Afterwards, the method that returns the creation date of a file is called together with a counter number. Whatever that method returns gets processed by the handler "client_getFileDatesCompleted()". Since a string in the format >2-18.02.2009 12:32:23 is returned from the webservice, we have to split off the counter number at the beginning and the date in the middle.

When this procedure is completed the final date looks like >18.02.2009 and is assigned to the Textblock "imgDate" of the corresponding image.

As in the other source files the namespace "BitmapImage" cannot be found. To repair this click the blue rectangle and import it after you clicked into the text of BitmapImage, or add the following line to the top of the document manually:

Step 18: Run the Project

Go ahead and execute the project to see if everything works. You can do this by either pressing "F5" on your keyboard, by clicking the button with a typical "Play" icon below the menu at the top on the icon bar, or by selecting the entry "Start Debugging" inside the "Debug" submenu from the menu at the very top of Visual Studio:

Your browser opens and you will get this error message:

What's the problem?

We told the webservice to check the folder "http://localhost:port/image/" for *.jpg files and obviously neither that folder nor any images in that folder exist yet.

Step 19: Prepare the Image Folder

Navigate to the project directory with your Windows Explorer. For me it is the following path:

Open the folder "WallviewApp.Web" and create a new folder called "image" inside of it.

Now open the folder "image" and paste some *.jpg images into it.

Step 20: Run the Project Again

Once you placed a couple of images inside the image folder either press refresh inside your webbrowser (if it is still open) or simply run the project again by pressing the "F5" key in Visual Studio. As a result you should see our final Wallview:

You can influence the size of the displayed images with the slider in the navigation bar.


We are done for now with this tutorial and i hope you enjoyed it and learned something, too.

The approximate total time it took me to develop this from scratch was about 20 hours. The wallview for albums which you can see in the video below took me about 15 hours and another 10 hours to combine both wallview types.

You might ask yourself what the point of being able to select one or more images is. Right now that functionality is useless but I could imagine adding the possibility to start a slideshow or create a playlist from the selected images for example. And if you are wondering why we added the buttons "All Albums", "Current Album", "<" and ">" in the navigation bar but never used them...

My intention is to develop another tutorial that automatically generates photo albums based on the filenames of the images. Of course that tutorial will extend the project from the tutorial you just completed here. I'd definitely like to do that if it is popular with the audience. To get an impression of what the wallview for images that we just created would look like in combination with a wallview for photo albums take a look at the following video:

For any comments, suggestions or concerns, please leave a note in the comment section. Thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.