Simple Image Scroller Slide Show using Silverlight ListBox control


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

Advertisements

37 thoughts on “Simple Image Scroller Slide Show using Silverlight ListBox control

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

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

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

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

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

  5. 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,

  6. 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….

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

  8. 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!!

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

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

  11. Error 3 Closing tag for element ” was not found. D:\dotnet\wcf\SilverSlideShow\SilverSlideShow\MainPage.xaml 33 5 SilverSlideShow

  12. Error 5 The attachable property ‘ItemsPanel’ was not found in type ‘ListBox’. D:\dotnet\wcf\SilverSlideShow\SilverSlideShow\MainPage.xaml 19 14 SilverSlideShow

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

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

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

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

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

  17. NIce work on the slideshow. I was wondering how can you add categories to this whereas you have more than one photo album

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