Theming a Web Control
- 2 minutes to read
Theming a web control represents applying the selected DevExpress AutoFormat to an individual DevExpress web control at design time by using a specific Dialog Box.
Dialog Box
The Dialog Box represents an easy user interface with which to access a whole list of available autoformats. It can be accessed in different ways.
- Use a control’s Smart Tag and select the Auto Format item within the invoked drop down list.
- Right-click a control and select the Auto Format item within the invoked context menu.
- For the selected control, open its Properties Window and select the Auto Format task within the Commands Panel.
The opened Dialog Box provides a preview and applies the desired autoformat to the individual devexpress web control.
The left section contains a list of available DevExpress AutoFormats. The right section shows the preview of the customized DevExpress web component. Selecting the RemoveFormatting list item restores the default appearance of the control. “Ok”, “Cancel” and “Apply” buttons are used to perform corresponding actions.
After applying the autoformat skin, the file’s settings are assigned to the control’s markup, but the skin file is not copied to the App_Themes folder. Other source files (images and css files) are obtained from specific ASPxThemes Assembly.
Optionally, you can save Custom DevExpress AutoFormat (that represents a set of customized DevExpress web component visual settings) as a new DevExpress AutoFormat.
Creating Custom DevExpress AutoFormat
To create a new Custom DevExpress AutoFormat, you can use the “Save as AutoFormat..“ item within the control’s smart tag.
Specify the autoformat folder within the invoked Save AutoFormat window.
A Custom DevExpress AutoFormat can be saved any place on the hard drive. The folder name determines the name of the autoformat displayed within the Dialog Box.
Like default AutoFormat Structure, Custom DevExpress AutoFormat can contain skin files, images and css files. The skin file names should be the same as the control’s type (ASPxNavBar.skin file for the ASPxNavBar control). Saving autoformat also implies copying all the images and css files to which a control’s properties refer.
Theming a web control with Custom DevExpress AutoFormats can also be implemented via a Dialog Box
Note
The Custom DevExpress AutoFormat becomes available within a Dialog Box, due to a specific Registry Keys that stores the paths to a saved autoformat.
It is also possible to use Custom DevExpress AutoFormats for Theming a Web Page or a Web Site.