学习010-07-02 ASP.NET Web Forms Application Appearance（ASP.NET Web 窗体应用程序外观）

最新推荐文章于 2025-11-23 19:45:40 发布

原创最新推荐文章于 2025-11-23 19:45:40 发布 · 2.5k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #asp.net #前端 #XAF #c# #.net

XAF 24.1 专栏收录该内容

569 篇文章

订阅专栏

ASP.NET Web Forms Application Appearance（ASP.NET Web 窗体应用程序外观）

ASP.NET Web Forms XAF application appearance is defined by a set of Templates - the pages that support the XAF internal infrastructure. Templates define the Action Containers layout and a View location within the page. XAF supplies two sets of built-in templates - new (used by default) and classic. This topic describes how to switch between these templates, and how to customize each of them.
ASP.NET Web窗体XAF应用程序外观由一组模板（支持XAF内部基础结构的页面）定义。模板定义页面中的操作容器布局和视图位置。XAF提供两组内置模板——新模板（默认使用）和经典模板。本主题介绍如何在这些模板之间切换，以及如何自定义每个模板。

New Web UI（新的网页用户界面）

The default web application style is demonstrated in the image below. It is optimized for both hand-held touch devices and desktop browsers.
下图演示了默认的Web应用程序样式。它针对手持触摸设备和桌面浏览器进行了优化。
在这里插入图片描述

The UI layout adapts itself to the browser width or device orientation changes.
UI布局会自动适应浏览器宽度或设备方向的变化。
在这里插入图片描述

斜体样式Note that you cannot switch between themes by using the ChooseTheme Action at runtime or by modifying the theme element of the devExpress section in Web.config at design time. The following approaches describe how you can customize the new web UI.
请注意，您无法在运行时使用ChooseTheme Action或在设计时修改Web. config中devExpress部分的主题元素来切换主题。以下方法描述了如何自定义新的Web UI。

Using Global Theme Parameters（使用全局主题参数）

The simplest way to set font and base color in the ASP.NET Web Forms application theme as a whole is specify them in the Web.config configuration file in the web application solution as shown below.
在整个ASP.NET Web窗体应用程序主题中设置字体和底色的最简单方法是在Web应用程序解决方案的Web. config配置文件中指定它们，如下所示。

XML
<devExpress>
  <themes enableThemesAssembly="true" styleSheetTheme="" customThemeAssemblies="ThemeAssembly"  theme="XafTheme" baseColor="#00FF00" font="24px 'Calibri'" />
  <!-- ... -->
</devExpress>

Use the Application Model（使用应用程序模型）

The following table lists the Application Model properties that influence the new web theme only. To learn more about customizing the UI in the Application Model, refer to the Customize Data Display and View Layout section of the tutorial.
下表列出了仅影响新Web主题的应用程序模型属性。要了解有关在应用程序模型中自定义UI的更多信息，请参阅教程的自定义数据显示和视图布局部分。
在这里插入图片描述

For instance, the IModelActionWeb.AdaptivePriority property is changed as follows.
例如，IModelActionWeb. AdaptivePriity属性更改如下。

Invoke the Model Editor for the desktop application project. Navigate to the ActionDesign | Actions | ResetViewSettings and set the AdaptivePriority property to “1001”.
nvoke桌面应用程序项目的模型编辑器。导航到ActionDesign|Actions|ResetViewSettings并将AdaptivePrience属性设置为“1001”。
Run the ASP.NET Web Forms application.IModelActionWeb.AdaptivePriority
运行ASP.NET Web窗体应用程序。
The ResetViewSettings Action become hidden, because other Actions have the default priority value of 1000. The hidden ResetViewSettings Action can be accessed by the “…” button.
ResetViewSettings操作变得隐藏，因为其他操作的默认优先级值为1000。隐藏的ResetViewSettings操作可以通过“…”按钮访问。

You can specify different Application Model settings (for example, Detail View layout settings) for different devices. To do this, edit the ASP.NET Web Forms application project’s device-specific XAFML files:
您可以为不同的设备指定不同的应用程序模型设置（例如，详细视图布局设置）。为此，请编辑ASP.NET Web窗体应用程序项目的特定于设备的XAFML文件：
* Model.Desktop.xafml - for desktop browsers; 对于桌面浏览器
* Model.Tablet.xafml - for tablets. 对于平板电脑

These files form an additional Application Model layer.
这些文件形成了一个额外的应用程序模型层。

You can also add settings for smartphones. Note that the XAF Web UI is not optimized for small screens. Follow the steps below to add the XAFML file with settings for mobile devices:
您还可以为智能手机添加设置。请注意，XAF Web UI未针对小屏幕进行优化。按照以下步骤添加带有移动设备设置的XAFML文件：

In the Solution Explorer, right-click the ASP.NET Web Forms application project and choose Add | Text File to create a new text file. Name it Model.Mobile.xafml.
在解决方案资源管理器中，右键单击ASP.NET Web窗体应用程序项目并选择添加|文本文件以创建新的文本文件。将其命名为Model.Mobile. xafml。
Open this file in an XML editor and add the following code to make this file editable via the Model Editor.
在XML编辑器中打开此文件并添加以下代码以使此文件可通过模型编辑器进行编辑。

XML
<?xml version="1.0" encoding="utf-8"?>
<Application/>

Double-click Model.Mobile.xafml in the Solution Explorer to invoke the Model Editor.
在解决方案资源管理器中双击Model.Mobile. xafml以调用模型编辑器。

To implement a custom device detection algorithm, create the DevExpress.ExpressApp.Web.DeviceDetector’s inheritor and override its GetDeviceCategory method. In the Global class constructor, set the static DeviceDetector.Instance property to the new device detector instance.
要实现自定义设备检测算法，请创建DevExpress. ExpressApp.Web.DeviceDetector的继承并覆盖其GetDevice类别方法。在全局类构造函数中，将静态DeviceDetector.Instance属性设置为新的设备检测器实例。

To create a Model Difference Store for the device-specific Application Model layer, use the CreateCustomDeviceSpecificModelDifferenceStore event.
要为特定于设备的应用程序模型层创建模型差异存储，请使用CreateCustomDeviceSpecificModelDifferenceStore事件。

* Use Templates（使用模板）

You can include template content source files into your application project, modify this content and switch to it instead.
您可以将模板内容源文件包含到您的应用程序项目中，修改此内容并切换到它。

The following steps explain how to create and modify the LogonTemplateContent template.
以下步骤说明如何创建和修改LogonTemplateContent模板。

Right-click your ASP.NET Web Forms application project and choose Add | New Item. In the invoked Add New Item dialog, select the DevExpress XAF category and the DevExpress 24.1 XAF ASP.NET Web Forms Logon Template Content V2 item. Specify a name or leave the default “LogonTemplateContent1” name unchanged and press Add.
右键单击ASP.NET Web窗体应用程序项目，然后选择添加|新建项目。在调用的添加新建项目对话框中，选择DevExpress XAF类别和DevExpress 24.1 XAFASP.NET Web窗体登录模板内容V2项。指定名称或保持默认的“LogonTemplateContent1”名称不变，然后按添加。
Open the ASCX file and change the font style for the ErrorInfoControl.
打开ASCX文件并更改ErrorInfoControl的字体样式。

ASCX
<xaf:XafUpdatePanel ID="UPEI" runat="server" CssClass="LogonContentWidth">
<xaf:ErrorInfoControl ID="ErrorInfo" Style="margin: 10px 0px 10px 0px" runat="server" Font-Bold="True" />

To use the modified content instead of default content, open the Global.asax.cs (Global.asax.vb) file and modify the Session_Start
event handler. Specify a path to your custom User Control as shown
below.
要使用修改后的内容而不是默认内容，请打开Global. asax.cs（Global.asax.vb）文件并修改Session_Start事件处理程序。

C#
protected void Session_Start(Object sender, EventArgs e) {
    // ...
    WebApplication.Instance.Settings.LogonTemplateContentPath =
        "LogonTemplateContent1.ascx";
    WebApplication.Instance.SwitchToNewStyle();
    WebApplication.Instance.Setup();
    WebApplication.Instance.Start();
}

To see the result, run the ASP.NET Web Forms application and try to logon with invalid credentials.
要查看结果，请运行ASP.NET Web窗体应用程序并尝试使用无效凭据登录。

Note
By default, DefaultVerticalTemplateContent has no size limit. Comment out the template’s ClearSizeLimit method call in the Global.asax.cs (Global.asax.vb) file to set a workspace width limit to 1200px. This method has effect on the built-in template only. If you use a custom vertical template, call the ClearSizeLimit method of this custom template instead.
默认情况下，DefaultVerticalTemplateContent没有大小限制。在Global. asax.cs（Global.asax.vb）文件中注释掉模板的ClearSizeLimit方法调用，将工作区宽度限制设置为1200px。此方法仅对内置模板有效。如果使用自定义垂直模板，请改用此自定义模板的ClearSizeLimit方法。

WebApplicationStyleManager Class（WebApplicationStyleManager类）

By default, in an XAF ASP.NET Web Forms application with the new web style, the navigation groups and grid columns are shown in UPPER CASE. You can change this using the WebApplicationStyleManager.EnableUpperCase property.
默认情况下，在具有新Web样式的XAFASP.NET Web窗体应用程序中，导航组和网格列以大小写显示。您可以使用WebApplicationStyleManagerEnableUpperCase属性进行更改。

Alternatively, you can use the following properties to disable upper case for a grid column, layout group and navigation group captions, individually.
或者，您可以使用以下属性单独禁用网格列、布局组和导航组标题的大写字母。
* WebApplicationStyleManager.EnableGridColumnsUpperCase
* WebApplicationStyleManager.EnableGroupUpperCase
* WebApplicationStyleManager.EnableNavigationGroupsUpperCase

Using the ASP.NET Web Forms Theme Tools（使用ASP.NET Web窗体主题工具）

It is possible to customize your XAF application with New Web UI using the ASP.NET Web Forms Theme Tools, such as ASP.NET Web Forms Theme Deployer and ASP.NET Web Forms Theme Builder. Refer to the How to: Use Custom Themes in ASP.NET Web Forms Applications to learn how to customize a built-in XafTheme theme.
可以使用ASP.NET的Web窗体主题工具（例如ASP.NET Web窗体主题部署器和ASP.NET Web窗体主题生成器）使用新Web UI自定义XAF应用程序。请参阅如何：在ASP.NET Web窗体应用程序中使用自定义主题以了解如何自定义内置XafTheme主题。

Classic Web UI（经典Web UI）

By default, the new web UI is used in XAF ASP.NET Web Forms applications, but you can switch to the classic style. Edit the Global.asax.cs file. Comment the WebApplication.SwitchToNewStyle method call in the Session_Start method.
默认情况下，新的Web UI用于XAF ASP.NET Web窗体应用程序，但您可以切换到经典样式。编辑Global. asax.cs文件。注释Session_Start方法中的WebApplication.SwitchToNewStyle方法调用。

C#
protected void Session_Start(object sender, EventArgs e) {
    WebApplication.SetInstance(Session, new MySolutionWebApplication());
    //WebApplication.Instance.SwitchToNewStyle();
    //...
}

You can customize the classic web UI using the following approaches.
您可以使用以下方法自定义经典Web UI。

Use Themes（使用主题）

Just like DevExpress ASP.NET Web Forms components, XAF supports themes and has more than a dozen available out of the box. When an ASP.NET Web Forms XAF application project is created, it references the DevExpress.Web.ASPxThemes.24.1.dll assembly. This assembly embeds all the resources that are required for applying a DevExpress theme to the entire web application automatically. By default, the Office2010Blue theme is used because of the following settings in your Web.config file.
就像DevExpress ASP.NET Web窗体组件一样，XAF支持主题，并且有十几个开箱即用的。创建ASP.NET Web窗体XAF应用程序项目时，它会引用DevExpress. Web.ASPxThemes.24.1.dll程序集。该程序集嵌入了将DevExpress主题自动应用于整个Web应用程序所需的所有资源。默认情况下，由于Web.config文件中的以下设置，因此使用了office2010Blue主题。

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

Note
When using ASP.NET Web Forms 4, note that XAF does not support ClientIDMode.Static ClientID generation mode. So, the following declaration is incorrect.
使用ASP.NET Web Forms 4时，请注意XAF不支持ClientIDMode. Static ClientID生成模式。

<themes enableThemesAssembly="true" theme="Office2010Blue" clientIDMode="Static"/>

End-users can also switch between deployed themes using the ChooseTheme Action implemented in the ChooseThemeController.
最终用户还可以使用ChooseThemeController中实现的ChooseTheme Action在已部署主题之间切换。
在这里插入图片描述

A selected theme is persisted in user browser cookies. So, the theme will be applied every time a user runs the application.
选定的主题保留在用户浏览器cookie中。因此，每次用户运行应用程序时都会应用该主题。

Note
To learn how to use custom themes, refer to the How to: Use Custom Themes in ASP.NET Web Forms Applications topic.
要了解如何使用自定义主题，请参阅如何：在ASP.NET Web窗体应用程序中使用自定义主题主题。

Templates（模板）

There are two main window Templates - DefaultTemplateContent and DefaultVerticalTemplateContent. The DefaultVerticalTemplateContent Template is the main window’s standard Template with the vertical navigation bar. It consumes more space than DefaultTemplateContent, but more navigation items can fit.
有两个主窗口模板——DefaultTemplateContent和DefaultVerticalTemplateContent。DefaultVerticalTemplateContent模板是主窗口的标准模板，带有垂直导航栏。它比DefaultTemplateContent占用更多空间，但可以容纳更多导航项。
在这里插入图片描述

The DefaultTemplateContent Template is an optional template that has horizontally aligned navigation tabs that conserve the main window’s space.
DefaultTemplateContent模板是一个可选模板，它具有水平对齐的导航选项卡，可以节省主窗口的空间。
在这里插入图片描述

To use the DefaultTemplateContent Template for the main window instead of DefaultVerticalTemplateContent, set the static WebApplication.PreferredApplicationWindowTemplateType property to TemplateType.Horizontal in the ASP.NET Web Forms application’s Session_Start event handler (you can find this handler code in the Global.asax.cs file).
要将DefaultTemplateContent模板用于主窗口而不是DefaultVerticalTemplateContent，请在ASP.NET Web窗体应用程序的Session_Start事件处理程序中将静态WebApplication.PreferredApplicationWindowTemplateType属性设置为TemplateType. Horizontal（可以在Global.asax.cs文件中找到此处理程序代码）。

C#
using DevExpress.ExpressApp.Web.Templates;
// ...
protected void Session_Start(Object sender, EventArgs e) {
    WebApplication.PreferredApplicationWindowTemplateType = TemplateType.Horizontal;
    // ...
}

Web Browser Configuration（网页浏览器配置）

XAF supports browsers that are supported by DevExpress web controls.
XAF支持DevExpress Web控件支持的浏览器。

Most web browsers allow you to zoom in and out of displayed pages. ASP.NET Web Forms XAF applications do not support this feature. Make sure that your web browser zoom level is set at 100% to ensure a correct View layout.
大多数Web浏览器允许您放大和缩小显示的页面。ASP.NET Web窗体XAF应用程序不支持此功能。请确保您的Web浏览器缩放级别设置为100%，以确保正确的视图布局。