Create Silverlight Gallery in easy steps part-II

Hello Friends,
Today I am going to share Silverlight Image gallery no 2.

Silverlight image gallery

 If you don’t have idea of Silverlight Image gallery no 1 then please refer link. part-1
So, here we go.

 The concept is same as we did earlier. We will show image thumbnails on left side in a wrap panel (new control in Silverlight 4 just downloads the Silverlight 4 toolkit if you don’t have) and right side panel we will show large image with some fade in/fade out feature as we did in our earlier Silverlight image gallery.
Although I am doing this thing with some fix values but you can use XML instead of that that will be great idea with quick steps.
Step 1:-
So basic concept is I copied all the images in a folder in Silverlight project and rename then with numbers like 1.jpg, 2.jpg and so on.
Step 2:-
Just design a page with two panels. Left panel is wrap panel and right panel is stack panel. In right panel we have a image control with some fade in /out feature using by Storyboard.
Step 3:-
  Add image controls at runtime in wrap panel according to image count as shown below.
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.spCollection.Children.Add(Img)
Next
We have added handler also on this image controls “Basically Mouse enter”
Step 4:-
On mouse enter event of image control we start the animation of fade in/fade out and replace the center image source with the new image source (The thumbnail on which we have clicked)
Private Sub img_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
        Me.StoryImage.Begin()
        Me.imgMain.Source = CType(sender, Image).Source
    End Sub

Step 5:-
  For auto image change we use a dispatcher Timer function which changes the center image in each 50 sec.  And increase the image counter by one and if image counter reached to max value then reset to 0.
Private Sub TimerClick(ByVal sender As System.Object, ByVal e As EventArgs) Handles timer.Tick
        If intcounter >= 8 Then
            intcounter = 0
        End If
        Me.StoryImage.Begin()
        Dim imgsource As ImageSource
        imgsource = New BitmapImage(New Uri(“images/” + intcounter.ToString() + “.jpg”, UriKind.Relative))
        Me.imgMain.Source = imgsource
        intcounter = intcounter + 1
    End Sub

Step 6:- run it.
For more information you can download the code from link.

I hope you will enjoy Silverlight Image Gallery part –II.

 
Code
Soon I will share more samples related to image gallery.
Enjoy Silverlight
Thanks & Best Regards
Rajat Jaiswal

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