EPR类企业管理系统

在我们现有系统基础上或全新开发,提供定制服务
为您的企业高效快速实施ERP,WMS,MES,CRM管理系统
全面管控物料仓库、销售业务、采购业务、仓库业务
生产过程、质量检验、组织架构、业务报表


定制
QQ:460-3528

开发
QQ群:3360-90194

源码
微信:136-3650-3721

如何:在ASP.NET应用程序中使用自定义主题

默认情况下,ASP.NET XAF应用程序使用ASPxThemes Assembly中的主题。您也可以使用自定义程序集。本主题详细介绍了定制默认主题的方法。若要了解有关这些主题的更多信息,请参见ASP.NET控件文档中的“外观自定义-主题”主题。若要了解XAF应用程序中ASP.NET站点外观的基础知识,请参阅ASP.NET Web应用程序外观主题。

本主题包括以下部分。

添加具有自定义主题的装配体

除了DevExpress.Web.ASPxThemes随附的主题外,您还可以添加自定义主题。19.2 .dll程序集。为此,请执行以下操作。

  • 如启动主题生成器主题中所述调用ASP.NET主题生成,并创建一个新主题。对于具有新Web UI的ASP.NET应用程序,建议基于XafTheme主题创建主题。自定义新创建的主题并保存更改。

    注意

    确保新创建的主题名称对于您的项目是唯一的;否则,请在“主题属性...”对话框中对其进行更改。

    ThemeBuilder_ThemeProperties

    当前,主题生成器工具不支持编辑特定于XAF的CSS文件。因此,有必要手动修改css文件。

  • 主题自定义完成后,请使用“主题构建器”来创建具有该主题的部件。有关详细信息,请参见生成自定义主题程序集主题。
  • 在您的Web应用程序项目中引用此程序集。
  • 打开应用程序的Web.config配置文件,将customThemeAssemblies属性设置为具有自定义主题的目标程序集,并在devExpress部分的theme元素中将themeName设置为该主题的名称。

    <devExpress>
        <!-- ... -->
        <themes enableThemesAssembly="true" customThemeAssemblies="ThemeAssembly1" theme="XafTheme1" />
    </devExpress>
    
  • 重建解决方案。

有关其他信息,请参见“使用自定义主题程序集”主题。

从内置主题覆盖皮肤文件

您可以从位于主题程序集中的主题覆盖外观文件。为此,请执行以下操作。

  • 将皮肤从必需的主题部署到项目中的App_Themes文件夹。为此,请使用ASP.NET Theme Deployer工具。
  • 用自定义文件替换所需的皮肤文件。
  • 通过在应用程序的Web.config配置文件中指定pages元素,使用标准ASP.NET方法选择默认主题。

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

    将主题元素 的enableThemesAssembly属性设置为true。

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

在具有经典Web UI的应用程序中,部署到App_Themes文件夹的主题将作为项目添加到ChooseTheme Action中,并且在运行时可用。

替代内置主题

您可以自定义内置主题。请按照以下步骤在运行时使用它们。

  • 将所需的主题部署到项目中的App_Themes文件夹中。为此,请使用ASP.NET Theme Deployer。它们可以已经被自定义,否则可以直接在项目中对其进行自定义。
  • 在Web.config文件的themes元素中,将enableThemesAssembly设置为false,并将theme设置为空字符串。

    <configuration>
      <devExpress>
        <!-- ... -->
        <themes enableThemesAssembly="false"  theme=""/>
      </devExpress>
    <!-- ... -->
    </configuration>
    
  • 通过在应用程序的Web.config配置文件中指定pages元素的主题属性,使用标准ASP.NET方法选择默认主题。

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

在具有经典Web UI的应用程序中,部署到App_Themes文件夹的主题将作为项目添加到ChooseTheme Action中,并且在运行时可用。

注册其他CSS文件

如果您需要在页面上使用特定主题的其他CSS文件,请使用RegisterThemeAssemblyController注册这些文件。为此,请从模块的构造函数中调用RegisterThemeAssemblyController的静态RegisterCss方法。将所需的样式路径作为方法的path参数传递。

using DevExpress.ExpressApp.Web.SystemModule;
//...
public sealed partial class MyWebModule : ModuleBase {
    public MainDemoWebModule() {
        InitializeComponent();
        RegisterThemeAssemblyController.RegisterCss(
            "App_Themes/MyThemeAssembly/Xaf/MyExtraCustomStyles.css");
    }
}

在新的和经典的Web UI的主题之间切换

如果要根据在应用程序启动时选择的模板在新Web界面和经典Web UI的主题之间切换,则必须创建一个自定义主题管理器。主题管理器允许您根据设备类型或任何其他参数在主题之间进行切换。请注意,在应用程序配置文件中设置主题的标准ASP.NET方法不适用于这种情况。

按照使用“添加具有自定义主题的程序集”部分中的描述,创建具有使用用于Classic和New Web UI模板的主题的程序集,并创建一个实现ICurrentThemeManager界面的自定义主题管理器。下面的代码片段演示了其实现的示例。

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);
    }
}

打开位于应用程序项目中的Global.asax.csGlobal.asax.vb)文件,然后将以下代码添加到Application_Start方法中以使用自定义主题管理器。

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();
    }
}

转载保留此链接,注明出处