Lets take as an example ColorPicker control that I recently made.
First lets create New Project -> Web -> ASP.NET Server Control.
By default name of the project would be your default namespace. I called my project CustomControls. I renamed ServerContol1.cs into ColorPicker.cs. Then I added to the project images, javascripts, and styles that I need for my color picker contol.
Click on each file properties and change Build Action from Content to Embedded Resource.
Now lets modify AssemblyInfo.cs.
You need to register all you resources like this:
[assembly: System.Web.UI.WebResource("CustomControls.Images.slider_handle.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_center_active.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_left_active.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_left_inactive.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_right_active.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.tab_right_inactive.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("CustomControls.Images.color_picker_icon.jpg", "img/jpeg")]
[assembly: System.Web.UI.WebResource("CustomControls.Styles.js_color_picker_v2.css", "text/css")]
[assembly: System.Web.UI.WebResource("CustomControls.Javascript.color_functions.js", "text/js")]
[assembly: System.Web.UI.WebResource("CustomControls.Javascript.js_color_picker_v2.js", "text/js")]
As you notice System.Web.UI.WebResource first parameter has following signature:
[Assembly Name].[Folder].[File Name] (this is very important, since it is not documented even in MSDN)
Lets move to ColorPicker.cs Modify ToolboxData to look like this:
[ToolboxData("<{0}:ColorPicker runat=server></{0}:ColorPicker>")]
Next you probably want custom icon in Visual Studio Toolbox.
After ToolboxData add following line:
[System.Drawing.ToolboxBitmap(typeof(ColorPicker), "Images.color_picker_icon.jpg")]
where first parameter is type of control and second parameter icon file name used in AssemblyInfo.cs
Then you need to load stored resources from dll. The best event for this is OnInit:
// Javascript
string colorFunctions = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Javascript.color_functions.js");
Page.ClientScript.RegisterClientScriptInclude("color_functions.js", colorFunctions);
string colorPicker = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Javascript.js_color_picker_v2.js");
Page.ClientScript.RegisterClientScriptInclude("js_color_picker_v2.js", colorPicker);
//Images we need to set javascript variables, so javascript will know where to find images
string script = string.Format(@"
var form_widget_amount_slider_handle = '{0}';
var tab_right_active = '{1}';
var tab_right_inactive = '{2}';
var tab_left_active = '{3}';
var tab_left_inactive = '{4}';
", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Images.slider_handle.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Images.tab_right_active.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Images.tab_right_inactive.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Images.tab_left_active.gif")
, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Images.tab_left_inactive.gif")
);
Page.ClientScript.RegisterStartupScript(Page.GetType(), "initColorPicker", script, true);
// CSS
HtmlGenericControl csslink = new HtmlGenericControl("link");
csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "CustomControls.Styles.js_color_picker_v2.css"));
csslink.Attributes.Add("type", "text/css");
csslink.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(csslink);
The rest is simple. Use RenderContents event to render your contol and you are done.
ASP.NET Color Picker Demo page
Screenshot:
Thanks to the dhtmlgoodies.com for javascript source, see Color Picker
