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
#region PropertySet
public String NotesSize
{
get
{
return notesSize;
}
set
{
notesSize = value;
}
}
public string HeaderText
{
get
{
return Txt;
}
set
{
Txt = value;
}
}
public string Description
{
get
{
return Desc ;
}
set
{
Desc = value;
}
}
public Color BackColor
{
get
{
return backColor;
}
set
{
backColor = value;
}
}
public string imagePath
{
get
{
return iPath;
}
set
{
iPath = value;
}
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
# region Notes1
Notes1.NotesSize = "Short";
Notes1.imagePath = "Notes.gif";
Notes1.HeaderText = "About Developer";
Notes1.Description = "Developed By : Abhijit Jana ";
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: