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

Advertisements

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