DevExpress Themes Overview
- 4 minutes to read
DevExpress ASP.NET controls ship with predefined visual themes (DevExpress Themes) that allow you to provide a consistent appearance across all DevExpress controls. Refer to the Available Themes topic for a list of DevExpress Themes.
Because DevExpress Themes are based on Microsoft’s themes and skins technology (see the ASP.NET Themes and Skins topic in MSDN for details), if you are familiar with a standard ASP.NET Theme implementation, you can work with DevExpress Themes in a similar way. Use the ASPxThemeDeployer tool to apply a DevExpress theme to a specific web page or an entire project. See Apply a Theme with the ASP.NET Mechanism to learn more.
Also, starting with v12.1, we released a DevExpress mechanism to simplify the maintenance and application of DevExpress themes. These themes can be applied to an individual DevExpress web control, or to an entire website. This approach to theming is detailed below.
Maintaining DevExpress Themes
By design, all pre-packaged DevExpress Themes are included in the ASPxThemes assembly, which is registered within the GAC (refer to ASPxThemes Assembly to learn more). This does not include the Default Theme, which is already a part of the control-related DLLs.
All DevExpress Themes exposed by ASPxThemes.dll are automatically made available within web projects via the DevExpress ASPxHttpHandlerModule. This module is responsible for the immediate retrieval of required theme resource files from the assembly (when requested), without the need to store these files within the application’s App_Theme folder.
This approach to maintaining themes in an assembly and obtaining required theme resources from it provides the following benefits.
Ease of Upgrade
You can upgrade your project to a newer version of DevExpress ASP.NET controls without the need to redeploy resource files for predefined themes to the App_Theme folder.
Ease of Application
You can apply predefined DevExpress themes in different ways (using different resources) depending on your objective. See the following section for more details.
Applying DevExpress Themes
In v12.1, we introduced programmatic (in code behind or via the global.asax file) and declarative (via the web.config file’s configuration options) approaches to applying a DevExpress Theme to a single web control, all web controls, or an entire website - as listed in the table below.
| Member | Description |
|---|---|
| Control property: ASPxWebControl.Theme | Gets or sets the name of the Theme to be applied to the control. |
| Static property: ASPxWebControl.GlobalTheme | Gets or sets the name of the Theme to be globally applied to all DevExpress web controls across the entire web site. |
| Static property: ASPxWebControl.GlobalStyleSheetTheme | Gets or sets the name of the style sheet theme to be globally applied to all DevExpress web controls across the entire web site. |
| Static property: ASPxWebControl.GlobalThemeBaseColor | Gets or sets the base color for the theme to be globally applied to all DevExpress web controls across a web page or entire web site. |
| Static property: ASPxWebControl.GlobalThemeFont | Gets or sets the font settings of the theme to be globally applied to all DevExpress web controls across a web page or entire web site. |
| Web.config option: Theme Name | Specifies the name of a default or custom visual theme to be globally applied to all DevExpress controls within a website. |
| Web.config option: Style Sheet Theme Name | Specifies the name of a default or custom style sheet theme to be applied to all DevExpress controls within a website. |
| Web.config option: Theme Base Color | Specifies the name of the base color for the theme that will be globally applied to all DevExpress controls within a website. |
| Web.config option: Theme Font Settings | Specifies the font settings for the theme that will be globally applied to all DevExpress controls within a website. |
Refer to the Apply a Theme with the DevExpress Mechanism topic for detailed information on how to apply a DevExpress theme.