Задание стиля приложений Xamarin.Forms с помощью каскадных таблиц стилей (CSS)Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)

Загрузить образец загрузить примерDownload Sample Download the sample

Xamarin.Forms поддерживает стили визуальных элементов с помощью каскадных таблиц стилей (CSS).Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

Приложения Xamarin.Forms можно применить различные стили с помощью 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. В следующем примере кода показан код CSS с Xamarin.Forms: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.Forms анализируются и вычисляется во время выполнения, а не время компиляции таблицы стилей 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.

Примечание

В настоящее время все стили, возможна с помощью стилей XAML не может выполняться с CSS.Currently, all of the styling that's possible with XAML styling cannot be performed with CSS. Тем не менее стили XAML можно использовать в дополнение к CSS для свойств, которые в настоящее время не поддерживаются в Xamarin.Forms.However, XAML styles can be used to supplement CSS for properties that are currently unsupported by Xamarin.Forms. Дополнительные сведения о стилях XAML см. в разделе Задание стиля приложений Xamarin.Forms с помощью стилей XAML.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:

Страница MonkeyApp Main с Дизайн CSSMonkeyApp Main Page with CSS styling

Страница сведений MonkeyApp с Дизайн CSSMonkeyApp Detail Page with CSS styling

Использование стилейConsuming a style sheet

Процесс добавления стилей к решению выглядит следующим образом:The process for adding a style sheet to a solution is as follows:

  1. Добавьте пустой CSS-файл в проект библиотеки .NET Standard.Add an empty CSS file to your .NET Standard library project.
  2. Задайте действие сборки файла CSS EmbeddedResource.Set 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

Таблицу стилей можно загружать и синтаксический анализ при помощи StyleSheet класса перед добавлением ResourceDictionary :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 Свойство задает стилей как URI относительно расположения внешнего файла XAML или относительно корневого каталога проекта, если 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#, таблицу стилей можно загрузить как внедренный ресурс и добавить к ResourceDictionary :In C#, a style sheet can be loaded as an embedded resource and added to a ResourceDictionary:

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

        this.Resources.Add(StyleSheet.FromAssemblyResource(
            IntrospectionExtensions.GetTypeInfo(typeof(MyPage)).Assembly,
            "MyProject.Assets.styles.css"));
    }
}

Первый аргумент StyleSheet.FromAssemblyResource метода сборки, содержащий таблицу стилей, а второй аргумент — string , представляющим собой идентификатор ресурса.The first argument to the StyleSheet.FromAssemblyResource method is the assembly containing the style sheet, while the second argument is a string representing the resource identifier. Идентификатор ресурса можно получить из свойства окно при выборе файла CSS.The resource identifier can be obtained from the Properties window when the CSS file is selected.

Кроме того, можно загрузить таблицу стилей из StringReader и добавляемый ResourceDictionary :Alternatively, 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 метод TextReader который считан стилей.The 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 элементы, которые используют таблицу стилей и задает фоновый цвет для lightgray.This selector identifies any ContentPage elements that consume the style sheet, and sets their background color to lightgray.

Примечание

^base Селектор относится к Xamarin.Forms и не является частью спецификации 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:Name элемента.However, if the StyleId property is not set, the selector will fall back to using the x:Name of the element. Таким образом, в следующем примере XAML #listView селектор определит ListView которого x:Name атрибуту присваивается listViewи назначит цвет фона lightgray.Therefore, 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;
}

Класс CSS могут быть назначены элемент XAML, задав StyleClass свойство элемента, требуется имя класса CSS.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 класс назначаются второй Label.Therefore, 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 element селектор:Child elements in the visual tree can be selected with the case insensitive element element selector:

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

Этот выбор определяет любой Image элементы, являющиеся дочерними для ListView элементов и устанавливает их высоту и ширину до 60.This selector identifies any Image elements that are children of ListView elements, and sets their height and width to 60. Таким образом, в следующем примере XAML listview image селектор определит Image , является дочерним элементом ListView и задает его высоту и ширину до 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;
}

Этот выбор определяет любой Image элементы, которые являются прямыми потомками StackLayout элементов и устанавливает их высоту и ширину 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 селектор определит Image это является прямым потомком StackLayout и присваивает его высоту и ширину 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.Forms поддерживает следующие селекторы CSS: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:Name.If StyleId is not set, fallback to x:Name. При использовании XAML, x:Name предпочтительнее, чем StyleId.When 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 Выбирает все Label элементов внутри StackLayout.Selects all Label elements inside a StackLayout. Обратите внимание, что этот селектор без учета регистра.Note that this selector is case insensitive.
element>element stacklayout>label Выбирает все Label элементов при помощи StackLayout как непосредственным родительским.Selects all Label elements with StackLayout as a direct parent. Обратите внимание, что этот селектор без учета регистра.Note that this selector is case insensitive.
element+element label+entry Выбирает все Entry элементы, непосредственно следующие за Label.Selects all Entry elements directly after a Label. Обратите внимание, что этот селектор без учета регистра.Note that this selector is case insensitive.
element~element label~entry Выбирает все Entry элементов предшествует Label.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.email.Selectors 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

Следующие свойства CSS, поддерживаемых Xamarin.Forms (в значения столбцов, типы являются курсивом, тогда как строковые литералы являются gray):The following CSS properties are supported by Xamarin.Forms (in the Values column, types are italic, while string literals are gray):

Свойство.Property Применение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 | flex-end | initialstretch | center | start | end | flex-start | flex-end | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | flex-start | flex-end | initialauto | stretch | center | start | end | flex-start | flex-end | initial align-self: flex-end;
background-color VisualElement Цвет | initialcolor | initial background-color: springgreen;
background-image Page Строка | 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 Double | initialdouble | initial border-radius: 10;
border-width Button, ImageButtonButton, ImageButton Double | initialdouble | initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePickerActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker Цвет | initialcolor | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid Double | 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 | column-reverse | initialcolumn | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement число с плавающей запятой | auto | initial.float | 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 число с плавающей запятой | initialfloat | initial flex-grow: 1.5;
flex-shrink VisualElement число с плавающей запятой | 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 Строка | initialstring | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span двойные | 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 Double | 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 Label, SpanLabel, Span Double | 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 Double | initialdouble | initial min-height: 50;
min-width VisualElement Double | initialdouble | initial min-width: 112;
opacity VisualElement Double | 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 Double | initialdouble | initial padding-left: 3;
padding-top Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page Double | initialdouble | initial padding-top: 4;
padding-right Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page Double | initialdouble | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page Double | initialdouble | initial padding-bottom: 6;
position FlexLayout relative | absolute | initialrelative | absolute | initial position: absolute;
row-gap Grid Double | initialdouble | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBarEntry, EntryCell, Label, SearchBar left | top | right | bottom | start | center | middle | end | initial.left | top | right | bottom | start | center | middle | end | initial. left и right следует избегать в средах справа налево.left and right should be avoided in right-to-left environments. text-align: right;
text-decoration Label, SpanLabel, 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 двойные, double | initialdouble, double | initial transform-origin: 7.5, 12.5;
vertical-align Label left | top | right | bottom | start | center | middle | end | initialleft | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | initialtrue | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement Double | 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: initial.all: initial.
  • Свойства макета (поле или сетки).Layout properties (box, or grid).
  • Собирательные свойства, такие как font, и border.Shorthand 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 свойство, которое имеет значение по умолчанию из inherit.The one exception is the direction property, which has a default value of inherit.

Конкретные свойства Xamarin.FormsXamarin.Forms specific properties

Также поддерживаются следующие свойства CSS Xamarin.Forms для конкретных (в значения столбцов, типы являются курсивом, тогда как строковые литералы являются gray):The following Xamarin.Forms specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

Свойство.Property ПрименениеApplies to ЗначенияValues ПримерExample
-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-max-length Entry, EditorEntry, Editor int | initialint | initial -xf-max-length: 20;
-xf-bar-background-color NavigationPage, TabbedPageNavigationPage, TabbedPage Цвет | initialcolor | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPageNavigationPage, TabbedPage Цвет | initialcolor | initial -xf-bar-text-color: gray
-xf-orientation ScrollView, StackLayoutScrollView, StackLayout horizontal | vertical | both | initial.horizontal | vertical | both | initial. both поддерживается только на ScrollView.both is only supported on a ScrollView. -xf-orientation: horizontal;
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-min-track-color Slider Цвет | initialcolor | initial -xf-min-track-color: yellow;
-xf-max-track-color Slider Цвет | initialcolor | initial -xf-max-track-color: red;
-xf-thumb-color Slider Цвет | initialcolor | initial -xf-thumb-color: limegreen;
-xf-spacing StackLayout Double | initialdouble | initial -xf-spacing: 8;

Конкретные свойства оболочки Xamarin.FormsXamarin.Forms Shell specific properties

Также поддерживаются следующие свойства CSS Xamarin.Forms оболочки для конкретных (в значения столбцов, типы являются курсивом, тогда как строковые литералы являются gray):The following Xamarin.Forms Shell specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

Свойство.Property Применение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;

ColorColor

Следующие color поддерживаются значения:The following color values are supported:

  • X11 цвета, который соответствует цветов CSS, предварительно определенные цвета UWP и Xamarin.Forms цвета.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: 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.

CSS в Xamarin.Forms с помощью Xamarin.UniversityCSS in Xamarin.Forms with Xamarin.University

Xamarin.Forms 3.0 CSS видеоXamarin.Forms 3.0 CSS video