De ning a Theme in VS .NET

Encode PDF417 in VS .NET De ning a Theme

A theme is made up of a set of skin les located in a named subfolder in the App_Themes folder for a Web site. A skin le is a text le that has the le name extension .skin. Each skin le speci es the default properties for a particular type of control using syntax very similar to that which is displayed when you view a Web form in the Source View window. For example, the following skin le speci es the default properties for TextBox and Label controls:

<asp:TextBox BackColor= Blue ForeColor= White Runat= Server /> <asp:Label BackColor= White ForeColor= Blue Runat= Server Font-Bold= True />

You can specify many properties of a control in a skin le, but not all of them. For example, you cannot specify a value for the AutoPostBack property. Additionally, you cannot create skin les for every type of control, but most commonly used controls can be con gured in this way.

After you have created a set of skin les for a theme, you can apply the theme to a page by modifying the @Page attribute that occurs at the start of the page in the Source View window. For example, if the skin les for a theme are located in the App_Themes\BlueTheme folder under the Web site, you can apply the theme to a page like this:

If you want to apply the theme to all pages in the Web site, you can modify the web.con g le and specify the theme in the pages element, like this:

If you modify the de nition of a theme, all controls and pages that use the theme will pick up the changes automatically when they are next displayed. In the nal set of exercises in this chapter, you will create a theme for the Litware Web site and then apply this theme to all pages in the Web site.

1. In Solution Explorer, right-click the C:\...\Litware project folder. Point to Add ASP.NET Folder, and then click Theme. A new folder called App_Themes is added to the project, and a subfolder is created called Theme1. 2. Change the name of the Theme1 folder to LitTheme. 3. In Solution Explorer, right-click the LitTheme folder, and then click Add New Item. The Add New Item dialog box appears, displaying the types of le that can be stored in a themes folder. 4. Click the Skin File template, type Lit.skin in the Name text box, and then click Add. The skin le Lit.skin is added to the LitTheme folder, and the le is displayed in the Code and Text Editor window. 5. Append the following lines to the end of the Lit.skin le in the Code and Text Editor window (this le contains a comment with some very brief instructions):

<asp:TextBox BackColor= Red ForeColor= White Runat= Server /> <asp:Label BackColor= White ForeColor= Red Runat= Server Font-Bold= True /> <asp:RadioButton BackColor= White ForeColor= Red Runat= Server /> <asp:Button BackColor= Red ForeColor= White Runat= Server Font-Bold= True /> <asp:DropDownList BackColor= Red ForeColor= White Runat= Server />

This simple set of properties displays TextBox, Button, and DropDownListBox controls as white text on a red background, and Label and RadioButton controls as red text on a white background. The text on Label and Button controls is displayed using the bold font version of the current font.

27

Important The skin le editor is very basic and does not provide any IntelliSense to help you. If you make a mistake in this le, the application will run, but entries in this le might be ignored. When you run the application later, if any of the controls do not appear as expected, ensure that you have not mistyped anything in this le. As mentioned previously, there are at least two ways you can apply a theme to a Web form: you can set the @Page attribute for each page, or you can specify the theme globally across all pages by using a Web con guration le. You are going to use the latter approach in the next exercise. This mechanism causes all pages for the Web site to apply the same theme automatically.