Photo Viewer using Silverlight

When I looked it first time Beauty and Fashion on msn, the image displayed and some of the information about the image shown, I really like it and I want to create for myself, in silverlight. So here is my application which is similar to this and I hope you will like it. Here is the screen shot of my application and the source code download link will be provided at the bottom of the post.

The application is simple one, I have used few control like Image control, list box control and also text block to show some of the information for the image which is currently selected from the list box control, and for the layout I have used grid. I have added all the images in the image folder.Starting from the code Behind I have created one class which is ImageCollections and I have create ImageURL, ImageName and ImageDescription three properties for the image collection class. Then in the Loaded event of the user control I have bind the ItemsSource of the list box control to the list of the Image collection by calling the static method getImageCollection defined in the ImageCollection class ( which is placed in the classes folder).

Now moving to the xaml of the main page. Here I have used the grid layout for the display of the control and one of my most used layout control. I have set 3 rows and columns for the main layout grid and then inside that grid one more grid to show the main display area. The display grid which consist of two rows the second row consist of height of 150 and remain will be allocated to the first row which show the main display image ( the larger image in the application and also the some detail of the image). In the second row I have used the list box control to show the image in smaller size and set the orientation of the list box item to horizontal. In the first row the main image will be display which is selected from the list box. and plus some of the detail of the image comes up. I have used two story board for the grid which will show the detail of the image , one to increase the height of the detail grid and second one to decrease the height of the detail grid. You can see the transparency of the detail grid.

Hope you like the application and idea behind the application. which is taken from the Beauty and Fashion from msn. You can download the source code from here

All and any comments / bugs / suggestions are welcomed!