Image Gallery 1.0

• Download demo - 1.28 MB

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.