Explanation:
1.
Create a New Project. Select “Web Control
Library” Type from the Project Templates.
2.
Name your Control any suitable name. We are calling
our Project “KamalRolloverImageButton”.
3.
Change default Property Attribute of the Class from
Text to ImageUrl
4.
Change the ToolboxData Attribute
according to your will. Our both Attributes look like following:
[DefaultProperty("ImageUrl")]
[ToolboxData("<{0}:RolloverImageButton
runat=server> </{0}:RolloverImageButton>")]
5.
You will notice that the default Class “WebCustomControl1”
is inherited from “WebControl”
6.
Rename the Class file name to “RolloverImageButton.cs”
this will also Change Class name to “RolloverImageButton”.
Change Base class of said Class to “ImageButton”.
7.
Remove “Text” Property
and “RenderContents”Eventfrom the Class.
8.
Add new Custom Property to the Class call it
“ImageOverUrl”
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public virtual
string ImageOverUrl
{
get
{
if (null == ViewState["ImageOverUrl"])
return string.Empty;
else
return Convert.ToString(ViewState["ImageOverUrl"]);
}
set { ViewState["ImageOverUrl"]
= value; }
}
9.
Override the AddAtributesToRender
Event of the ImageButton Object
10.
Add Two Attributes to the Object. We will use ResolveClientUrl
Method to get the Image Source URL.
protected override
void AddAttributesToRender(HtmlTextWriter
writer)
{
writer.AddAttribute("onmouseover",
"this.src='" +
base.ResolveClientUrl(ImageOverUrl) + "'");
writer.AddAttribute("onmouseout",
"this.src='" +
base.ResolveClientUrl(ImageUrl) + "'");
base.AddAttributesToRender(writer);
}
11.
Here ImageOverUrl is Image when someone moves mouse on the ImageButton
where as ImageUrl is a Normal image view of the ImageButton.
12.
Now the last step is to build the DLL. This step can be achieved
by right clicking the Project in Solution Explorer Side bar and then Clicking Build.
Now, you have your new Custom ImageButton. You can use this Control
in ASP .NET Web sites of in the SharePoint Sites Both.
1.
To add the “KamalRolloverImageButton”
to your Project you have to add reference to the Created DLL.
2.
In ASP .NET you can Import the DLL through Controls
Tool bar
3.
Right Click the Controls Tool bar and Click “Choose
Items…”
4.
Select Browse and locate your DLL for the RolloverImageButton
5.
Click Open to add it to the “.NET Framework
Components”
6.
Now you can see the Object in given List.
7.
Click Ok to add the Selected Object to your Toolbar
Panel.
8.
Now, you can just Drag and drop your rolloverImageButton
anywhere on the ASP .NET Page.
|