Click here to Skip to main content
15,393,351 members
Articles / Web Development / ASP.NET
Posted 26 Oct 2007


35 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.76/5 (22 votes)
25 Jan 2008CPOL2 min read
A Microsoft website style notes control using a web usercontrol in ASP.NET and C#.

Screenshot - MainImage.jpg


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.


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:

Screenshot - Abtcodeproject.jpg.

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

Screenshot - visitlink.jpg


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

Main Properties

Screenshot - Property.jpg

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:

Screenshot - NoteSize.jpg

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:

Screenshot - HeaderText.jpg


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:

Screenshot - ImagePath.jpg


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:

Screenshot - ImagePathold.jpg


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:

Screenshot - backcolor.jpg

Using the Code

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

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

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:

Screenshot - About.jpg


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


About the Author

Abhijit Jana
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband

Blog : http://abhijitjana.net
Web Site : http://dailydotnettips.com
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide

Comments and Discussions

GeneralMy vote of 5 Pin
Sandesh M Patil14-Feb-11 23:57
MemberSandesh M Patil14-Feb-11 23:57 
GeneralMargin and alignment Pin
Xmen Real 3-Dec-10 17:45
professional Xmen Real 3-Dec-10 17:45 
GeneralVery Nice Pin
merlin98129-Oct-07 3:23
professionalmerlin98129-Oct-07 3:23 
GeneralRe: Very Nice Pin
Abhijit Jana29-Oct-07 22:22
professionalAbhijit Jana29-Oct-07 22:22 
GeneralRe: Very Nice Pin
Daniel Vaughan6-Dec-07 4:00
MemberDaniel Vaughan6-Dec-07 4:00 
GeneralRe: Very Nice Pin
Abhijit Jana7-Dec-07 3:29
professionalAbhijit Jana7-Dec-07 3:29 
GeneralRe: Very Nice Pin
Brij2-Jan-09 1:04
mentorBrij2-Jan-09 1:04 
GeneralSuggestion And FeedBack Pin
Abhijit Jana26-Oct-07 7:23
professionalAbhijit Jana26-Oct-07 7:23 
GeneralRe: Suggestion And FeedBack Pin
Thanks for all the fish26-Oct-07 8:58
MemberThanks for all the fish26-Oct-07 8:58 

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.