Most of the time we require picture gallery in our websites & especially when the website in Silverlight then expectation is very high.
Although there are various design pattern which we can use in gallery design like spider design, 3 D rotation box design, grid view design, scroll design etc. I am concentrating 3 simplest designs and try to explain them one by one.
So here are the three basic gallery designs.
- Scroll images thumbnail in bottom and on click or some other event show enlarge image in center of the page. For reference see below fig.
2.Show all thumbnails in grid view and when we click on individual thumbnail it enlarge. For reference see below fig
3. Show the entire images thumbnails on left side with in a grid and when click on individual thumbnail it enlarge on right side. For reference see below fig.
So let start with first gallery design which is scroll at the bottom and on click or mouse over see the enlarge image in center.
So here are the steps.
1) Create a new Silverlight project
2) Now according to our design just add two rows in the grid where first row will contain related to enlarge or big image view while second row is related with thumbnails which scroll from right to left.
3) In grid’s first row I have added an image control.
4) In grid’s second row I have added a stack panel because all the images we will ad at run time in the stack panel.
5) Now we are adding some image effects in big image view control currently we have used drop shadow effect.
6) Now as you know we have to apply some kind of logic to move image from one position to another position for these we can use translate transformation (As you know Transformation is part of animation). Translate transformation help in movement of image from one position to another position.
7) Once our design is fixed now we will add image dynamically from code behind. Just like as shown below code.
Dim intI As Integer
For intI = 1 To 8
Dim Img As New Image
Dim imgsource As ImageSource
imgsource = New BitmapImage(New Uri(“images/” + intI.ToString() + “.jpg”, UriKind.Relative))
Img.Width = 100
Img.Height = 100
Img.Margin = New Thickness(10)
Img.Name = “img” + intI.ToString()
Dim ef As New Effects.DropShadowEffect()
ef.ShadowDepth = 10
Img.Effect = ef
AddHandler Img.MouseEnter, AddressOf img_MouseEnter
Me.dbAniTransform.From = 800
Me.dbAniTransform.To = -600
8) Here you find that I have added image handler on Mouse Enter event you can use different event as per your choice.
9) We have added drop shadow effect also so the image looks bit emboss.
So in this way we have finished basic image gallery. Here the major points to understand are only image translate transformation. If we understand this then we can design it easily.
You can download the code from
Enjoy weekend with Silverlight.
Thanks & Best Regards,