Image Slideshow Control

• Download demo - 5.6 MB

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 myself. 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 maintained 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.

History

• 4^th June, 2014: Initial version