Create Silverlight Gallery in easy steps part-1

Hello friends,

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.

  1. 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

        Me.stakImages.Children.Clear()

        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()

            Img.SetValue(Image.SourceProperty, imgsource)

            Dim ef As New Effects.DropShadowEffect()

            ef.ShadowDepth = 10

            Img.Effect = ef

            AddHandler Img.MouseEnter, AddressOf img_MouseEnter

            Me.stakImages.Children.Add(Img)

        Next

        Me.dbAniTransform.From = 800

        Me.dbAniTransform.To = -600

        Me.photos.Begin()

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

download code
Enjoy weekend with Silverlight.

Thanks & Best Regards,

Rajat Jaiswal

Advertisements

3 thoughts on “Create Silverlight Gallery in easy steps part-1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s