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> ")]
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.
|