Using Silverlight 3 WrapPanel to Build Cool Photo Gallery

After many and many questions, how was gallery in my post exactly made, I have decided to write an another post, in English, where I demonstrate how to made really nice photo gallery by using WrapPanel control. From my previous post, one thing has changed. Last time I had wrote about this gallery, the WrapPanel was in Silverlight Toolkit. Now it is in Silverlight 3 beta 1. So I will show you how to build nice photo gallery in Silverlight 3 using new control WrapPanel.

What we have to do:

1. make a class for photos
2. make a template for the gallery
3. make a listbox, which will represent gallery
4. make a list of pictures (use some dummy data)
5. join this list to our listbox
6. make a detail of picture
7. activate our gallery
   

Note: If you have not Silverlight 3 beta 1 installed, you could use Silverlight Toolkit as wall. You have just add libraries of SL Toolkit to your project before you start.

1. make a class for photos



For this example we could need just two attributes - name and source (in source you could use a string).



2. make a template for the gallery
We have to make two templates. First one for item and second one for whole gallery. And in this case we use new Silverlight 3 control WrapPanel as PanelTemplate.



3. make a listbox representing gallery
The important thing is to set ItemsPanel and ItemTemplate, which we made before.



4. make a list of pictures
I have already used paintings of my friend (which is not dummy, of course:).



5. join list of picures to our listbox



6. make a detail of picture



I have used some black rectangle with 80% opacity to hide gallery at background.



And now you have to paste this UserControl to our MainPage.xaml, becaouse you want to show preview above gallery. You will do that by this two lines of code in bottom of MainPage.xaml.



Remember, if you want to paste some UserControl to an other, you have to set a namespace of project to header.



7. activate our gallery
This is the most interesting part.

The event in ListBox which will handle with detail is SelectionChanged. We have just set the DataContext and set Visibility of our Detail to visible.



Now, we have to make any exit from detail. The easiest way to do that is use main grid event MouseLeftButtonDown to set visibility of Detail to Collapsed.



That's it. Now you can run your gallery :-)

Download - source code [16511585kB].

I hope you will enjoy it.