Create and Apply Custom Skins for Studio Enterprise ASP.NET Controls

Applies To:

Studio Enterprise

Author:

Eric Collier

Published On:

12/15/2006

ASP.NET themes help web developers define the appearances of controls and pages within their Web sites. Themes can include cascading style sheets, image files, and skin files. In this "How To" we will be focusing on creating a custom theme using skin files. Skin files define property settings for ASP.NET controls that help give your controls and Web sites a reusable and custom tailored look.

For purposes of brevity and simplicity, we will be using a C1WebMaskEdit control from the ComponentOne WebInput for ASP.NET product. When complete, we will have created a skin file and resulting theme to set up the C1WebMaskEdit control as a standard Social Security Number input control.

  • Create a new ASP.NET web site in Visual Studio.
  • Navigate to the design view of the Default.aspx page created by Visual Studio.
  • In design view, add a new C1WebMaskEdit control from the ComponentOne Studio for ASP.NET 2.0 Toolbox Tab to the design surface. Do not set formatting (AutoFormat) for the control at this time.

  • Switch to Source view and note that Visual Studio .NET has generated the @Register directive and necessary HTML tags to create the control on the form. Note that C1WebMaskEdit is an element of the C1.Web.C1Input.2 assembly.

  • Select the Default.apsx page from the Solution Explorer and click on View in Browser to view the control before the theme is applied.

  • Close the browser and stop the server and return to the Default.aspx page in Visual Studio.

  • Return to Design view in Visual Studio .NET and select the C1WebMaskEdit1 recently added to the page.

  • Create a standard SSN input control by setting the following properties in the Properties window in Visual Studio.

BorderStyle

Inset

BorderWidth

3px

Font

Tahoma

InvalidInputColor

Red

Mask

000-00-0000

ToolTip

Please Enter Your SSN

  • Switch to Source view and note that the C1WebMaskEdit1 element now has the attributes added that will serve as the base theme.
<c1i:C1WebMaskEdit ID="C1WebMaskEdit1" runat="server" BorderStyle="Inset" BorderWidth="3px" Font-Names="Tahoma" InvalidInputColor="Red" PromptChar="_" HidePromptOnLeave="True" Mask="000-00-0000" ToolTip="Please Enter Your SSN">
  • To save the theme, you will have to create an app theme directory and save a skin file. In Solution Explorer, right click on your web site and select Add ASP.NET Folder and click Theme. This will add an App_Themes folder and a Theme1 subfolder.
  • Rename the Theme1 folder to ComponentOneThemes.
  • Right click the ComponentOneThemes folder and select Add New Item, add a new Skin file and name it webInputSSN.skin.
  • Switch to Source view for the Default.aspx page, then copy the element and all of its attributes.
  • Open the webInputSSN.skin file and paste the WebMaskEdit1 definition into the file. Be sure to remove the ID attribute from the definition in the skin file as skin definitions do not include a setting for ID. You will also need to copy the @Register attribute for the assembly into the .skin file.

What should now be in the skin file is the following:

      <c1i:C1WebMaskEdit runat="server" BorderStyle="Inset" BorderWidth="3px" Font-Names="Tahoma" InvalidInputColor="Red" PromptChar="_" HidePromptOnLeave="True" Mask="000-00-0000" ToolTip="Please Enter Your SSN">

  • Switch to Source view and add the Theme attribute to the @Page directive to equal ComponentOneThemes.

  • Save the project.

  • Switch to Design view and add another C1WebMaskEdit control to the page. Note the difference in the two controls in Design view. The first control is styled as it has its properties explicitly set in the page. The second control is not styled.
  • Right click the Default.aspx page and select View in Browser. Both C1WebMaskEdit controls are the same. The second control has now inherited its style from the properties that have been set in the skin definition and applied to the page.

MESCIUS inc.

comments powered by Disqus