学习010-07-03 How to: Use Custom Themes in ASP.NET Web Forms Applications（如何：在 ASP.NET Web 窗体应用程序中使用自定

How to: Use Custom Themes in ASP.NET Web Forms Applications（如何：在 ASP.NET Web 窗体应用程序中使用自定义主题）

By default, an ASP.NET Web Forms XAF application uses themes from the ASPxThemes Assembly. You can use custom assemblies as well. This topic details approaches to customizing default themes. To learn more about these themes, see the Appearance Customization - Theming topic in the ASP.NET Web Forms controls documentation. To learn the basics behind the appearance of ASP.NET Web Forms sites in XAF applications, refer to the ASP.NET Web Forms Application Appearance topic.
默认情况下，ASP.NET Web FormXAF应用程序使用ASPxThemes程序集中的主题。您也可以使用自定义程序集。本主题详细介绍了自定义默认主题的方法。要了解有关这些主题的详细信息，请参阅ASP.NET Web Form控件留档中的外观自定义-主题主题。要了解XAF应用程序中ASP.NET Web Form站点外观背后的基础知识，请参阅ASP.NET Web Form应用程序外观主题。

This topic includes the following sections.
本主题包括以下部分。

• Add Assemblies with Custom Themes（使用自定义主题添加程序集）
• Override Skin Files from Built-in Themes（从内置主题覆盖皮肤文件）
• Override Built-in Themes（覆盖内置主题）
• Register Additional CSS Files（注册其他CSS文件）
• Switch Between Themes for New and Classic Web UI（在新的和经典的Web UI的主题之间切换）

Add Assemblies with Custom Themes（使用自定义主题添加程序集）

You can add a custom theme in addition to the themes that are supplied with the DevExpress.Web.ASPxThemes.24.1.dll assembly. For this purpose, do the following.
除了DevExpress. Web.ASPxThemes.24.1.dll程序集提供的主题之外，您还可以添加自定义主题。为此，请执行以下操作。

Invoke ASP.NET Web Forms Theme Builder as described in the Launching the Theme Builder topic, and create a new theme. For ASP.NET Web Forms applications with the New Web UI, it is recommended to create themes based on the XafTheme theme. Customize the newly created theme and save changes.
调用ASP.NET启动主题生成器主题中描述的Web窗体主题生成器，并创建一个新主题。对于使用新Web UI的ASP.NET Web Form应用程序，建议基于XafTheme主题创建主题。自定义新创建的主题并保存更改。

Note
Ensure that the name of the newly created theme is unique for your project; otherwise change it in the Theme Properties… dialog.
确保新创建的主题的名称对于您的项目是唯一的；否则在主题属性…对话框中更改它。

Currently, the Theme Builder tool does not support editing XAF-specific css files. So, it is necessary to modify css files manually.
目前，主题生成器工具不支持编辑XAF特定的css文件。因此，需要手动修改css文件。

• After theme customization is finished, use Theme Builder to create an assembly with this theme. See the Generating a Custom Theme Assembly topic for details.
  主题自定义完成后，使用主题生成器创建具有此主题的程序集。有关详细信息，请参阅生成自定义主题程序集主题。
• Reference this assembly in your web application project.
  在您的Web应用程序项目中引用此程序集。
  Open the application’s Web.config configuration file, set the customThemeAssemblies attribute to the target assembly with a custom theme, and set themeName to the name of this theme in the theme element of the devExpress section.
  打开应用程序的Web. config配置文件，将customThemeAssemblies属性设置为具有自定义主题的目标程序集，并在devExpress部分的主题元素中将keyeName设置为该主题的名称。

XML
<devExpress>
    <!-- ... -->
    <themes enableThemesAssembly="true" customThemeAssemblies="ThemeAssembly1" theme="XafTheme1" />
</devExpress>

• Rebuild the solution.
  重建解决方案。

See the Using a Custom Theme Assembly topic for additional information.
有关其他信息，请参阅使用自定义主题程序集主题。

Override Skin Files from Built-in Themes（从内置主题覆盖皮肤文件）

You can override skin files from themes located in a theme assembly. For this purpose, do the following.
您可以覆盖来自主题程序集中的主题的皮肤文件。为此，请执行以下操作。

• Deploy skins from required themes to the App_Themes folder in your project. To do this, use the ASP.NET Web Forms Theme Deployer tool.
  将所需主题中的皮肤部署到项目中的App_Themes文件夹。为此，请使用ASP.NET Web Form主题部署器工具。

• Replace required skin files with custom ones.
  用自定义文件替换所需的皮肤文件。

• Choose the default theme using the standard ASP.NET Web Forms approach – by specifying the pages element in the application’s Web.config configuration file.
  使用标准ASP.NET Web Form方法选择默认主题-通过在应用程序的Web. config配置文件中指定page元素。

XML
<configuration>
  <system.web>
    <pages theme="XafTheme1" />
    <!-- ... -->
  </system.web>
<!-- ... -->
</configuration>

Leave the enableThemesAssembly attribute of the themes element set to true.
将主题元素的enableThemesAssembly属性设置为true。

XML
<configuration>
  <devExpress>
    <!-- ... -->
    <themes enableThemesAssembly="true" />
  </devExpress>
<!-- ... -->
</configuration>

In applications with the Classic Web UI, themes, deployed to the App_Themes folder, will be added to the ChooseTheme Action as items, and will be available at runtime.
在具有Classic Web UI的应用程序中，部署到App_Themes文件夹的主题将作为项目添加到ChooseTheme Action中，并在运行时可用。

Override Built-in Themes（覆盖内置主题）

You can customize built-in themes. Follow the steps below to use them at runtime.
您可以自定义内置主题。按照以下步骤在运行时使用它们。

• Deploy the required themes to the App_Themes folder in your project. To do this, use the ASP.NET Web Forms Theme Deployer. They can be already customized, otherwise customize them directly in the project.
  将所需的主题部署到项目中的App_Themes文件夹。为此，请使用ASP.NET Web Form主题部署器。它们可以已经自定义，否则直接在项目中自定义。

• Set enableThemesAssembly to false and theme to an empty string in the themes element of the Web.config file.
  在Web. config文件的主题元素中将enableThemesAssembly设置为false，将主题设置为空字符串。

XML
<configuration>
  <devExpress>
    <!-- ... -->
    <themes enableThemesAssembly="false"  theme=""/>
  </devExpress>
<!-- ... -->
</configuration>

Choose the default theme using the standard ASP.NET Web Forms approach – by specifying the theme attribute of the pages element in the application’s Web.config configuration file.
使用标准ASP.NET Web Form方法选择默认主题-通过在应用程序的Web. config配置文件中指定page元素的主题属性。

XML
<configuration>
  <system.web>
    <pages theme="XafTheme1" />
    <!-- ... -->
  </system.web>
<!-- ... -->
</configuration>

In applications with the Classic Web UI, themes, deployed to the App_Themes folder, will be added to the ChooseTheme Action as items, and will be available at runtime.
在具有Classic Web UI的应用程序中，部署到App_Themes文件夹的主题将作为项目添加到ChooseTheme Action中，并在运行时可用。

Register Additional CSS Files（注册其他CSS文件）

If you need additional CSS files of a particular theme to be used on a page, register these files using the RegisterThemeAssemblyController. For this purpose, open the Global.asax.cs file and invoke the RegisterThemeAssemblyController’s static RegisterCss method from the Session_Start method. Pass the required style path as the method’s path argument.
如果您需要在页面上使用特定主题的其他CSS文件，请使用RegisterThemeAssemblyController注册这些文件。为此，打开Global. asax.cs文件并从Session_Start方法调用RegisterThemeAssemblyController的静态RegisterCss方法。传递所需的样式路径作为方法的路径参数。

C#
using DevExpress.ExpressApp.Web.SystemModule;
//...
public class Global : System.Web.HttpApplication {
    // ...
    protected void Session_Start(object sender, EventArgs e) {
        // ...
        WebApplication.Instance.SwitchToNewStyle();
        RegisterThemeAssemblyController.RegisterCss(
            "App_Themes/MyThemeAssembly/Xaf/MyExtraCustomStyles.css");
        webApplication.Setup();
        webApplication.Start();
    }
}

Switch Between Themes for New and Classic Web UI（在新的和经典的Web UI的主题之间切换）

If you want to switch between themes for New and Classic Web UI according to the template chosen on the application start it is necessary to create a custom theme manager. The theme manager allows you to switch between themes depending on the device type or any other parameter. Note, that the standard ASP.NET Web Forms way to set a theme in an application configuration file is not appropriate for this scenario.
如果要根据应用程序启动时选择的模板在New和Classic Web UI的主题之间切换，则必须创建自定义主题管理器。主题管理器允许您根据设备类型或任何其他参数在主题之间切换。请注意，在应用程序配置文件中设置主题的标准ASP.NET Web Form方式不适用于此场景。

Create an assembly with themes that use templates for the Classic and New web UI, as described in the Add Assemblies with Custom Themes section, and create a custom theme manager, which implements the ICurrentThemeManager interface. The code snippet below demonstrates an example of its implementation.
创建一个包含使用经典和新Web UI模板的主题的程序集，如使用自定义主题添加程序集部分所述，并创建一个自定义主题管理器，该管理器实现ICurrentThemeManager接口。下面的代码片段演示了其实现示例。

C#
using DevExpress.ExpressApp.Web;
using DevExpress.ExpressApp.Web.Templates;
using DevExpress.ExpressApp.Utils;
//...
public class CustomThemeManager : ICurrentThemeManager {
    public string GetCurrentTheme() {
        if (WebApplicationStyleManager.IsNewStyle)
            return "NewStyleXafTheme";
        else
            return new SettingsStorageOnCookies().LoadOption("", "Theme");
    }
    public void SetCurrentTheme(string themeName) {
        new SettingsStorageOnCookies().SaveOption("", "Theme", themeName);
    }
}

Open the Global.asax.cs (Global.asax.vb) file, located in the application project, and add the following code to the Application_Start method to use the custom theme manager.
打开位于应用程序项目中的Global. asax.cs（Global.asax.vb）文件，并将以下代码添加到Application_Start方法以使用自定义主题管理器。

C#
using DevExpress.ExpressApp.Web.SystemModule;
using DevExpress.ExpressApp.Web.Templates;
//...
public class Global : System.Web.HttpApplication {
    //...
    protected void Application_Start(Object sender, EventArgs e) {
        //...
        BaseXafPage.CurrentThemeManager = new CustomThemeManager();
    }
}