Click here to Skip to main content
Click here to Skip to main content

Image Slideshow Control

, 4 Jun 2014
Rate this:
Please Sign up or sign in to vote.
A Windows Forms control to view images in a slide show with captions.

Introduction

As a web developer I regularly use various image slider plugins to rotate images. With a wide range of plugins to choose from, there is never a need to develop one of my self. However when working on a recent Windows Forms application, I was unable to find a similar control or at least with some of the functionality I wanted. Not wanting to spend a great deal of time searching, I decided to develop my own.

How The Control Works

The ImageSlider control inherits from the Panel control and its OnPaint method has been overwritten so that it can draw an image on the Panel's surface. Images and captions are maintain internally in a List collection of type string and Image. Using a List collection, makes it easy to access an element using an index. The ImageSlider navigation buttons as seen in the screenshot above, simply increment or decrement an internal index. Each time a navigation button is clicked, the Invalidate() method of the Panel is called, which executes the OnPaint() method. The OnPaint method, uses the new index value to look-up the image path and caption from its respective collection and loads the new image and caption.

Additionally, the OnPaint() method is responsible for animating the caption text using a Timer. The timer is started when a navigation button is clicked and disposed of when the animation finishes.

Below is a list of methods and properties.

Properties

  • CaptionHeight - Sets the height of the caption area.
  • CaptionTextLeft - Sets the left position of the caption text relative to the caption area.
  • CaptionBackgrounColor - Sets the caption background color.
  • CaptionOpacity - Sets the caption background opacity.
  • CaptionAnimationSpeed - Sets the scroll speed of the caption text.
  • Animation - Boolean value to turn animation on or off.
  • LeftButton - Returns the left navigation button, so that properties of the button can be configured.
  • RightButton - Returns the right navigation button, so that properties of the button can be configured.

Methods

  • AddImage(string path)
  • AddImage(string path, string caption)
  • AddImage(string path, string caption, Color captionBackgroundColor)
  • AddImage(Image path)
  • AddImage(Image path, string caption)
  • AddImage(Image path, string caption, Color captionBackgroundColor)

Using The Code

Create a new instance of the ImageSlider control. Use the AddImage method to add images to the ImageSlider. The AddImage() method has three overloads. You can add an image without a caption or you can set a caption for an image. The third argument allows you to set the background color for the caption area.

imageSlider1.AddImage("Chrysanthemum.jpg", "A caption for the image goes here", Color.Maroon);  
imageSlider1.AddImage("Desert.jpg", "What an amazing photo.", Color.Gold);  
imageSlider1.AddImage("Hydrangeas.jpg", "For me?...blush blush", Color.LimeGreen);  
imageSlider1.AddImage("Jellyfish.jpg", "So... what sort of fish are you again?", Color.Orange);  
imageSlider1.AddImage("Koala.jpg", "Will you be my friend?", Color.Gray);  
imageSlider1.AddImage("Lighthouse.jpg", "Must be a great view from up there");  
imageSlider1.AddImage("Penguins.jpg", "Fish anyone?", Color.Navy);  
imageSlider1.AddImage(Image.FromFile("Tulips.jpg"), "You cant go wrong with tulips", Color.LightSkyBlue); 

This brings me to the end of this article. Please feel free to leave your comments and suggestions. You can follow me at www.snippetbank.net.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Syed M Hussain
Web Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
QuestionHaw do I animating images similar capture texts ? PinmemberEng Ahmadi6-Jun-14 19:19 
AnswerRe: Haw do I animating images similar capture texts ? PinpremiumSyed M Hussain7-Jun-14 1:13 
GeneralMy vote of 5 PinprofessionalJCahyaatnttearjee5-Jun-14 20:25 
GeneralMy vote of 5 PinpremiumPrasad Khandekar4-Jun-14 23:17 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun4-Jun-14 22:39 
QuestionHow to do the same for images from database? PinmemberPrasanna Kumar Muduli4-Jun-14 16:45 
AnswerRe: How to do the same for images from database? PinpremiumSyed M Hussain4-Jun-14 22:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 5 Jun 2014
Article Copyright 2014 by Syed M Hussain
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid