CSS 样式

项目
01/20/2021

重要

此项目是实验性版本。我们希望你试用实验性移动 Blazor 绑定，并在中 https://github.com/xamarin/MobileBlazorBindings提供反馈。

概述

使用移动 Blazor 绑定生成的应用程序具有可用于控制 UI 外观的多种样式。这些样式可以直接应用于组件，也可以使用级联样式表 (CSS) 应用这些样式。使用 CSS 而不是直接样式的一些优点是，它可以更好地分离关注点 (也就是说，使组件样式与其布局和功能) 分离，并允许与其他媒体 (（例如 Web 应用) ）共享 CSS。

在项目中包括 CSS

若要向 Mobile Blazor 绑定项目添加 CSS，请执行以下操作：

在应用程序的共享 UI 项目中，右键单击任意文件夹并选择“添加”-> “添加新项”，然后选择“样式表”项类型 (如果找不到，请使用搜索功能查找 style sheet) 。
为样式表选择适当的名称，然后按“添加”。
根据需要编辑 CSS 文件的内容 (请参阅下文，了解支持的样式) 。例如，若要将所有标签设置为具有 large 字号，请执行以下操作：
```
label {
    font-size: large;
}
```
打开 .razor 要使用 CSS 的文件。

注意

许多应用将具有一个 CSS 文件，该文件包含在应用程序的main页中。
将以下标记添加到 .razor 文件，通常位于文件的顶层。更改 CSS 文件的名称和路径以匹配所创建的内容：
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

注意

CSS 支持需要引用 Xamarin.Forms 4.5 或更高版本。若要更新此引用，请管理解决方案的 NuGet 包，并确保解决方案使用的是 4.5 或更高版本的 Xamarin.Forms。移动 Blazor 绑定的未来版本默认包含此版本。

将 CSS 应用于组件

CSS 样式使用标准 CSS 语法在 CSS 文件中声明。样式是使用选择器指定的，这些选择器允许基于元素类型、基类、名称、类属性和几种其他方法应用样式， (请参阅下面的 Xamarin.Forms 引用) 。

在每个 .razor 允许 CSS 样式的组件上的文件中，可以分别通过 class 和 StyleId 属性设置类或名称。

注意

支持 CSS 样式的元素还具有 StyleClass 属性，该属性等效于属性 class 。如果需要通过 C# 以编程方式使用 class 属性，请使用转义语法 @class（如 myElement.@class），或使用 StyleClass 属性，例如 myElement.StyleClass。

示例 CSS 文件：

/* this rule applies to all labels */
label {
    font-size: large;
}

/* these rules apply only when this class is specified */
.happyText {
    color: green;
}

.sadText {
    color: red;
}

示例 Razor 文件片段：

<Label Text="Seattle" /> @* no class specified, so only 'label' rule applied *@
<Label class="happyText" Text="Weather: good" /> @* class is specified, so 'label' rule and '.happyText' rules applied *@
<Label class="sadText" Text="Traffic: bad" /> @* class is specified, so 'label' rule and '.sadText' rules applied *@

支持的 CSS 样式

由于内置 UI 组件基于 Xamarin.Forms 控件，因此请参阅使用 CSS 设置 Xamarin.Forms 应用的样式，详细了解此功能以及哪些样式可应用于哪些组件。

疑难解答

将“生成操作”设置为“嵌入资源”

在 Visual Studio 中添加新的 CSS 文件时，CSS 文件应自动 Build Action 将其设置为 Embedded resource ，以确保它包含在生成的项目中。如果不是，请右键单击 CSS 文件，选择“属性”，并将设置为 Build ActionEmbedded resource。

对子文件夹中的 CSS 使用正确的路径语法

如果 CSS 文件位于文件夹中，请使用其路径和正斜杠作为路径分隔符来指定其名称。例如，如果 CSS 文件为 <PROJECT ROOT>/assets/styles/MyApp.css，则将其包含在文件中的 .razor 标记为：

<StyleSheet Resource="assets/styles/MyApp.css" Assembly="GetType().Assembly"></StyleSheet>

通过