Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Article

Image Gallery 1.0

Rate me:
Please Sign up or sign in to vote.
3.47/5 (36 votes)
29 Feb 2008CPOL3 min read 96.6K   1.7K   69   33
An article on how to create an advanced web custom control for image display.

Image 1

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.

ASP.NET
<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

Image 2

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.

Image 3

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

C#
[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.

C#
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.

Image 4

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.

C#
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:

C#
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)


Written By
Chief Technology Officer
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

Comments and Discussions

 
AnswerRe: Image Style For Each Different Image? Pin
Shakeel Iqbal26-Aug-09 20:33
Shakeel Iqbal26-Aug-09 20:33 
GeneralAdd function Pin
daniel campuzano5-Feb-13 1:11
daniel campuzano5-Feb-13 1:11 
QuestionHow can I make the image at the center of the image container? Pin
isidat23-Aug-09 13:32
isidat23-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
Shakeel 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
isidat24-Aug-09 0:10 
QuestionHi, Can you give the Image more effect? Pin
JLKEngine00814-Sep-08 16:48
JLKEngine00814-Sep-08 16:48 
GeneralCITIES/TOWNS IN KASHMIR NAMED MAGRAY Pin
RABIA ANWER MAGRAY31-Aug-08 8:15
RABIA ANWER MAGRAY31-Aug-08 8:15 
GeneralMAGRAY- A MARTIAL& A WARRIOR KASHMIRI TRIBE/CASTE/RACE Pin
RABIA ANWER MAGRAY31-Aug-08 8:07
RABIA ANWER MAGRAY31-Aug-08 8:07 
GeneralHelp is required! Pin
Sobia Saeed Magray9-Jun-08 19:16
Sobia Saeed Magray9-Jun-08 19:16 
Generaldatasource Pin
TaTes7-Jun-08 13:01
TaTes7-Jun-08 13:01 
Generalnice work Pin
TaTes4-Jun-08 2:38
TaTes4-Jun-08 2:38 
GeneralRe: nice work Pin
Shakeel Iqbal4-Jun-08 2:44
Shakeel Iqbal4-Jun-08 2:44 
GeneralNice Article Pin
akadiwala3-Apr-08 7:21
akadiwala3-Apr-08 7:21 
GeneralExcellent work Pin
Afaak24-Mar-08 6:49
Afaak24-Mar-08 6:49 
GeneralNice control but AutoNext doesn´t work Pin
Glauter18-Mar-08 7:21
Glauter18-Mar-08 7:21 
GeneralRe: Nice control but AutoNext doesn´t work Pin
Shakeel Iqbal18-Mar-08 19:06
Shakeel Iqbal18-Mar-08 19:06 
GeneralDoesn't work Pin
Rogic1-Mar-08 2:17
Rogic1-Mar-08 2:17 
GeneralRe: Doesn't work Pin
Shakeel Iqbal1-Mar-08 5:32
Shakeel Iqbal1-Mar-08 5:32 
GeneralGood Work Pin
Aamir Mustafa1-Mar-08 1:17
Aamir Mustafa1-Mar-08 1:17 
GeneralRe: Good Work Pin
Shakeel Iqbal1-Mar-08 2:17
Shakeel Iqbal1-Mar-08 2:17 
GeneralGood Work Pin
Aamir Mustafa28-Feb-08 20:23
Aamir Mustafa28-Feb-08 20:23 
GeneralRe: Good Work Pin
Shakeel Iqbal28-Feb-08 23:39
Shakeel Iqbal28-Feb-08 23:39 
GeneralNice control,Man keep it UP Pin
Member 419660228-Feb-08 18:24
Member 419660228-Feb-08 18:24 

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.