Click here to Skip to main content
Click here to Skip to main content

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

, 25 Jan 2008
Rate this:
Please Sign up or sign in to vote.
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

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

Share

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
Follow on   Twitter

Comments and Discussions

 
GeneralVery Nice Pinmembermerlin98129-Oct-07 3:23 
GeneralRe: Very Nice PinmemberAbhijit Jana29-Oct-07 22:22 
GeneralRe: Very Nice PinmemberDaniel Vaughan6-Dec-07 4:00 
GeneralRe: Very Nice PinmemberAbhijit Jana7-Dec-07 3:29 
GeneralRe: Very Nice PinmemberBrij2-Jan-09 1:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 26 Jan 2008
Article Copyright 2007 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid