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

Image Gallery 1.0

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

Introduction

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" />
    
    <Images>
        <cc1:Image ImageUrl="~/images/p1.jpg" Selected="true" />
        <cc1:Image ImageUrl="~/images/p2.jpg" Selected="false" />
        <cc1:Image ImageUrl="~/images/p3.jpg" Selected="false" />                   
    </Images>
    
</cc1:Gallery>

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)].

[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
[PersistenceMode(PersistenceMode.InnerProperty)]
[Description("Images")]
public ImageCollection Images
{
    get
    {
        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;
        this.List.Add(image);
    }
    
    public void Insert(int index, Image image)
    {
        this.List.Insert(index, image);
    }
    
    public void Remove(Image image)
    {
        this.List.Remove(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
    {
        get
        {
            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
{
    #region OVERRIDED METHODS

    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;
    }

    #endregion
}

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.

License

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

Share

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
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionAdd function Pinmemberdaniel campuzano5-Feb-13 1:12 
GeneralMy vote of 4 Pinmemberlmkdev30-Nov-11 22:44 
GeneralTwo copies of the control on the one page does not increment correctly Pinmembergarethwilliams7-Oct-10 1:07 
Generalfive ***** from me ;) Pinmemberhammad3218-Jan-10 6:07 
GeneralRe: five ***** from me ;) PinmemberShakeel Iqbal18-Jan-10 6:45 
Generalclick and pass url Pinmemberjinboh1-Jan-10 5:11 
GeneralRe : Image Starts from 1 not 0 PinmemberMember 7509852-Dec-09 6:28 
GeneralRe : Page Navigation bar Top PinmemberMember 75098516-Nov-09 4:37 
GeneralRe: Re : Page Navigation bar Top PinmemberShakeel Iqbal17-Nov-09 6:14 
QuestionImage Style For Each Different Image? Pinmemberisidat25-Aug-09 4:28 
AnswerRe: Image Style For Each Different Image? PinmemberShakeel Iqbal26-Aug-09 20:33 
GeneralAdd function Pinmemberdaniel campuzano5-Feb-13 1:11 
QuestionHow can I make the image at the center of the image container? Pinmemberisidat23-Aug-09 13:32 
AnswerRe: How can I make the image at the center of the image container? PinmemberShakeel Iqbal23-Aug-09 21:36 
GeneralRe: How can I make the image at the center of the image container? Pinmemberisidat24-Aug-09 0:10 
QuestionHi, Can you give the Image more effect? PinmemberJLKEngine00814-Sep-08 16:48 
GeneralCITIES/TOWNS IN KASHMIR NAMED MAGRAY PinmemberRABIA ANWER MAGRAY31-Aug-08 8:15 
GeneralMAGRAY- A MARTIAL& A WARRIOR KASHMIRI TRIBE/CASTE/RACE PinmemberRABIA ANWER MAGRAY31-Aug-08 8:07 
GeneralHelp is required! PinmemberSobia Saeed Magray9-Jun-08 19:16 
Generaldatasource PinmemberTaTes7-Jun-08 13:01 
Generalnice work PinmemberTaTes4-Jun-08 2:38 
GeneralRe: nice work PinmemberShakeel Iqbal4-Jun-08 2:44 
GeneralNice Article PinmemberAkajasimafat3-Apr-08 7:21 
GeneralExcellent work PinmemberAfaak24-Mar-08 6:49 
GeneralNice control but AutoNext doesn´t work PinmemberGlauter18-Mar-08 7:21 

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 | Terms of Use | Mobile
Web01 | 2.8.141030.1 | Last Updated 1 Mar 2008
Article Copyright 2008 by Shakeel Iqbal
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid