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

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 47.6K   35   9
A Microsoft website style notes control using a web usercontrol in ASP.NET and C#.

Screenshot - MainImage.jpg

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:

Screenshot - Abtcodeproject.jpg.

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

Screenshot - visitlink.jpg

Designing

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

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:

Screenshot - ImagePath.jpg

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:

Screenshot - ImagePathold.jpg

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:

Screenshot - backcolor.jpg

Using the Code

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

Screenshot - About.jpg

License

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


Written By
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
Sandesh 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 
The icon should have 5px margin on the right side as well as it should be vertically center to the title text Wink | ;)


TVMU^P[[IGIOQHG^JSH`A#@`RFJ\c^JPL>;"[,*/|+&WLEZGc`AFXc!L
%^]*IRXD#@GKCQ`R\^SF_WcHbORY87֦ʻ6ϣN8ȤBcRAV\Z^&SU~%CSWQ@#2
W_AD`EPABIKRDFVS)EVLQK)JKQUFK[M`UKs*$GwU#QDXBER@CBN%
R0~53%eYrd8mt^7Z6]iTF+(EWfJ9zaK-i’TV.C\y<pŠjxsg-b$f4ia>

-----------------------------------------------
128 bit encrypted signature, crack if you can

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
Daniel 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
Thanks 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.