Please note: In an effort to better serve you, we are in the process of restructuring DevCenter. In the process, we have moved many items that you may be used to finding in DevCenter over to the Main Site. If you are having trouble locating something, please try looking at the following places:
In Visual Studio 2005, a skin file can be used to apply themes across a web page to give its controls a consistent look. The process of configuring the skin file to apply a theme to a NetAdvantage control is similar to creating the control itself.
The easiest way to set up a skin file is to first create the control and configure it as desired. Once this is done, copy the appearance-related HTML generated to the skin file so you know the proper tags are being used. General steps that were used to configure the skin file are listed below.1. Drag a control onto the web page.2. Configure this control’s properties until the desired look is achieved.3. View the HTML source of the web page and find where the control is defined.4. Copy the HTML for the entire control and paste it into the skin file.5. For NetAdvantage controls, copy the Register directive that is placed at the top of the web page to the skin file.6. In the skin file, remove any unnecessary attributes and tags.
For simplicity, this section discusses how the WebImageButton was configured. The same steps would apply for the WebMenu and WebGrid that are also shown in the sample.1. Create a theme folder to place the skin files in.With a Visual Studio 2005 Web project open, the first step that should be taken is to create a folder where your skin files will be located. Visual Studio 2005 makes this easy by allowing you to add a folder specifically designed for this. a. In the Solution Explorer, right click on the website.b. From the context menu, select the “Add ASP.NET Folder” option. c. From the next menu, which shows the types of ASP.NET folders you can add, select the Theme option.This will create an App_Themes folder with a subfolder that you can name. This subfolder is your theme, which is a collection of skin files. In this sample, this subfolder is called “MyInfragisticsControlsThemes”.2. Add skin files to this folder. You can right click on this folder in Solution Explorer and select “Add New Item”. Then choose the skin file option. This skin file will define the theme for the WebImageButton controls.3. Add WebImageButton controls to a web page. This will automatically create the necessary Register directive and HTML tag that are used in later steps.4. Copy the Register directive from the web page to the appropriate skin. This is needed so that “igtxt:WebImageButton” can be defined. The directive from the sample is shown below.In HTML:
5. In the skin file, define a WebImageButton as if you were creating it through HTML. The basic structure would look like this.In HTML:
6. You can now add attributes and HTML tags to configure the WebImageButton. The HTML structure will look like it does on the web page. Below is a comparison between how the WebImageButton looks in the web page and the skin file. Both will set the WebImageButton’s image to show FolderGroup.gif. Image files that make up a theme should be placed in the theme folder. The theme folder created for this article is called “MyInfagisticsControlsThemes”. The only difference between the two is that the skin file does not include an ID attribute. This is why it may be easier to configure the control the way you want first, and then copy the HTML to the skin file.HTML generated by setting properties through the designer:
Skin file HTML:
You can create multiple themes for the “igtxt:WebImageButton” in this manner. The SkinID property can be set for each theme defined. If you do not define a SkinID, then it is considered the default theme and will be applied to a WebImageButton that has no SkinID defined. 7. Save the skin file and go back to the web page. In the Page directive, add a Theme attribute and set it to “MyInfragisticsControlsThemes”. The Intellisense may appear showing the “MyInfragisticsControlsThemes” theme that was created. Now that the page is using this theme, it will look to the skin files in it to apply those themes to the controls on that page. You can also set the theme in the web.config file by including this element:In Web.Config :
Review:This article explains how skin files can be used with the NetAdvantage controls to obtain a consistent theme throughout a web page.