使用级联样式表为应用程序设置样式

.NET 多平台应用 UI （.NET MAUI） 应用可以使用级联样式表（CSS）进行样式设置。 样式表由规则列表组成，每个规则由一个或多个选择器和声明块组成。 声明块由大括号中的声明列表组成，每个声明由属性、冒号和值组成。 当块中有多个声明时，分号将作为分隔符插入。

以下示例演示了一些符合 .NET MAUI 的 CSS：

navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

listview image {
    height: 60;
    width: 60;
}

stacklayout>image {
    height: 200;
    width: 200;
}

在 .NET MAUI 中，CSS 样式表在运行时进行分析和评估，而不是编译时，样式表将在使用时重新分析。

使用样式表

将样式表添加到 .NET MAUI 应用的过程如下所示：

1. 将空 CSS 文件添加到 .NET MAUI 应用项目。 CSS 文件可以放置在任何文件夹中，资源 文件夹是推荐的位置。
2. 将 CSS 文件的生成操作设置为 MauiCss。

加载样式表

有多种方法可用于加载样式表。

在 XAML 中加载样式表

在将样式表添加到 ResourceDictionary之前，可以先使用 StyleSheet 类加载并解析它。

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

StyleSheet.Source 属性将样式表指定为相对于封闭 XAML 文件位置的 URI，或者如果 URI 以 /开头，则指定为相对于项目根目录的 URI。

在将样式表内联到 ResourceDictionary并添加之前，可以通过使用 StyleSheet 类加载和解析样式表的方式，放入 CDATA 节中：

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

有关资源字典的详细信息，请参阅 资源字典。

在 C 中加载样式表#

在 C# 中，可以从 StringReader 加载样式表并将其添加到 ResourceDictionary：

using Microsoft.Maui.Controls.StyleSheets;

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

StyleSheet.FromReader 方法的参数是已读取样式表的 TextReader。

选择元素并应用属性

CSS 使用选择器来确定要定位的元素。 按定义顺序连续应用具有匹配选择器的样式。 对特定项定义的样式始终最后应用。 有关支持的选择器的详细信息，请参阅 选择器参考。

CSS 使用属性设置所选元素的样式。 每个属性都有一组可能的值，一些属性可能会影响任何类型的元素，而另一些属性则适用于元素组。 有关支持的属性的详细信息，请参阅 属性参考。

如果子样式表和父样式表设置了相同的属性，子样式表将始终优先于父样式表。 因此，应用设置相同属性的样式时，将遵循以下优先规则：

• 应用资源中定义的样式将被页面资源中定义的样式覆盖（如果它们设置了相同的属性）。
• 如果页面资源中定义的样式与控件资源中定义的样式设置了相同的属性，那么页面资源中的样式将会被覆盖。
• 如果控件资源中定义的样式与应用资源中定义的样式设置了相同的属性，应用资源中的样式将被覆盖。

按类型选择元素

在可视化树中，可以使用不区分大小写的 element 选择器按类型选择元素。

stacklayout {
    margin: 20;
}

此选择器标识使用样式表的页面上的任何 StackLayout 元素，并将页边距设置为 20 的统一粗细。

按基类选择元素

可视化树中的元素可以通过不区分大小写的 ^base 选择器来选择基类。

^contentpage {
    background-color: lightgray;
}

此选择器标识使用样式表的任何 ContentPage 元素，并将其背景色设置为 lightgray。

按名称选择元素

可以使用区分大小写 #id 选择器选择可视化树中的单个元素：

#listView {
    background-color: lightgray;
}

此选择器标识其 StyleId 属性设置为 listView的元素。 但是，如果未设置 StyleId 属性，选择器将回退到使用元素 x:Name。 因此，在以下示例中，#listView 选择器将标识其 x:Name 属性设置为 listView的 ListView，并将其背景色设置为 lightgray。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

选择具有特定类属性的元素

可以使用区分大小写 .class 选择器选择具有特定类属性的元素：

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

通过将元素的 StyleClass 属性设置为 CSS 类名称，可以将 CSS 类分配给 XAML 元素。 因此，在以下示例中，.detailPageTitle 类定义的样式将分配给第一个 Label，而 .detailPageSubtitle 类定义的样式则分配给第二个 Label。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

选择子元素

可以使用不区分大小写 element element 选择器选择可视化树中的子元素：

listview image {
    height: 60;
    width: 60;
}

此选择器标识 ListView 元素的任何 Image 子元素，并将其高度和宽度设置为 60 像素。 因此，在以下 XAML 示例中，listview image 选择器将标识 ListView的子级 Image，并将其高度和宽度设置为 60。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

选择直接子元素

可以通过不区分大小写 element>element 选择器选择可视化树中的直接子元素：

stacklayout>image {
    height: 200;
    width: 200;
}

此选择器标识 StackLayout 元素的直接子级的任何 Image 元素，并将其高度和宽度设置为 200。 因此，在下面的示例中，stacklayout>image 选择器将标识 StackLayout的直接子级 Image，并将其高度和宽度设置为 200。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            ...
            <Image ... />
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

选择器参考

.NET MAUI 支持以下 CSS 选择器：

按定义顺序连续应用具有匹配选择器的样式。 对特定项定义的样式始终最后应用。

不支持以下选择器：

• [attribute]
• @media 和 @supports
• : 和 ::

属性引用

.NET MAUI 支持以下 CSS 属性（在 值 列中，类型 斜体，而字符串文本 gray）：

不支持以下属性：

• all: initial。
• 布局属性（框或网格）。
• 速记属性，如 font和 border。

此外，没有 inherit 值，因此不支持继承。 因此，不能在布局上设置 font-size 属性，并期望布局中的所有 Label 实例继承该值。 一个例外是 direction 属性，该属性的默认值为 inherit。

.NET MAUI 特定属性

还支持以下特定于 .NET MAUI 的 CSS 属性（在 值 列中，类型 斜体，而字符串文本 gray）：

.NET MAUI Shell 特定属性

还支持以下特定于 .NET MAUI Shell 的 CSS 属性（在 值 列中，类型 斜体，而字符串文本 gray）：

颜色

支持以下 color 值：

• X11 颜色，与 CSS 颜色和 .NET MAUI 颜色匹配。 这些颜色值不区分大小写。
• 十六进制颜色：#rgb、#argb、#rrggbb、#aarrggbb
• rgb 颜色：rgb(255,0,0)，rgb(100%,0%,0%)。 值为 0-255 或 0%-100%。
• rgba 颜色：rgba(255, 0, 0, 0.8)、rgba(100%, 0%, 0%, 0.8)。 不透明度值在 0.0-1.0 范围内。
• hsl 颜色：hsl(120, 100%, 50%)。 h 值在 0-360 范围内，s 和 l 位于范围 0%-100%。
• hsla 颜色：hsla(120, 100%, 50%, .8)。 不透明度值在 0.0-1.0 范围内。

厚度

支持一个、两个、三个或四个 thickness 值，每个值用空格分隔：

• 单个值表示均匀的粗细。
• 两个值指示垂直厚度和水平厚度。
• 三个值分别指示顶部、左右水平，然后是底部的厚度。
• 四个值分别表示上、右、下、左的厚度。

功能

可以使用 linear-gradient() 和 radial-gradient() CSS 函数分别指定线性和径向渐变。 这些函数的结果应分配给控件的 background 属性。