Thursday, March 4, 2010

Building Skinnable Modules

In this post we will try to create a basic module development strategy when you want to create a module with multiple skins. The basic idea here is to create an initial demo that can be re-used to create modules with multiple skins.

Let's Start:
Let's start by creating some set of controls and css just like you see in the image below.

Skinnable Module Image 1

  • Create a Module from the control in the root directory (View.ascx)
  • View.ascx is just a control loader which will decide which skin control to be rendered based on skin that is selected, if no skin is selected, you can assign default skin.
Further Improvements:
  • If module control is relatively simply and contains only listing view like repeater or data list, you can move the cs file of any one control to code folder, and change code behind file attribute for both skin controls. That way you don't have to maintain separate code file for each skin.

Source Code:

You can download source code from here.