Click here to Skip to main content
13,667,943 members
Click here to Skip to main content
Add your own
alternative version


68 bookmarked
Posted 27 Feb 2008
Licenced CPOL

Image Gallery 1.0

, 29 Feb 2008
Rate this:
Please Sign up or sign in to vote.
An article on how to create an advanced web custom control for image display.


Image gallery 1.0 is a custom control with full design time support. This article will give you complete information on creating custom controls, complex properties, inner properties and smart tags, and how to provide design time support in custom controls. This control gives you the solution for showing images like BBC and CNN news websites do. It also provide the auto next (slide show) feature, and some image changing styles.

How to use

To use the Image Gallery 1.0 control on your website, you will need to add the control into the toolbox by right-clicking it, selecting 'Customize Toolbox', selecting the '.NET Framework Components' tab, and then clicking on the Browse button. Navigate to the ImageGallery.dll. This should add it to the toolbox. Then, just drag this control onto the page where you want the control to be.

Image Gallery 1.0 shows you how to add complex properties like GridViews.

<cc1:Gallery ID="Gallery1" runat="server">

    <NavigationItemBarItemStyle BackColor="#5F74A3" Height="20px" Width="20px" />
    <TitleStyle Font-Bold="True" Font-Size="16px" ForeColor="Black" />
    <NavigationItemBarSelectedItemStyle BackColor="#8C9FCA" Height="20px" Width="20px" />
    <NavigationBarStyle HorizontalAlign="Center" />
    <ImageStyle Height="300px" Width="400px" />
    <DescriptionStyle Font-Size="10px" Height="75px" />
    <NavigationItemBarHoverItemStyle BackColor="#8C9FCA" Height="20px" Width="20px" />
        <cc1:Image ImageUrl="~/images/p1.jpg" Selected="true" />
        <cc1:Image ImageUrl="~/images/p2.jpg" Selected="false" />
        <cc1:Image ImageUrl="~/images/p3.jpg" Selected="false" />                   

Details of some properties:

  • AutoNext: is used for automatically showing the next image after a specific time set in the AutoNextAfter property.
  • AutoNextAfter: is the auto-next time, in seconds.
  • DataSource: is used for binding images from a specific data source.
  • DataImageField: is the field in the data source which provides the image URL.
  • DataTitleField: is the field in the data source which provides the image title.
  • DataDescriptionField: is the field in the data source which provides the image description.
  • ShowTitle: is used for the setting the image title visibility.
  • ShowDescription: is used for the setting the image description visibility.
  • ShowNavigationBar: is used for the setting the navigation bar visibility.
  • ImageFolder: is used for setting the path of the image folder from which the user wants to display an image.
  • ImagesExtensions: contains the comma separated list of image extensions.
  • ImageChangeStyle: is used to set the image changing style.

How to add images

User can select or add images in three ways:

  1. Add images to an image collection. The Images property is used for adding images to the control.
  2. Select the path of the folder in which images exist, using the ImageFolder property.
  3. Using a data source

The Images property is used to store the collection of images. The Images property is a collection base; during design time, it will be an open collection editor.

The Images property is an inner property; so, we add a property level metadata attribute [PersistenceMode(PersistenceMode.InnerProperty)].

public ImageCollection Images
        if (_images == null)
            _images = new ImageCollection();
        return _images;

The ImageCollection class is inherited from the CollectionBase class and the CollectionBase class is used to create a custom collection.

public class ImageCollection : CollectionBase
    public Image this[int index]
        get{ return (Image)this.List[index];}
        set{this.List[index] = value;}
    public void Add(Image image)
        image.Index = this.List.Count;
    public void Insert(int index, Image image)
        this.List.Insert(index, image);
    public void Remove(Image image)
    public bool Contains(Image image)
        return this.List.Contains(image);

    public int IndexOf(Image image)
        return this.List.IndexOf(image);

    public void CopyTo(Array array, int index)
        this.List.CopyTo(array, index);

Smart Tag

This control provides full design-time support. You can also set the properties using a Smart Tag. The user can also apply some pre-defined styles using auto-format. This article explains how to create professional a Smart Tag.

For creating a Smart Tag, create a designer class and inherit it from System.Web.UI.Design.ControlDesigner. The designer class handles the behavior of a control on the design surface. We can override methods of the ControlDesigner class for design-time support. In this article, I will explain only one method, which is used to handle a Smart Tag. For displaying a Smart Tag, we override the ActionLists property of the ControlDesigner class.

class GalleryDesigner : System.Web.UI.Design.ControlDesigner
    DesignerActionListCollection _actionList = null;
    public override DesignerActionListCollection ActionLists
            if (_actionList == null)
                _actionList = new DesignerActionListCollection();
                _actionList.Add( new GalleryActionList(this));
            return _actionList;

ActionLists returns the list of all actions which show on the Smart Tag. In this article, we get this list from GalleryActionList, which is inherited from the System.ComponentModel.Design.DesignerActionList class, and we override its method GetSortedActionItems() as shown below:

class GalleryActionList : System.ComponentModel.Design.DesignerActionList

    public override DesignerActionItemCollection GetSortedActionItems()

        DesignerActionItemCollection list = new DesignerActionItemCollection();
        list.Add(new DesignerActionMethodItem(this, "ShowAutoFormat", 
                 "Auto Format...", "Format"));            
        list.Add(new DesignerActionMethodItem(this, "EditImages", 
                 "Images...", "images"));
        list.Add(new DesignerActionPropertyItem("ShowTitle", 
                 "Show Title", "Other"));
        list.Add(new DesignerActionPropertyItem("ShowDescription", 
                 "Show Description", "Other"));

        return list;


Points of interest

During the development of this control, I found one major issue which was how to add images from a Smart Tag. I tried to solve it through many ways, but was unable to solve it successfully, because changes from the Smart Tag were not reflecting properly on the page. Finally, I got a solution from a forum. The solution is available in the EditorServiceContext.cs file.


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


About the Author

Shakeel Iqbal
Software Developer (Senior) TEO
Pakistan Pakistan
Passion and positive dedication is essential part of success. I believe on hardworking and sharing knowledge with others. I always try to be a better than I am and think positive for positive result.

My Blogs

My Linked-In Profile

You may also be interested in...

Comments and Discussions

QuestionAdd function Pin
daniel campuzano5-Feb-13 1:12
memberdaniel campuzano5-Feb-13 1:12 
GeneralMy vote of 4 Pin
lmkdev30-Nov-11 22:44
memberlmkdev30-Nov-11 22:44 
GeneralTwo copies of the control on the one page does not increment correctly Pin
garethwilliams7-Oct-10 1:07
membergarethwilliams7-Oct-10 1:07 
Generalfive ***** from me ;) Pin
hammad3218-Jan-10 6:07
memberhammad3218-Jan-10 6:07 
GeneralRe: five ***** from me ;) Pin
Shakeel Iqbal18-Jan-10 6:45
memberShakeel Iqbal18-Jan-10 6:45 
Generalclick and pass url Pin
jinboh1-Jan-10 5:11
memberjinboh1-Jan-10 5:11 
GeneralRe : Image Starts from 1 not 0 Pin
Member 7509852-Dec-09 6:28
memberMember 7509852-Dec-09 6:28 
GeneralRe : Page Navigation bar Top Pin
Member 75098516-Nov-09 4:37
memberMember 75098516-Nov-09 4:37 
GeneralRe: Re : Page Navigation bar Top Pin
Shakeel Iqbal17-Nov-09 6:14
memberShakeel Iqbal17-Nov-09 6:14 
QuestionImage Style For Each Different Image? Pin
isidat25-Aug-09 4:28
memberisidat25-Aug-09 4:28 
AnswerRe: Image Style For Each Different Image? Pin
Shakeel Iqbal26-Aug-09 20:33
memberShakeel Iqbal26-Aug-09 20:33 
GeneralAdd function Pin
daniel campuzano5-Feb-13 1:11
memberdaniel campuzano5-Feb-13 1:11 
QuestionHow can I make the image at the center of the image container? Pin
isidat23-Aug-09 13:32
memberisidat23-Aug-09 13:32 
AnswerRe: How can I make the image at the center of the image container? Pin
Shakeel Iqbal23-Aug-09 21:36
memberShakeel Iqbal23-Aug-09 21:36 
GeneralRe: How can I make the image at the center of the image container? Pin
isidat24-Aug-09 0:10
memberisidat24-Aug-09 0:10 
QuestionHi, Can you give the Image more effect? Pin
JLKEngine00814-Sep-08 16:48
memberJLKEngine00814-Sep-08 16:48 
memberRABIA ANWER MAGRAY31-Aug-08 8:15 
memberRABIA ANWER MAGRAY31-Aug-08 8:07 
GeneralHelp is required! Pin
Sobia Saeed Magray9-Jun-08 19:16
memberSobia Saeed Magray9-Jun-08 19:16 
Generaldatasource Pin
TaTes7-Jun-08 13:01
memberTaTes7-Jun-08 13:01 
Generalnice work Pin
TaTes4-Jun-08 2:38
memberTaTes4-Jun-08 2:38 
GeneralRe: nice work Pin
Shakeel Iqbal4-Jun-08 2:44
memberShakeel Iqbal4-Jun-08 2:44 
GeneralNice Article Pin
Akajasimafat3-Apr-08 7:21
memberAkajasimafat3-Apr-08 7:21 
GeneralExcellent work Pin
Afaak24-Mar-08 6:49
memberAfaak24-Mar-08 6:49 
GeneralNice control but AutoNext doesn´t work Pin
Glauter18-Mar-08 7:21
memberGlauter18-Mar-08 7:21 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05-2016 | 2.8.180820.1 | Last Updated 1 Mar 2008
Article Copyright 2008 by Shakeel Iqbal
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid