Last week I was working on a image scroll-er slide show using silverlight listbox control and it worked great and I thought I’d share this.
Click here to view the live demo (images may take a while to load)
Click here to download the article
If you find the Image Scroller code library useful, please consider donating
Xaml C# Code
public class ImageScroller { public string Url { get; set; } } public partial class ImageGallery : UserControl { int index = 0; void StartSlideShow() { DispatcherTimer timer = new DispatcherTimer(); timer.Interval = TimeSpan.FromMilliseconds(2500); //delayed for 2.5 seconds timer.Tick += (sender, e) => { lbScrollGallery.ScrollIntoView(lbScrollGallery.Items[index]); //scroll to the current item lbScrollGallery.SelectedIndex = index; //highlight the selected item in the list box scroller ImageScroller item = (ImageScroller)lbScrollGallery.Items[index]; // getting the current item imgPreview.Source = new BitmapImage(new Uri(item.Url, UriKind.Relative)); if (index < lbScrollGallery.Items.Count - 1) { index++; } else { lbScrollGallery.ScrollIntoView(lbScrollGallery.Items[0]); //scroll to the first item index = 0; //reset the index when it reaches to the last item } }; timer.Start(); } public ImageGallery() { InitializeComponent(); LoadImages(); StartSlideShow(); } void LoadImages() { lbScrollGallery.ItemsSource = new List<ImageScroller> { new ImageScroller { Url = "images/Chrysanthemum.jpg" }, new ImageScroller { Url = "images/Desert.jpg" }, new ImageScroller { Url = "images/Hydrangeas.jpg" }, new ImageScroller { Url = "images/Jellyfish.jpg" }, new ImageScroller { Url = "images/Koala.jpg" }, new ImageScroller { Url = "images/Lighthouse.jpg" }, new ImageScroller { Url = "images/Penguins.jpg" }, new ImageScroller { Url = "images/Tulips.jpg" } }; imgPreview.Source = new BitmapImage(new Uri("images/Chrysanthemum.jpg", UriKind.Relative)); //load default image while page loads } void ScrollerSelectionChanged(object sender, SelectionChangedEventArgs e) { ListBox listbox = (ListBox)sender; ImageScroller item = (ImageScroller)listbox.SelectedItem; if(item != null && ! string.IsNullOrEmpty(item.Url)) { imgPreview.Source = new BitmapImage(new Uri(item.Url, UriKind.Relative)); index = listbox.SelectedIndex; lbScrollGallery.ScrollIntoView(lbScrollGallery.Items[index]); } } }
Hope this help and If you have any comments, please feel free to write your feedback.
Click here to view the live demo (images may take a while to load)
You can download the entire article from here
If you find the Image Scroller code library useful, please consider donating
Thanks
Deepu
Deepu,
thank you so much for sharing this app! I have been having a hard time to find something simple that works well and that I can understand since I am new to Silverlight and C#.
.mc
Deepu,
looks good but all I get is a message “this project has no startup scene……”
and all I get is a blank page. Any clues?
Hi Tony,
Please refer http://social.expression.microsoft.com/Forums/en/blend/thread/ad705525-4c3e-406d-9059-4831e166b44e
Thanks
Deepu
Just want to say what a great blog you got here!
I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!
Thumbs up, and keep it going!
Cheers
Christian, iwspo.net
Thanks Christian, Appreciated your feedback…
Regards
Deepu
I came up with this error:
The name ‘lbScrollGallery’ does not exists in the current context in MainPage.xaml.cs file?
Any help would be appreciated.
lbScrollGallery does exist in the ImageGallery.xaml file…
If you view the App.xaml file I have set the default xaml file as ImageGallery.xaml
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new ImageGallery();
}
Please let me know if you have any issues
Thanks
Deepu
Hello Deepu,
I am using your application, I want to navigate to a url when clicked on any image on the scroller instead of viewing it bigger in Grid. When ever any image is clicked from scroller it should navigate to url.
how can i implement that functionality into your code.
Can you help.
Thanks in advance.
Namrata.
Hi Namrata,
I have emailed the modified source code
Let me know if you need any help..
Thanks
Deepu
Hello Deepu,
Thanks for reply, I am new to silver light. Your solution is really helpful.
Can I make it also run in the sideshow.
Along with the providing links when clicked on particular image.
Thanks,
Yes Certainly
Thanks
Deepu
Pingback: Silverlight Integration in MOSS 2007 with out WebPart « Deepu MI's Blog
This is very nice article, can we use array for the imagescroller
Hi Deepu,
I am not able to dowmload source code. can u please forward the whole code so that i can use.
thanks for advance….
Done…
Thanks
Deepu
Hi!
I´m new in SL + C# and my problem is, that the gallery starts, but the pictures will not show on the screen. I have add the images in project and use also the same path.
Thank you very much for your help!!
Are you able to run my sample application
Thanks
Deepu
I have the same problem. I’m using Visual Studio 2010. Thank you!!
SOLVED!
Hello deepu its great work, m new to SL.. i converted ur code as to work as slide with both side arrows… front and back… now i want that slide to happen like iphone scroll… ie… smooth sliding… and stops slowly… without sudden stop… slowly it needs to stop…
if possible help me.. thanks in advance!!
You may try some thing similar in silverlight.net site
well my name is sandehs ..
and i m a part of the company ..
i want to standy this silverlight tools 0r applications ,… above code , whr i have to put this .. pls help me regarding this issue… i wil be great thank full u guys …
sndesh@indiatimes.com
You can take those files and add in to your existing application..
Thanks
Deepu
very nice article..keep it!
Hi ,
Just started using SL. Trying your app and it seems to work for me, but I cant see the pic at the bottom just above the scrollbar. I see that something is highlighted, but the pic/image can not be seen. Otherthan that it all works fine. Can you help me out with this issue
Jeh,
The attached sample is a working one… I am not sure.. what issue you are facing.. can you send me your code ?
Thanks
Deepu
Error 3 Closing tag for element ” was not found. D:\dotnet\wcf\SilverSlideShow\SilverSlideShow\MainPage.xaml 33 5 SilverSlideShow
Error 5 The attachable property ‘ItemsPanel’ was not found in type ‘ListBox’. D:\dotnet\wcf\SilverSlideShow\SilverSlideShow\MainPage.xaml 19 14 SilverSlideShow
sir i want bind selected item in listbox (images item) so plz me replay ..
Nice Article. I have implemented it. Thanks for Sharing.
thanks for nice app been, searching for it.
can I use it for directing to perticular page?
Im getting few errors in this code. can u help me??
as im new to silverlight and c#
are u missing an assembly reference or using a directive…
The name lbScrollGallery does not exist in the current context
Hi Deepu
I am absolutely new to Silverlight and know nothing about C#. Any chance of getting silverlight sample in VB.net for your example (Image Scroller Slide Show)illustrated above ?
Thanks in advance
Tom,
I have used the online translator tool for converting my C# code to vb.net
http://www.developerfusion.com/tools/convert/csharp-to-vb/
http://www.carlosag.net/tools/codetranslator/
http://converter.telerik.com/
Public Partial Class ImageGallery
Inherits UserControl
Private index As Integer = 0
Private Sub StartSlideShow()
Dim timer As New DispatcherTimer()
timer.Interval = TimeSpan.FromMilliseconds(2500)
‘delayed for 2.5 seconds
timer.Tick += Function(sender, e)
lbScrollGallery.ScrollIntoView(lbScrollGallery.Items(index))
‘scroll to the current item
lbScrollGallery.SelectedIndex = index
‘highlight the selected item in the list box scroller
Dim item As ImageScroller = DirectCast(lbScrollGallery.Items(index), ImageScroller)
‘ getting the current item
imgPreview.Source = New BitmapImage(New Uri(item.Url, UriKind.Relative))
If index < lbScrollGallery.Items.Count – 1 Then
index += 1
Else
lbScrollGallery.ScrollIntoView(lbScrollGallery.Items(0))
'scroll to the first item
'reset the index when it reaches to the last item
index = 0
End If
End Function
timer.Start()
End Sub
Public Sub New()
InitializeComponent()
LoadImages()
StartSlideShow()
End Sub
Private Sub LoadImages()
lbScrollGallery.ItemsSource = New List(Of ImageScroller)() From { _
New ImageScroller() With { _
Key .Url = "images/Chrysanthemum.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Desert.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Hydrangeas.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Jellyfish.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Koala.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Lighthouse.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Penguins.jpg" _
}, _
New ImageScroller() With { _
Key .Url = "images/Tulips.jpg" _
} _
}
imgPreview.Source = New BitmapImage(New Uri("images/Chrysanthemum.jpg", UriKind.Relative))
'load default image while page loads
End Sub
Private Sub ScrollerSelectionChanged(sender As Object, e As SelectionChangedEventArgs)
Dim listbox As ListBox = DirectCast(sender, ListBox)
Dim item As ImageScroller = DirectCast(listbox.SelectedItem, ImageScroller)
If item IsNot Nothing AndAlso Not String.IsNullOrEmpty(item.Url) Then
imgPreview.Source = New BitmapImage(New Uri(item.Url, UriKind.Relative))
index = listbox.SelectedIndex
lbScrollGallery.ScrollIntoView(lbScrollGallery.Items(index))
End If
End Sub
End Class
Public Class ImageScroller
Public Property Url() As String
Get
Return m_Url
End Get
Set
m_Url = Value
End Set
End Property
Private m_Url As String
End Class
Hope this helps
Thanks
Deepu
Thanks a lot Deepu,
Now that , i extracted the relevant details to my home.xaml.vb & adjusted the code to suit the enviorment , one problem remains -‘Tick’ event in the Timer (line 14). The system says it z not an event so i declared an Event handler as suggested.
Public Event Tick As EventHandler
The error still prevails, any tips , any one
Thanks in advance
Tom
Hi Deepu n All his Blog users
I cracked the above problem n I thought itz worth sharing, at least from some VB.Net people
I made some adjustments to your StartSlideShow class ..
Private Sub StartSlideShow()
Dim timer As New DispatcherTimer()
timer.Interval = TimeSpan.FromMilliseconds(2500)
AddHandler timer.Tick, AddressOf Me.Dtimer_Click
timer.Start()
End Sub
Private Sub Dtimer_Click(sender As Object, e As EventArgs)
lbScrollGallery.ScrollIntoView(lbScrollGallery.Items(index))
lbScrollGallery.SelectedIndex = index
Dim item As ImageScroller = DirectCast(lbScrollGallery.Items(index), ImageScroller)
imgPreview.Source = New BitmapImage(New Uri(item.Url, UriKind.Relative))
If index < lbScrollGallery.Items.Count – 1 Then
index += 1
Else
lbScrollGallery.ScrollIntoView(lbScrollGallery.Items(0))
index = 0
End If
End Sub
Regards
Tom
NIce work on the slideshow. I was wondering how can you add categories to this whereas you have more than one photo album