Apply a Theme with the DevExpress Mechanism

• Mar 12, 2021
• 3 minutes to read

DevExpress provides an easy way to theme your web application by applying a theme stored in a specific assembly.

When using a pre-packaged theme assembly (ASPxThemes) or a custom one, you are not required to copy theme-related files to your project. The required theme resource files (such as image, CSS and skin files) will automatically be obtained from the theme assembly. Add a reference to this assembly to your project, and register the assembly in the Web.config file to apply a theme from the custom assembly.

To apply a theme, specify the theme name of the website, web page or individual DevExpress control - as described in the corresponding sections below.

Apply a Theme to a Control

• At design time:

  Specify a control’s theme using its smart tag.

  

  In this case, the control’s Theme property is set to the selected theme name. You can define the theme name directly in markup, as shown in the code sample below.

  ASPX

  
  <dx:ASPxButton ID="ASPxButton1" runat="server" Text="ASPxButton" Theme="Aqua">
  </dx:ASPxButton>
  

• At runtime:

  Set the control’s ASPxWebControl.Theme property to the theme name in the Page.PreInit event handler.

  C#

  
  protected void Page_PreInit(object sender, EventArgs e) {
       ASPxButton1.Theme = "Aqua";
  }
  

Apply a Theme to a Web Page

• At runtime:

  Set the ASPxWebControl.GlobalTheme property to the theme name in the Page.PreInit event handler.

  C#

  
  protected void Page_PreInit(object sender, EventArgs e){
          DevExpress.Web.ASPxWebControl.GlobalTheme = "Aqua";
      }
  

Apply a Theme to a Website

• At design time:

  Set the Theme Name attribute to the theme name in the themes configuration section in the Web.config file.

  ASPX

  
  <devExpress>
       <themes enableThemesAssembly="true" styleSheetTheme="" theme="Aqua"/>
       ...
  </devExpress>
  

• At runtime:

  Set the ASPxWebControl.GlobalTheme property to the theme name on each request execution by specifying the theme in the HttpApplication.PreRequestHandlerExecute event handler (in Global.asax).

  C#

  
  protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
       DevExpress.Web.ASPxWebControl.GlobalTheme = "Aqua";
  }
  

Note

You can use the Project Wizard to specify a theme for your site. This wizard sets the Theme Name attribute in the Web.config file. If a custom theme is specified, the wizard adds a reference to the theme assembly and sets the customThemeAssemblies attribute in the Web.config file as well.

Apply a Theme to a Sharepoint Web Part

When working with Sharepoint WebPart / VisualWebPart modules, override the CreateChildControls method to apply a theme – as shown below.

C#

public class WEB_PART_OR_VISUAL_WEB_PART_CLASS_HERE : WebPart {
    protected override void CreateChildControls() {
        DevExpress.Web.ASPxWebControl.GlobalTheme = "Aqua";
        ...
        //Create Child Controls Here
    }
}

VB.NET

Public Class WEB_PART_OR_VISUAL_WEB_PART_CLASS_HERE
    Inherits WebPart
    Protected Overrides Sub CreateChildControls()
        DevExpress.Web.ASPxWebControl.GlobalTheme = "Aqua"
       ...
        'Create Child Controls Here
    End Sub
End Class