opular applications including ICQ, WinAmp, and Windows Media Player use skins to enable a user to choose another appearance for that application. The skins for those applications can be very simple, or have outrages themes, such as a particular movie. There's a very cute Winnie the Pooh skin for ICQ, for instance. From this I'm tempted to say that skins are just plain fun (or foolishness), but there is actually a practical side to skins. If you build a site with controls that allow skinning, you can easily modify the user interface for that site. This goes beyond simple changes to colors and fonts, which I discussed in "Creating ASP.NET Controls with Style
in the September/October 2003 issue of CoDe Magazine
. Skinned controls let you change the position and order of the controls, and add other elements to the control such as a background image or a company logo. Creating controls this way also gives you the opportunity to reuse the functionality of controls in different applications. This is great if you're a solutions provider that often builds sites for customers that are more or less the same in functionality. Just put a designer to work and the whole site is ready to go in a completely different style. Because you're not bound to just coloring and fonts, you can get away from the uniform look and feel for similar sites that you see so often. You can, of course, also use different sets of skins in the same application, which lets users pick a look that satisfies them. Choosing different looks for different departments within a company is also a great use for skins, and I'm sure that I could come up with many more uses. So let's get down to business and look at how skinned controls work and how you can create them yourself.
|A skinned control enables you to create different views for the same control. This allows you change the look of controls at runtime, allowing your users to pick a skin that suits their individual taste, or allows you to implement a uniform look by department, group, etc.
Skinned Control Basics
|The whole idea behind skinned controls is that you can separate the code and presentation into separate files, similar to the way you would do this with code behind.|
A skinned control consists of two parts: a control and a skin. The control is a regular control, but with some added functionality to allow skinning. The skin is a user control (.ascx
file) with only formatting. When properly wired up, you can also add code but you should only do that if a certain skin requires this. The whole idea behind skinned controls is that you can separate the code and presentation into separate files, similar to the way you would do this with code behind. Adding code to the skin would go against this idea.
When you use a skinned control, you add the control to a page. When that page loads, the control loads the skin, adds the skin to its controls collection, and then wires up the controls in the skin to the child controls of the control. This is different from a normal server control, where child controls are added to the controls collection "by hand."