Back to Devexpress

Appearance Customization - Theming

aspnetmvc-402321-common-features-appearance-customization-theming.md

latest5.3 KB
Original Source

Appearance Customization - Theming

  • Jun 21, 2024
  • 3 minutes to read

DevExpress ASP.NET MVC Extensions ship with predefined visual themes ( DevExpress Themes ) that allow you to provide a consistent appearance across all DevExpress MVC components. Refer to the following help topic to see a list of DevExpress Themes: Available Themes.

Since DevExpress Themes are based on Microsoft’s theme and skin technology (see the following topic for details: ASP.NET Themes and Skins), if you are familiar with 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 the following help topic to learn more: Apply a Theme with the ASP.NET Mechanism.

We added a mechanism to simplify the maintenance and application of DevExpress themes in v12.1. These themes can be applied to an individual DevExpress MVC component, or to an entire website. This approach to theming is detailed below.

Maintain DevExpress Themes

All pre-packaged DevExpress Themes are included in the ASPxThemes assembly, which is registered in the GAC. This does not include the Default Theme found within our control-related DLLs.

All DevExpress Themes exposed by ASPxThemes.dll are automatically available within web projects via the DevExpress ASPxHttpHandlerModule. This module retrieves required theme resource files from the assembly (when requested), without the need to store these files within an application’s App_Theme folder.

The benefits of maintaining themes in an assembly and obtaining theme resources as required are as follows.

  • Ease of Upgrade

  • Ease of Application

Apply DevExpress Themes

We introduced programmatic (in view code or via the Global.asax file) and declarative (via the *Web.config file’s configuration options) approaches to apply a DevExpress Theme to a single MVC extension, all extensions, or an entire website - in v12.1. See the table below for details.

MemberDescription
Extension settings’ property: SettingsBase.ThemeGets or sets the name of the theme to be applied to the extension.
Static property: ASPxWebControl.GlobalThemeGets or sets the name of the Theme to be globally applied to all DevExpress web controls across the entire web site.
Static property: ASPxWebControl.GlobalStyleSheetThemeGets 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.GlobalThemeBaseColorGets 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.GlobalThemeFontGets 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 NameSpecifies the name of a default or custom visual theme that is globally applied to all DevExpress controls within a website.
Web.config option: Style Sheet Theme NameSpecifies the name of a default or custom style sheet theme that is applied to all DevExpress controls within a website.
Web.config option: Theme Base ColorSpecifies the name of a theme’s base color that is globally applied to all DevExpress controls within a website.
Web.config option: Theme Font SettingsSpecifies a theme’s font that is globally applied to all DevExpress controls within a website.

Refer to the following help topic for detailed information on DevExpress theme application: Apply a Theme with the DevExpress Mechanism.

See Also

ASP.NET Web Forms and Bootstrap Themes