Notes: An MSDN Websites Style Custom Notes Control in ASP.NET and C#

• Download source code - 6.74 KB

Introduction

This is a simple custom notes control like in the Microsoft webpage here. In the MSDN website, we can see there is a special control that displays simple notes, important points, security tips, etc. This custom control will help you design controls in your websites with a custom color, message, and icon.

Background

This custom control is a Web usercontrol designed in ASP.NET and C#. We can use it in our web sites to improve the look and feel of our sites. It is very simple to use. Just drag and drop the control inside a panel and set its properties. We can use a custom length message like this:

.

and we can use a link on the notes like this:

Designing

This is a custom web user control. It contains properties which can be set for using the control.

Main Properties

Notes Size

This control has there fixed sizes like Short, Medium, and Long. By default, the size is Medium. We can set the size at runtime or design time based on our requirement.

It can be accessed like:

Header Text

We can use this to set the caption, to give header text like "Notes", "Tips", "Security", etc. This can be set at runtime as well as design time.

It can be accessed like:

Description

This property will set the description of your notes, like you set the header text as "Notes" and description as "Your description". It can be set at runtime as well as design time.

It can be accessed like:

ImagePath

This will set the image of your notes; you can use your custom image, and it should be a 16*16 size, otherwise it will overlap. You can set the path at runtime as well as design time.

It can be accessed like:

BackColor

You can set a custom color for your notes. Try to use a light color which will look good. You can use System.Drawing.Color.ColorName, or you can use Using System.Drawing and set the color as Color.ColorName at runtime or design time.

It can be accessed like:

Using the Code

//Code to design the property 
#region PropertySet
//Property for Set Notes Size
//It either Short, Long or Medium
public String NotesSize
{
    get
    {
        return notesSize; 
    }
    set
    {
        notesSize = value;
    }
}
//Property For Header Text
public string HeaderText
{
    get
    {
        return Txt; 
    }
    set
    {
        Txt = value;
    }
}
//Property For Description
public string Description
{
    get
    {
        return Desc ;
    }
    set
    {
        Desc = value;
    }
}
//Property For Backcolor
public Color BackColor
{
    get
    {
        return backColor; 
    }
    set
    {
        backColor = value; 
    }
}
//Property For ImagePath
public string imagePath
{
    get
    {
        return iPath;
    }
    set
    {
        iPath = value;
    }
}
#endregion

//In main Webpage you can access by
//
protected void Page_Load(object sender, EventArgs e)
{
# region Notes1
    //Creating one Notes
    // Specify the Size of Notes
    Notes1.NotesSize = "Short";
    // Image and it should be 16*16 
    Notes1.imagePath = "Notes.gif";
    //Give the Title of Notes
    Notes1.HeaderText = "About Developer";
    //Write Your Description
    Notes1.Description = "Developed By : Abhijit Jana ";
    // Set the Color 
    Notes1.BackColor = System.Drawing.Color.LightCyan; 
#endregion
}

Points of Interest

We can use a custom color for it, which means we can change the color based on our website color. I have provided the source code above, you can customize it however you like.

And finaly we can also use it like: