5,445,109 members and growing! (13,678 online)
Email Password   helpLost your password?
Web Development » Custom Controls » General     Intermediate License: The Code Project Open License (CPOL)

Image Gallery 1.0

By Shakeel Iqbal

An article on how to create an advanced web custom control for image display.
C# (C# 2.0, C#), Windows (Windows, WinXP), .NET (.NET, .NET 2.0), ASP.NET

Posted: 27 Feb 2008
Updated: 1 Mar 2008
Views: 10,651
Bookmarked: 39 times
Announcements
Want a new Job?



Search    
Advanced Search
Sitemap
Prize winner in Competition "Best ASP.NET article of February 2008"
27 votes for this Article.
Popularity: 4.53 Rating: 3.17 out of 5
6 votes, 22.2%
1
1 vote, 3.7%
2
3 votes, 11.1%
3
2 votes, 7.4%
4
15 votes, 55.6%
5

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)

About the Author

Shakeel Iqbal


i have been working in software house as software developer since Jan, 2006. i have worked on many web and windows projects. My hobbies are to read books and develop my own small utilities.
Occupation: Software Developer
Company: TEO
Location: Pakistan Pakistan

Other popular Custom Controls articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 17 of 17 (Total in Forum: 17) (Refresh)FirstPrevNext
Subject  Author Date 
GeneralCITIES/TOWNS IN KASHMIR NAMED MAGRAYmemberRABIA ANWER MAGRAY9:15 31 Aug '08  
GeneralMAGRAY- A MARTIAL& A WARRIOR KASHMIRI TRIBE/CASTE/RACEmemberRABIA ANWER MAGRAY9:07 31 Aug '08  
GeneralHelp is required!memberSobia Saeed Magray20:16 9 Jun '08  
GeneraldatasourcememberTaTes14:01 7 Jun '08  
Generalnice workmemberTaTes3:38 4 Jun '08  
GeneralRe: nice workmemberShakeel Iqbal3:44 4 Jun '08  
GeneralNice ArticlememberAkajasimafat8:21 3 Apr '08  
GeneralExcellent workmemberAfaak7:49 24 Mar '08  
GeneralNice control but AutoNext doesn´t workmemberGlauter8:21 18 Mar '08  
GeneralRe: Nice control but AutoNext doesn´t workmemberShakeel Iqbal20:06 18 Mar '08  
GeneralDoesn't workmemberRogic3:17 1 Mar '08  
GeneralRe: Doesn't workmemberShakeel Iqbal6:32 1 Mar '08  
GeneralGood WorkmemberAamir Mustafa2:17 1 Mar '08  
GeneralRe: Good WorkmemberShakeel Iqbal3:17 1 Mar '08  
GeneralGood WorkmemberAamir Mustafa21:23 28 Feb '08  
GeneralRe: Good WorkmemberShakeel Iqbal0:39 29 Feb '08  
GeneralNice control,Man keep it UPmemberMember 419660219:24 28 Feb '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 1 Mar 2008
Editor: Smitha Vijayan
Copyright 2008 by Shakeel Iqbal
Everything else Copyright © CodeProject, 1999-2008
Web13 | Advertise on the Code Project