使用级联样式表(CSS)设置 Xamarin 格式的 Xamarin 应用程序Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)

下载示例 下载示例Download Sample Download the sample

Xamarin 支持使用级联样式表(CSS)对视觉元素进行样式设置。Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

Xamarin. 窗体应用程序可使用 CSS 进行样式设计。Xamarin.Forms applications can be styled using CSS. 样式表由规则列表组成,每个规则包含一个或多个选择器和一个声明块。A style sheet consists of a list of rules, with each rule consisting of one or more selectors and a declaration block. 声明块包含用括号括起来的声明列表,每个声明都包含一个属性、一个冒号和一个值。A declaration block consists of a list of declarations in braces, with each declaration consisting of a property, a colon, and a value. 当块中有多个声明时,分号将插入为分隔符。When there are multiple declarations in a block, a semi-colon is inserted as a separator. 下面的代码示例演示了一些与 Xamarin 兼容的 CSS:The following code example shows some Xamarin.Forms compliant CSS:

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

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
}

.mainPageTitle {
    font-style: bold;
    font-size: medium;
}

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

在 Xamarin 中,CSS 样式表在运行时进行分析和计算,而不是在编译时进行分析,并在使用时重新分析样式表。In Xamarin.Forms, CSS style sheets are parsed and evaluated at runtime, rather than compile time, and style sheets are re-parsed on use.

备注

目前,无法通过 CSS 对 XAML 样式设置进行任何设置。Currently, all of the styling that's possible with XAML styling cannot be performed with CSS. 但是,可以使用 XAML 样式来补充 Xamarin. Forms 当前不支持的属性的 CSS。However, XAML styles can be used to supplement CSS for properties that are currently unsupported by Xamarin.Forms. 有关 XAML 样式的详细信息,请参阅使用 XAML 样式设置 Xamarin.Forms 应用的样式For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

MonkeyAppCSS示例演示如何使用 CSS 为简单应用程序进行样式,并在以下屏幕截图中所示:The MonkeyAppCSS sample demonstrates using CSS to style a simple app, and is shown in the following screenshots:

具有 CSS 样式的 MonkeyApp 主页MonkeyApp Main Page with CSS styling

具有 CSS 样式的 MonkeyApp 详细信息页MonkeyApp Detail Page with CSS styling

使用样式表Consuming a style sheet

向解决方案添加样式表的过程如下所示:The process for adding a style sheet to a solution is as follows:

  1. 向 .NET Standard 库项目添加一个空的 CSS 文件。Add an empty CSS file to your .NET Standard library project.
  2. 将 CSS 文件的生成操作设置为EmbeddedResourceSet the build action of the CSS file to EmbeddedResource.

加载样式表Loading a style sheet

有多种方法可用于加载样式表。There are a number of approaches that can be used to load a style sheet.

XAMLXAML

在将样式表添加到ResourceDictionary之前,可以使用StyleSheet类对其进行加载和分析:A style sheet can be loaded and parsed with the StyleSheet class before being added to a ResourceDictionary:

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

StyleSheet.Source属性将样式表指定为相对于封闭 XAML 文件位置的 URI,如果 uri 以 /开头,则将相对于项目根指定样式表。The StyleSheet.Source property specifies the style sheet as a URI relative to the location of the enclosing XAML file, or relative to the project root if the URI starts with a /.

警告

如果 CSS 文件的生成操作未设置为EmbeddedResource,则该文件将无法加载。The CSS file will fail to load if its build action is not set to EmbeddedResource.

或者,可以使用StyleSheet类加载和分析样式表,然后再将其添加到ResourceDictionary,方法是将其内联到 CDATA 部分:Alternatively, a style sheet can be loaded and parsed with the StyleSheet class, before being added to a ResourceDictionary, by inlining it in a CDATA section:

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

有关资源字典的详细信息,请参阅资源字典For more information about resource dictionaries, see Resource Dictionaries.

C#C#

在C#中,可以从 StringReader 加载样式表,并将其添加到ResourceDictionary中:In C#, a style sheet can be loaded from a StringReader and added to a ResourceDictionary:

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 方法的参数是已读取样式表的 TextReaderThe argument to the StyleSheet.FromReader method is the TextReader that has read the style sheet.

选择元素和应用属性Selecting elements and applying properties

CSS 使用选择器来确定要定位的元素。CSS uses selectors to determine which elements to target. 具有匹配选择器的样式按定义顺序连续应用。Styles with matching selectors are applied consecutively, in definition order. 在特定项上定义的样式始终是最后应用的。Styles defined on a specific item are always applied last. 有关支持的选择器的详细信息,请参阅选择器引用For more information about supported selectors, see Selector Reference.

CSS 使用属性对选定元素进行样式。CSS uses properties to style a selected element. 每个属性都具有一组可能的值,而某些属性可能会影响任何类型的元素,而另一些属性则应用于元素组。Each property has a set of possible values, and some properties can affect any type of element, while others apply to groups of elements. 有关支持的属性的详细信息,请参阅属性参考For more information about supported properties, see Property Reference.

按类型选择元素Selecting elements by type

可视化树中的元素可以由类型选择,不区分大小写 element 选择器:Elements in the visual tree can be selected by type with the case insensitive element selector:

stacklayout {
    margin: 20;
}

此选择器标识页面上使用样式表的任何StackLayout元素,并将其边距设置为统一的宽度20。This selector identifies any StackLayout elements on pages that consume the style sheet, and sets their margins to a uniform thickness of 20.

备注

element 选择器不标识指定类型的子类。The element selector does not identify subclasses of the specified type.

按基类选择元素Selecting elements by base class

可视化树中的元素可由基类选择,不区分大小写 ^base 选择器:Elements in the visual tree can be selected by base class with the case insensitive ^base selector:

^contentpage {
    background-color: lightgray;
}

此选择器标识使用样式表的任何ContentPage元素,并将其背景色设置为 lightgrayThis selector identifies any ContentPage elements that consume the style sheet, and sets their background color to lightgray.

备注

^base 选择器特定于 Xamarin,不属于 CSS 规范。The ^base selector is specific to Xamarin.Forms, and isn't part of the CSS specification.

按名称选择元素Selecting an element by name

可视化树中的单个元素可以通过区分大小写 #id 选择器进行选择:Individual elements in the visual tree can be selected with the case sensitive #id selector:

#listView {
    background-color: lightgray;
}

此选择器标识其StyleId属性设置为 listView 的元素。This selector identifies the element whose StyleId property is set to listView. 但是,如果未设置 StyleId 属性,则选择器将回退到使用元素的 x:NameHowever, if the StyleId property is not set, the selector will fall back to using the x:Name of the element. 因此,在下面的 XAML 示例中,#listView 选择器将标识其 x:Name 特性设置为 listViewListView ,并将其背景色设置为 lightgrayTherefore, in the following XAML example, the #listView selector will identify the ListView whose x:Name attribute is set to listView, and will set it's background color to lightgray.

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

选择具有特定类特性的元素Selecting elements with a specific class attribute

可以使用区分大小写 .class 选择器选择具有特定类属性的元素:Elements with a specific class attribute can be selected with the case sensitive .class selector:

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

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

可以通过将元素的StyleClass属性设置为 css 类名称,将 CSS 类分配给 XAML 元素。A CSS class can be assigned to a XAML element by setting the StyleClass property of the element to the CSS class name. 因此,在下面的 XAML 示例中,.detailPageTitle 类定义的样式将分配给第一个Label,而 .detailPageSubtitle 类定义的样式将分配给第二个 LabelTherefore, in the following XAML example, the styles defined by the .detailPageTitle class are assigned to the first Label, while the styles defined by the .detailPageSubtitle class are assigned to the second Label.

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

选择子元素Selecting child elements

如果选择了不区分大小写,则可以选择可视化树中的子元素 element elementChild elements in the visual tree can be selected with the case insensitive element element selector:

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

此选择器标识作为ListView元素的子元素的任何Image元素,并将其高度和宽度设置为60。This selector identifies any Image elements that are children of ListView elements, and sets their height and width to 60. 因此,在下面的 XAML 示例中,listview image 选择器将标识是ListView的子级的Image ,并将其高度和宽度设置为60。Therefore, in the following XAML example, the listview image selector will identify the Image that's a child of the ListView, and sets its height and width to 60.

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

备注

element element 选择器不需要子元素成为父元素的_直接_子级–子元素可能具有不同的父元素。The element element selector does not require the child element to be a direct child of the parent – the child element may have a different parent. 如果祖先是指定的第一个元素,则会发生选择。Selection occurs provided that an ancestor is the specified first element.

选择直接子元素Selecting direct child elements

可以在可视化树中选择直接子元素,不区分大小写 element>element 选择器:Direct child elements in the visual tree can be selected with the case insensitive element>element selector:

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

此选择器标识作为StackLayout元素的直接子级的任何Image元素,并将其高度和宽度设置为200。This selector identifies any Image elements that are direct children of StackLayout elements, and sets their height and width to 200. 因此,在下面的 XAML 示例中,stacklayout>image 选择器将标识是StackLayout的直接子级的Image ,并将其高度和宽度设置为200。Therefore, in the following XAML example, the stacklayout>image selector will identify the Image that's a direct child of the StackLayout, and sets its height and width to 200.

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

备注

element>element 选择器要求子元素是父级的_直接_子级。The element>element selector requires that the child element is a direct child of the parent.

选择器引用Selector reference

Xamarin 支持以下 CSS 选择器。 Forms:The following CSS selectors are supported by Xamarin.Forms:

选择器Selector 示例Example 描述Description
.class .header 选择具有包含 "标头" 的 StyleClass 属性的所有元素。Selects all elements with the StyleClass property containing 'header'. 请注意,此选择器区分大小写。Note that this selector is case sensitive.
#id #email 选择 StyleId 设置为 email 的所有元素。Selects all elements with StyleId set to email. 如果未设置 StyleId,则回退到 x:NameIf StyleId is not set, fallback to x:Name. 使用 XAML 时,x:Name 优先于 StyleIdWhen using XAML, x:Name is preferred over StyleId. 请注意,此选择器区分大小写。Note that this selector is case sensitive.
* * 选择所有元素。Selects all elements.
element label 选择 Label 而不是子类类型的所有元素。Selects all elements of type Label, but not subclasses. 请注意,此选择器不区分大小写。Note that this selector is case insensitive.
^base ^contentpage 选择 ContentPage 作为基类的所有元素,包括 ContentPage 本身。Selects all elements with ContentPage as the base class, including ContentPage itself. 请注意,此选择器不区分大小写,并且不是 CSS 规范的组成部分。Note that this selector is case insensitive and isn't part of the CSS specification.
element,element label,button 选择所有 Button 元素和所有 Label 元素。Selects all Button elements and all Label elements. 请注意,此选择器不区分大小写。Note that this selector is case insensitive.
element element stacklayout label 选择 StackLayout 中的所有 Label 元素。Selects all Label elements inside a StackLayout. 请注意,此选择器不区分大小写。Note that this selector is case insensitive.
element>element stacklayout>label 选择 StackLayout 为直接父项的所有 Label 元素。Selects all Label elements with StackLayout as a direct parent. 请注意,此选择器不区分大小写。Note that this selector is case insensitive.
element+element label+entry 直接选择 Label 之后的所有 Entry 元素。Selects all Entry elements directly after a Label. 请注意,此选择器不区分大小写。Note that this selector is case insensitive.
element~element label~entry 选择前面带有 Label 的所有 Entry 元素。Selects all Entry elements preceded by a Label. 请注意,此选择器不区分大小写。Note that this selector is case insensitive.

具有匹配选择器的样式按定义顺序连续应用。Styles with matching selectors are applied consecutively, in definition order. 在特定项上定义的样式始终是最后应用的。Styles defined on a specific item are always applied last.

提示

选择器可以组合而不受限制,如 StackLayout>ContentView>label.emailSelectors can be combined without limitation, such as StackLayout>ContentView>label.email.

当前不支持以下选择器:The following selectors are currently unsupported:

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

备注

不支持的特征重写。Specificity, and specificity overrides are unsupported.

属性引用Property reference

Xamarin 格式支持以下 CSS 属性。窗体(在 "" 列中,类型是_斜体_,而字符串文字 gray):The following CSS properties are supported by Xamarin.Forms (in the Values column, types are italic, while string literals are gray):

PropertyProperty 适用对象Applies to Values 示例Example
align-content FlexLayout stretch | center | start | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initialstretch | center | start | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial align-content: space-between;
align-items FlexLayout stretch | center | start | end | flex-start | 0 1 2stretch | center | start | end | flex-start | flex-end | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | 0 1 2 3 4auto | stretch | center | start | end | flex-start | flex-end | initial align-self: flex-end;
background-color VisualElement 颜色| initialcolor | initial background-color: springgreen;
background-image Page string | initialstring | initial background-image: bg.png;
border-color Button中, Frame中, ImageButtonButton, Frame, ImageButton 颜色| initialcolor | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButtonBoxView, Button, Frame, ImageButton | initialdouble | initial border-radius: 10;
border-width ButtonImageButtonButton, ImageButton | initialdouble | initial border-width: .5;
color ActivityIndicatorBoxViewButtonCheckBoxDatePickerEditorEntryLabelPickerProgressBarSearchBarSwitchTimePickerActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker 颜色| initialcolor | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid | initialdouble | initial column-gap: 9;
direction VisualElement ltr | rtl | inherit | initialltr | rtl | inherit | initial direction: rtl;
flex-direction FlexLayout column | columnreverse | row | rowreverse | row-reverse | 0 1 2column | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement | initial float | autofloat | auto | initial. 此外,可以使用 % 符号指定范围0% 到100% 之间的百分比。In addition, a percentage in the range 0% to 100% can be specified with the % sign. flex-basis: 25%;
flex-grow VisualElement float | initialfloat | initial flex-grow: 1.5;
flex-shrink VisualElement float | initialfloat | initial flex-shrink: 1;
flex-wrap VisualElement nowrap | wrap | reverse | wrap-reverse | initialnowrap | wrap | reverse | wrap-reverse | initial flex-wrap: wrap-reverse;
font-family Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span string | initialstring | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span double | namedsize | initialdouble | namedsize | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initialbold | italic | initial font-style: bold;
height VisualElement | initialdouble | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initialstart | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial justify-content: flex-end;
line-height LabelSpanLabel, Span | initialdouble | initial line-height: 1.8;
margin View 厚度| initialthickness | initial margin: 6 12;
margin-left View 厚度| initialthickness | initial margin-left: 3;
margin-top View 厚度| initialthickness | initial margin-top: 2;
margin-right View 厚度| initialthickness | initial margin-right: 1;
margin-bottom View 厚度| initialthickness | initial margin-bottom: 6;
max-lines Label int | initialint | initial max-lines: 2;
min-height VisualElement | initialdouble | initial min-height: 50;
min-width VisualElement | initialdouble | initial min-width: 112;
opacity VisualElement | initialdouble | initial opacity: .3;
order VisualElement int | initialint | initial order: -1;
padding Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page 厚度| initialthickness | initial padding: 6 12 12;
padding-left Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page | initialdouble | initial padding-left: 3;
padding-top Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page | initialdouble | initial padding-top: 4;
padding-right Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page | initialdouble | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page | initialdouble | initial padding-bottom: 6;
position FlexLayout relative | absolute | initialrelative | absolute | initial position: absolute;
row-gap Grid | initialdouble | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBarEntry, EntryCell, Label, SearchBar left | top | right | bottom | start | 0 1 2 3 4 5 6。left | top | right | bottom | start | center | middle | end | initial. 在从右向左的环境中,应避免 leftrightleft and right should be avoided in right-to-left environments. text-align: right;
text-decoration LabelSpanLabel, Span none | underline | strikethrough | line-through | initialnone | underline | strikethrough | line-through | initial text-decoration: underline, line-through;
transform VisualElement none, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initialnone, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement doubledouble | initialdouble, double | initial transform-origin: 7.5, 12.5;
vertical-align Label left | top | right | bottom | start | 0 1 2 3 4 5 6left | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | 0true | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement | initialdouble | initial min-width: 320;

备注

initial 是所有属性的有效值。initial is a valid value for all properties. 它清除了从另一种样式设置的值(重置为默认值)。It clears the value (resets to default) that was set from another style.

当前不支持以下属性:The following properties are currently unsupported:

  • all: initialall: initial.
  • 布局属性(框或网格)。Layout properties (box, or grid).
  • 速记属性,如 fontborderShorthand properties, such as font, and border.

此外,没有 inherit 的值,因此不支持继承。In addition, there's no inherit value and so inheritance isn't supported. 因此,您不能这样做,例如,在布局上设置 font-size 属性,并期望布局中的所有Label实例继承值。Therefore you can't, for example, set the font-size property on a layout and expect all the Label instances in the layout to inherit the value. 一个例外情况是 direction 属性,该属性的默认值为 inheritThe one exception is the direction property, which has a default value of inherit.

面向 Span 元素具有一个已知问题,即元素和名称(使用 # 符号)阻止跨越成为 CSS 样式的目标。Targeting Span elements has a known issue preventing spans from being the target of CSS styles by both element and name (using the # symbol). Span 元素派生自 GestureElement,后者没有 StyleClass 属性,因此它不支持 CSS 类目标。The Span element derives from GestureElement, which does not have the StyleClass property so spans do not support CSS class targeting. 有关详细信息,请参阅无法将 CSS 样式应用于跨控件For more information, see Not able to apply CSS styling to Span control.

Xamarin 特定于窗体的属性Xamarin.Forms specific properties

以下 Xamarin. 还支持特定于窗体的 CSS 属性(在 "" 列中,类型为_斜体_,而字符串文字 gray):The following Xamarin.Forms specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

PropertyProperty 适用对象Applies to Values 示例Example
-xf-bar-background-color NavigationPageTabbedPageNavigationPage, TabbedPage 颜色| initialcolor | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPageTabbedPageNavigationPage, TabbedPage 颜色| initialcolor | initial -xf-bar-text-color: gray
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-max-length EntryEditorEntry, Editor int | initialint | initial -xf-max-length: 20;
-xf-max-track-color Slider 颜色| initialcolor | initial -xf-max-track-color: red;
-xf-min-track-color Slider 颜色| initialcolor | initial -xf-min-track-color: yellow;
-xf-orientation ScrollViewStackLayoutScrollView, StackLayout horizontal | vertical | both | initialhorizontal | vertical | both | initial. ScrollView 支持 bothboth is only supported on a ScrollView. -xf-orientation: horizontal;
-xf-placeholder Entry中, Editor中, SearchBarEntry, Editor, SearchBar 带引号的文本| initialquoted text | initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry中, Editor中, SearchBarEntry, Editor, SearchBar 颜色| initialcolor | initial -xf-placeholder-color: green;
-xf-spacing StackLayout | initialdouble | initial -xf-spacing: 8;
-xf-thumb-color SliderSwitchSlider, Switch 颜色| initialcolor | initial -xf-thumb-color: limegreen;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-vertical-text-alignment Label start | center | end | initialstart | center | end | initial -xf-vertical-text-alignment: end;
-xf-visual VisualElement string | initialstring | initial -xf-visual: material;

Xamarin。 Forms Shell 特定属性Xamarin.Forms Shell specific properties

以下 Xamarin。还支持以下 Xamarin Shell 特定 CSS 属性(在 "" 列中,类型为_斜体_,而字符串文字 gray):The following Xamarin.Forms Shell specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

PropertyProperty 适用对象Applies to Values 示例Example
-xf-flyout-background Shell 颜色| initialcolor | initial -xf-flyout-background: red;
-xf-shell-background Element 颜色| initialcolor | initial -xf-shell-background: green;
-xf-shell-disabled Element 颜色| initialcolor | initial -xf-shell-disabled: blue;
-xf-shell-foreground Element 颜色| initialcolor | initial -xf-shell-foreground: yellow;
-xf-shell-tabbar-background Element 颜色| initialcolor | initial -xf-shell-tabbar-background: white;
-xf-shell-tabbar-disabled Element 颜色| initialcolor | initial -xf-shell-tabbar-disabled: black;
-xf-shell-tabbar-foreground Element 颜色| initialcolor | initial -xf-shell-tabbar-foreground: gray;
-xf-shell-tabbar-title Element 颜色| initialcolor | initial -xf-shell-tabbar-title: lightgray;
-xf-shell-tabbar-unselected Element 颜色| initialcolor | initial -xf-shell-tabbar-unselected: cyan;
-xf-shell-title Element 颜色| initialcolor | initial -xf-shell-title: teal;
-xf-shell-unselected Element 颜色| initialcolor | initial -xf-shell-unselected: limegreen;

颜色Color

支持以下 color 值:The following color values are supported:

  • X11颜色,与 CSS 颜色、UWP 预定义颜色和 Xamarin 颜色匹配。X11 colors, which match CSS colors, UWP pre-defined colors, and Xamarin.Forms colors. 请注意,这些颜色值不区分大小写。Note that these color values are case insensitive.
  • 十六进制颜色: #rgb#argb#rrggbb#aarrggbbhex colors: #rgb, #argb, #rrggbb, #aarrggbb
  • rgb 颜色: rgb(255,0,0)rgb(100%,0%,0%)rgb colors: rgb(255,0,0), rgb(100%,0%,0%). 值介于0-255 到 0%-100% 之间。Values are in the range 0-255, or 0%-100%.
  • rgba 颜色: rgba(255, 0, 0, 0.8)rgba(100%, 0%, 0%, 0.8)rgba colors: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). 不透明度值介于 0.0-1.0 之间。The opacity value is in the range 0.0-1.0.
  • hsl 颜色: hsl(120, 100%, 50%)hsl colors: hsl(120, 100%, 50%). H 值的范围为0-360,而 s 和 l 介于 0%-100% 范围内。The h value is in the range 0-360, while s and l are in the range 0%-100%.
  • hsla colors: hsla(120, 100%, 50%, .8)hsla colors: hsla(120, 100%, 50%, .8). 不透明度值介于 0.0-1.0 之间。The opacity value is in the range 0.0-1.0.

ThicknessThickness

支持一个、两个、三个或四个 thickness 值,每个值由空格分隔:One, two, three, or four thickness values are supported, each separated by white space:

  • 单个值指示均匀宽度。A single value indicates uniform thickness.
  • 两个值指示垂直和水平宽度。Two values indicate vertical then horizontal thickness.
  • 三个值指示顶部,然后是水平(左和右),然后是底部粗细。Three values indicate top, then horizontal (left and right), then bottom thickness.
  • 四个值指示 "上"、"右"、"下" 和 "左" 粗细。Four values indicate top, then right, then bottom, then left thickness.

备注

CSS thickness 值与 XAML Thickness值不同。CSS thickness values differ from XAML Thickness values. 例如,在 XAML 中,两值 Thickness 指示水平和垂直粗细,而四个值的 Thickness 指示左、上、右、下粗细。For example, in XAML a two-value Thickness indicates horizontal then vertical thickness, while a four-value Thickness indicates left, then top, then right, then bottom thickness. 此外,XAML Thickness 值以逗号分隔。In addition, XAML Thickness values are comma delimited.

NamedSizeNamedSize

支持以下不区分大小写 namedsize 值:The following case insensitive namedsize values are supported:

  • default
  • micro
  • small
  • medium
  • large

每个 namedsize 值的确切含义取决于平台和视图相关。The exact meaning of each namedsize value is platform-dependent and view-dependent.

采用 Xamarin 的 Xamarin 形式的 CSS。CSS in Xamarin.Forms with Xamarin.University

Xamarin 3.0 CSS 视频Xamarin.Forms 3.0 CSS video