学习010-07-04-01 How to: Customize ASP.NET Core Blazor UI Elements Using CSS（如何：使用 CSS 自定义用户界面元素）

How to: Customize ASP.NET Core Blazor UI Elements Using CSS（如何：使用 CSS 自定义 ASP.NET Core Blazor 用户界面元素）

This topic explains how CSS classes can help you with common appearance customization tasks in XAF ASP.NET Core Blazor applications. You can use CSS to customize different types of UI elements, such as Actions or layout groups displayed in a Detail View.
本主题介绍CSS类如何帮助您完成XAF ASP.NET Core Blazor应用程序中的常见外观自定义任务。您可以使用CSS自定义不同类型的UI元素，例如详细信息视图中显示的操作或布局组。

Examples in this topic apply customizations to the Employee Detail View from the MainDemo demo project. This project is installed as a part of the XAF package. The default project location is %PUBLIC%\Documents\DevExpress Demos 24.1\Components\XAF.
本主题中的示例将自定义应用于MainDemo演示项目中的员工详细信息视图。此项目作为XAF包的一部分安装。默认项目位置是%PUBLIC%\Documents\DevExpress Demos 24.1\Components\XAF。

Common Steps（常见步骤）

To apply a CSS class to a UI element:
要将CSS类应用于UI元素：

1.Set the CustomCSSClassName property of an appropriate element (IModelViewLayoutElementBlazor.CustomCSSClassName or IModelActionBlazor.CustomCSSClassName) to a new CSS class name in the Model Editor.
在模型编辑器中将适当元素（IModelViewLayoutElementBlazorCustomCSSClassName或IModelActionBlazor. CustomCSSClassName）的CustomCSSClassName属性设置为新的CSS类名。

2.Run the application and use the page Inspector tools to locate the newly created class name on the corresponding Detail View page.
运行应用程序并使用页面检查器工具在相应的详细信息视图页面上找到新创建的类名。

3.Fin the DOM elements you need to customize and review their CSS classes to build a proper selector.
查找您需要自定义和查看其CSS类以构建适当选择器的DOM元素。

4.Use Developer Tools to adjust CSS rules and edit the element according to your needs.
使用开发者工具根据您的需要调整CSS规则并编辑元素。

5.Add these rules with the appropriate selectors to the MySolution.Blazor.Server\wwwroot\css\site.css file.
将这些规则和适当的选择器添加到MySolutions. Blazor.Server\wwwroot\css\site.css文件中。

The following sections describe several popular use cases.
以下部分描述了几个流行的用例。

Scenarios（情景）

Change a Group Header’s Color（更改组标题的颜色）

This section explains how to change the font and background colors of the Details group header in the Employee Detail View.
本节介绍如何更改员工详细信息视图中详细信息组标题的字体和背景颜色。

1.Locate the following layout group in the Model Editor: Employee_DetailView > Layout > Main > SimpleEditors > Person. Set the CustomCSSClassName property to EmployeeInfoGroupStyle.
在模型编辑器中找到以下布局组： Employee_DetailView > Layout > Main > SimpleEditors > Person。将CustomCSSClassName属性设置为EmployeeInfoGroupStyle。

2.Run the application and use the page Inspector tools to locate the newly created class name on the corresponding Detail View page.
运行应用程序并使用页面检查器工具在相应的详细信息视图页面上找到新创建的类名。

3.Inspect the element’s markup to implement an appropriate CSS selector. This example customizes items with the dxbl-text and dxbl-group-header classes.
检查元素的标记以实现适当的CSS选择器。此示例使用dxbl-text和dxbl-group-head类自定义项目。

4.Add the following CSS rules to the site.css file:
将以下CSS规则添加到site. css文件中：

CSS
/* Change a header's font color */
.EmployeeInfoGroupStyle .dxbl-group .dxbl-group-header .dxbl-text {
    color: white;
}


/* Change a header's background color */
.EmployeeInfoGroupStyle .dxbl-group .dxbl-group-header {
    background-color: purple;
}

5.Save your changes and refresh the Employee Detail View page to see the result.
保存您的更改并刷新员工详细信息视图页面以查看结果。

Customize a Property Editor’s Label and Text Box Appearance（自定义属性编辑器的标签和文本框外观）

This section explains how to customize Property Editors displayed in a Detail View. The example below changes settings for the label and edit box of the First Name Property Editor. This editor is displayed in the Employee Detail View.
本节说明如何自定义详细信息视图中显示的属性编辑器。下面的示例更改名字属性编辑器的标签和编辑框的设置。此编辑器显示在员工详细信息视图中。

1.Locate the following layout element in the Model Editor: Employee_DetailView > Layout > Main > SimpleEditors > Person > Person_inner > Person_col1 > Person_col1a > FirstName. Set the CustomCSSClassName property to EmployeeFirstNameStyle.
在模型编辑器中找到以下布局元素：Employee_DetailView>Layout>Main>SimpleEditor>Person>Person_inner>Person_col1>Person_col1a>FirstName。将CustomCSSClassName属性设置为EmployeeFirstNameStyle。

2.Run the application and use the page Inspector tools to locate the newly created class name on the corresponding Detail View page.
运行应用程序并使用页面检查器工具在相应的详细信息视图页面上找到新创建的类名。

3.Inspect the element’s markup to implement an appropriate CSS selector. This example customizes items with the .dxbl-text and .dxbl-text-edit classes.
检查元素的标记以实现适当的CSS选择器。此示例使用. dxbl-text和.dxbl-text-dit类自定义项目。

4.Add the following CSS rules to the site.css file:
将以下CSS规则添加到site. css文件中：

CSS
/* Change a captions's font */
.EmployeeFirstNameStyle .dxbl-text {
    font-weight: bold;
}


/* Change an editor's text and color settings */
.EmployeeFirstNameStyle .dxbl-text-edit {
    background-color: purple;
    color: white;
    font-size: 14px;
}

5.Save your changes and refresh the Employee Detail View page to see the result.
保存您的更改并刷新员工详细信息视图页面以查看结果。

Add Colons to Property Editor Labels（将冒号添加到属性编辑器标签）

This section explains how to customize Property Editor labels. The example below walks you through the steps needed to add a colon (😃 to all editor labels displayed in the Employee Detail View.
本节介绍如何自定义属性编辑器标签。下面的示例将引导您完成向员工详细信息视图中显示的所有编辑器标签添加冒号（:）所需的步骤。

1.Locate the following layout group in the Model Editor: Employee_DetailView > Layout > Main. Set the CustomCSSClassName property to EmployeePropertyEditorCaptionStyle.
在模型编辑器中找到以下布局组：Employee_DetailView>Layout>Main。将CustomCSSClassName属性设置为EmployeePropertyEditorCaptionStyle。

2.Run the application and use the page Inspector tools to locate the newly created class name on the corresponding Detail View page.
运行应用程序并使用页面检查器工具在相应的详细信息视图页面上找到新创建的类名。

3.Inspect the element’s markup to implement an appropriate CSS selector. This example customizes items with the .label class.
检查元素的标记以实现适当的CSS选择器。此示例使用. label类自定义项目。

4.Add the following CSS rules to the site.css file:
将以下CSS规则添加到site. css文件中：

CSS
/* Change a captions's font */
.EmployeePropertyEditorCaptionStyle label::after {
    content: ":"
}

5.Save your changes and refresh the Employee Detail View page to see the result.
保存您的更改并刷新员工详细信息视图页面以查看结果。

Change Tab Color Settings（更改选项卡颜色设置）

This section explains how to customize the appearance settings of active and inactive tabs in a tabbed layout group. The following example changes the background and caption colors of all tabs displayed in the Employee Detail View.
本节说明如何自定义选项卡式布局组中活动和非活动选项卡的外观设置。以下示例更改员工详细信息视图中显示的所有选项卡的背景和标题颜色。

1.Locate the following tabbed group in the Model Editor: Employee_DetailView > Layout > Main > Tabs. Set the CustomCSSClassName property to EmployeeTabsStyle.
在模型编辑器中找到以下选项卡式组：Employee_DetailView > Layout > Main > Tabs。将CustomCSSClassName属性设置为雇员塔布风格。

2.Run the application and use the page Inspector tools to locate the newly created class name on the corresponding Detail View page.
运行应用程序并使用页面检查器工具在相应的详细信息视图页面上找到新创建的类名。

3.Inspect element markup to implement an appropriate CSS selector. This example customizes items with the .dxbl-active, .dxbl-text, and .dxbl-tabs-item classes.
检查元素标记以实现适当的CSS选择器。此示例使用. dxbl-active、.dxbl-text和.dxbl-tabs-item类自定义项目。

4.Add the following CSS rules to the site.css file:
将以下CSS规则添加到site. css文件中：

CSS
/* Change an active tab's background and text color */
.EmployeeTabsStyle .dxbl-tabs .dxbl-scroll-viewer .dxbl-scroll-viewer-content .dxbl-active {
    background-color: purple !important;
}


.EmployeeTabsStyle .dxbl-tabs .dxbl-scroll-viewer .dxbl-scroll-viewer-content .dxbl-active .dxbl-text {
    color: white;
}


/* Change the background color for all inactive tabs */
.EmployeeTabsStyle .dxbl-tabs .dxbl-scroll-viewer .dxbl-scroll-viewer-content .dxbl-tabs-item {
    background-color: thistle;
}

5.Save your changes and refresh the Employee Detail View page to see the result.
保存您的更改并刷新员工详细信息视图页面以查看结果。

Customize an Action’s Appearance（自定义动作的外观）

This section describes two approaches used for Action customization.
本节介绍用于Action自定义的两种方法。

The first approach allows you to specify the CustomCssClassName property in the Model Editor.
第一种方法允许您在模型编辑器中指定CustomCssClassName属性。

When you set the Action’s CustomCSSClassName property to a CSS class name, the change is applied to this Action in all the Views where it appears.
当您将Action的CustomCSSClassName属性设置为CSS类名时，更改将应用于它出现的所有视图中的此Action。

Second, is to set the required CSS class name through a Controller.
其次，是通过Controller设置所需的CSS类名。

This approach allows you to apply a CSS rule to the Action in a specified View only.
此方法仅允许您将CSS规则应用于指定视图中的Action。

Refer to the subsections below for more information.
有关更多信息，请参阅下面的小节。

Use the CustomCssClassName Property（使用CustomCssClassName属性）

The following example changes the background and text colors of the New Action. This customization has an effect on all Views that display this action.
以下示例更改新操作的背景和文本颜色。此自定义对显示此操作的所有视图都有影响。

1.Locate the following Action node in the Model Editor: Main Demo > ActionDesign > Actions > New. Set the CustomCSSClassName property to NewActionStyle.
在模型编辑器中找到以下操作节点： Main Demo > ActionDesign > Actions > New。将CustomCSSClassName属性设置为NewActionStyle。

2.Run the application and use the page Inspector tools to locate the newly created class name on the corresponding Detail View page.
运行应用程序并使用页面检查器工具在相应的详细信息视图页面上找到新创建的类名。

3.Inspect the element’s markup to implement an appropriate CSS selector. This example customizes items with the .NewActionStyle class.
检查元素的标记以实现适当的CSS选择器。此示例使用. NewActionStyle类自定义项目。

4.Add the following CSS rules to the site.css file:
将以下CSS规则添加到site. css文件中：

CSS
/* Change an Action's background and text color */
.NewActionStyle {
    background: purple;
    color: white;
}

5.Save your changes and refresh the Employee Detail View page to see the result.
保存您的更改并刷新员工详细信息视图页面以查看结果。

Use a Controller（使用控制器）

The following example changes the New Action’s color settings in the Employee > Details Detail View only.
以下示例仅更改 Employee > Details详细信息视图中的新操作颜色设置。

1.Add the following CSS rule to the site.css file:
将以下CSS规则添加到site. css文件中：

CSS
/* Change an Action's background and text color */
.NewActionStyle {
    background: purple;
    color: white;
}

2.Create a new CustomizeEmployeeDetailViewAction Controller. The created Controller should be a descendant of the Controller class.
创建一个新的CustomizeEmployeeDetailViewActionController。创建的Controller应该是Controller类的后代。

3.Handle the CustomizeControl event to apply the NewActionStyle CSS class to the New Action.
处理CustomizeControl事件以将NewActionStyle CSS类应用于New Action。

C#
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Blazor.Templates.Toolbar.ActionControls;
using DevExpress.ExpressApp.SystemModule;


public class CustomizeEmployeeDetailViewAction : Controller {
    const string EmployeeDetailViewId = "Employee_DetailView";
    DxToolbarItemSingleChoiceActionControl? actionControl = null;
    NewObjectViewController? newObjectViewController;


    protected override void OnActivated() {
        base.OnActivated();
        newObjectViewController = Frame.GetController<NewObjectViewController>();
        if(newObjectViewController != null) {
            newObjectViewController.NewObjectAction.CustomizeControl += NewObjectAction_CustomizeControl;
            Frame.ViewChanged += Frame_ViewChanged;
        }
    }


    private void NewObjectAction_CustomizeControl(object? sender, CustomizeControlEventArgs e) {
        actionControl = (DxToolbarItemSingleChoiceActionControl)e.Control;
        CustomizeNewActionControl();
    }


    private void Frame_ViewChanged(object? sender, ViewChangedEventArgs e) {
        CustomizeNewActionControl();
    }


    private void CustomizeNewActionControl() {
        if(actionControl != null) {
            if(Frame.View?.Id == EmployeeDetailViewId) {
                actionControl.ToolbarItemModel.CssClass += " NewActionStyle";
            } else if(actionControl.ToolbarItemModel.CssClass != null) {
                actionControl.ToolbarItemModel.CssClass = actionControl.ToolbarItemModel.CssClass.Replace(" NewActionStyle", string.Empty);
            }
        }
    }


    protected override void OnDeactivated() {
        base.OnDeactivated();
        if(newObjectViewController != null) {
            newObjectViewController.NewObjectAction.CustomizeControl -= NewObjectAction_CustomizeControl;
            newObjectViewController = null;
            Frame.ViewChanged -= Frame_ViewChanged;
        }
    }
}

4.Save your changes and refresh the Employee Detail View page to see the result.
保存您的更改并刷新员工详细信息视图页面以查看结果。

Enable CSS Isolation for Custom Components（为自定义组件启用CSS隔离）

The Blazor CSS isolation feature allows you to create component-specific styles and avoid styling conflicts between components and libraries. Blazor supports CSS isolation beginning with .NET 5.0. For an example of using CSS isolation with DevExpress components, refer to the following topic: CSS Isolation.
Blazor CSS隔离功能允许您创建特定于组件的样式，并避免组件和库之间的样式冲突。Blazor支持CSS隔离。NET 5.0。有关将CSS隔离与DevExpress组件一起使用的示例，请参阅以下主题：CSS隔离。

XAF generates projects without component-specific styles, so the bundled stylesheet is not added to these projects. To enable isolated styles in your project, uncomment the following wizard-generated link in the Pages/Host.cshtml file or add it manually:
XAF生成的项目没有特定于组件的样式，因此捆绑的样式表不会添加到这些项目中。要在项目中启用隔离样式，请在Pages/Host. cshtml文件中取消注释以下向导生成的链接或手动添加它：

CSHTML
// Uncomment this link to enable CSS isolation. For more information, refer to the following topic: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-7.0.
<link href="YourSolutionName.Blazor.Server.styles.css" rel="stylesheet">

Note
The YourSolutionName.Blazor.Server.styles.css file is generated when at least one component in the YourSolutionName.Blazor.Server project contains a CSS file as described in the Microsoft documentation: Enable CSS isolation. Otherwise, the 404 (Not Found) error occurs.
当YourSolutionName. Blazor.Server项目中至少有一个组件包含Microsoft留档：启用CSS隔离中所述的CSS文件时，将生成YourSolutionName.Blazor.Server.style.css文件。否则，会发生404（未找到）错误。