A theme or a skin file is not applied to an ASP.NET control descendant

• Sep 15, 2023
• 3 minutes to read

Description

According to ASP.NET theming concepts, the tag name in a skin file should equal to the control class name. Once you create control class descendant, the existing skin file is no longer applied.

Since DevExpress ASP.NET controls use the standard ASP.NET theming approach (skin files) internally, the above-mentioned issue with descendants also affect these controls.

You can use the following approaches to resolve this issue.

Solution 1: Use a web user control instead of a control descendant

1. Create a new WebUserControl with a DevExpress ASP.NET control inside.
2. Specify the default settings for this control.
3. Expose control settings as public WebUserControl properties and manipulate them outside the WebUserControl.

Solution 2: Use a factory method or helper to create controls at runtime

Implement a factory method instead of a control descendant. In this case, theming is applied without extra steps because the control’s class name is not changed.

public ASPxGridView GetASPxGridViewWithDefaultSettings(string ID) {  
    ASPxGridView grid = new ASPxGridView();  
    grid.ID = ID;  
    grid.ClientInstanceName = ID;  
    //...  
    return grid;  
}

Solution 3: Customize the applied theme

1. Use the ASP.NET Theme Deployer tool to extract skin files (select the Only skin files option).
2. Clone a skin file of the control whose descendant was created inside the extracted theme folder.
3. Rename the cloned skin file and its tag name according to the name of the descendant class.
4. Deploy the \App_Theme\Extracted_Theme folder to your web application.
5. Apply the deployed theme. For more information, see the following topic: Apply a Theme with the ASP.NET Mechanism.

Example

using System;
using System.Web.UI.WebControls;

namespace CustomControls {
    public class MyButtonHasOwnSkin : Button { ... }
}

App_Themes\RedTheme\MyButtonHasOwnSkin.skin

<%@ Register TagPrefix="cc" Namespace="CustomControls" %>
<cc:MyButtonHasOwnSkin runat="server" BackColor="Purple" />

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="RedTheme" %>  
<%@ Register TagPrefix="cc" Namespace="CustomControls" %>  
@* ... *@
<asp:Button ID="Button1" runat="server" Text="Default ASP.NET Button" />
<cc:MyButtonHasOwnSkin ID="Button3" runat="server" Text="Custom ASP.NET Button Has Own Skin" />

Solution 4: Create a custom theme assembly

1. Use the ASP.NET Theme Builder tool to create and save a new theme based on an existing theme.
2. In the saved theme sources, locate the skin file of the control whose descendant you created.
3. Clone the skin file inside the extracted theme folder.
4. Rename the cloned skin file and its tag name according to the name of the descendant class.
5. Build a custom theme assembly from the modified theme.
6. Apply the built theme. For more information, see the following topic: Apply a Theme with the DevExpress Mechanism.