Application de styles à des applications Xamarin. Forms à l’aide d’feuilles de style en cascade (CSS)Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)

Télécharger l’exemple Télécharger l’exempleDownload Sample Download the sample

Xamarin. Forms prend en charge le style des éléments visuels à l’aide d’feuilles de style en cascade (CSS).Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

Les applications Xamarin. Forms peuvent être stylisées à l’aide de CSS.Xamarin.Forms applications can be styled using CSS. Une feuille de style se compose d’une liste de règles, chaque règle comprenant un ou plusieurs sélecteurs et un bloc de déclaration.A style sheet consists of a list of rules, with each rule consisting of one or more selectors and a declaration block. Un bloc de déclaration se compose d’une liste de déclarations entre accolades, chaque déclaration composée d’une propriété, d’un signe deux-points et d’une valeur.A declaration block consists of a list of declarations in braces, with each declaration consisting of a property, a colon, and a value. Lorsqu’il y a plusieurs déclarations dans un bloc, un point-virgule est inséré comme séparateur.When there are multiple declarations in a block, a semi-colon is inserted as a separator. L’exemple de code suivant montre une CSS conforme à la norme 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;
}

Dans Xamarin. Forms, les feuilles de style CSS sont analysées et évaluées au moment de l’exécution, et non pas au moment de la compilation, et les feuilles de style sont réanalysées en cas d’utilisation.In Xamarin.Forms, CSS style sheets are parsed and evaluated at runtime, rather than compile time, and style sheets are re-parsed on use.

Notes

Actuellement, tout le style possible avec le style XAML ne peut pas être exécuté avec CSS.Currently, all of the styling that's possible with XAML styling cannot be performed with CSS. Toutefois, les styles XAML peuvent être utilisés pour compléter CSS pour les propriétés qui ne sont pas prises en charge actuellement par Xamarin. Forms.However, XAML styles can be used to supplement CSS for properties that are currently unsupported by Xamarin.Forms. Pour plus d’informations sur les styles XAML, consultez Styler des applications Xamarin.Forms avec des styles XAML.For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

L’exemple MonkeyAppCSS illustre l’utilisation de CSS pour styliser une application simple et est illustré dans les captures d’écran suivantes :The MonkeyAppCSS sample demonstrates using CSS to style a simple app, and is shown in the following screenshots:

Page principale MonkeyApp avec style CSSMonkeyApp Main Page with CSS styling

Page de détails MonkeyApp avec style CSSMonkeyApp Detail Page with CSS styling

Utilisation d’une feuille de styleConsuming a style sheet

Le processus d’ajout d’une feuille de style à une solution est le suivant :The process for adding a style sheet to a solution is as follows:

  1. Ajoutez un fichier CSS vide à votre projet de bibliothèque de .NET Standard.Add an empty CSS file to your .NET Standard library project.
  2. Définissez l’action de génération du fichier CSS sur EmbeddedResource.Set the build action of the CSS file to EmbeddedResource.

Chargement d’une feuille de styleLoading a style sheet

Il existe plusieurs approches qui peuvent être utilisées pour charger une feuille de style.There are a number of approaches that can be used to load a style sheet.

XAMLXAML

Une feuille de style peut être chargée et analysée avec la classe StyleSheet avant d’être ajoutée à un 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>

La propriété StyleSheet.Source spécifie la feuille de style en tant qu’URI par rapport à l’emplacement du fichier XAML englobant, ou par rapport à la racine du projet si l’URI commence par une /.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 /.

Avertissement

Le chargement du fichier CSS échoue si son action de génération n’a pas la valeur EmbeddedResource.The CSS file will fail to load if its build action is not set to EmbeddedResource.

Une feuille de style peut également être chargée et analysée avec la classe StyleSheet , avant d’être ajoutée à un ResourceDictionary, en l’incorporant dans une section 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>

Pour plus d’informations sur les dictionnaires de ressources, consultez dictionnaires de ressources.For more information about resource dictionaries, see Resource Dictionaries.

C#C#

Dans C#, une feuille de style peut être chargée à partir d’un StringReader et ajoutée à un 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));
        }
    }
}

L’argument de la méthode StyleSheet.FromReader est le TextReader qui a lu la feuille de style.The argument to the StyleSheet.FromReader method is the TextReader that has read the style sheet.

Sélection d’éléments et application de propriétésSelecting elements and applying properties

CSS utilise des sélecteurs pour déterminer les éléments à cibler.CSS uses selectors to determine which elements to target. Les styles avec des sélecteurs correspondants sont appliqués consécutivement, dans l’ordre de définition.Styles with matching selectors are applied consecutively, in definition order. Les styles définis sur un élément spécifique sont toujours appliqués en dernier.Styles defined on a specific item are always applied last. Pour plus d’informations sur les sélecteurspris en charge, consultez Référence du sélecteur.For more information about supported selectors, see Selector Reference.

CSS utilise des propriétés pour styliser un élément sélectionné.CSS uses properties to style a selected element. Chaque propriété a un ensemble de valeurs possibles, et certaines propriétés peuvent affecter n’importe quel type d’élément, tandis que d’autres s’appliquent à des groupes d’éléments.Each property has a set of possible values, and some properties can affect any type of element, while others apply to groups of elements. Pour plus d’informations sur les propriétés prises en charge, consultez référence des propriétés.For more information about supported properties, see Property Reference.

Sélection d’éléments par typeSelecting elements by type

Les éléments de l’arborescence d’éléments visuels peuvent être sélectionnés par type avec le sélecteur de element ne respectant pas la casse :Elements in the visual tree can be selected by type with the case insensitive element selector:

stacklayout {
    margin: 20;
}

Ce sélecteur identifie tous les éléments de StackLayout sur les pages qui utilisent la feuille de style et définit leurs marges sur une épaisseur uniforme de 20.This selector identifies any StackLayout elements on pages that consume the style sheet, and sets their margins to a uniform thickness of 20.

Notes

Le sélecteur de element n’identifie pas les sous-classes du type spécifié.The element selector does not identify subclasses of the specified type.

Sélection d’éléments par classe de baseSelecting elements by base class

Les éléments de l’arborescence d’éléments visuels peuvent être sélectionnés par classe de base avec le sélecteur de ^base ne respectant pas la casse :Elements in the visual tree can be selected by base class with the case insensitive ^base selector:

^contentpage {
    background-color: lightgray;
}

Ce sélecteur identifie tous les éléments de ContentPage qui consomment la feuille de style et définit leur couleur d’arrière-plan sur lightgray.This selector identifies any ContentPage elements that consume the style sheet, and sets their background color to lightgray.

Notes

Le sélecteur de ^base est spécifique à Xamarin. Forms et ne fait pas partie de la spécification CSS.The ^base selector is specific to Xamarin.Forms, and isn't part of the CSS specification.

Sélection d’un élément par son nomSelecting an element by name

Les éléments individuels de l’arborescence d’éléments visuels peuvent être sélectionnés avec le sélecteur de #id sensible à la casse :Individual elements in the visual tree can be selected with the case sensitive #id selector:

#listView {
    background-color: lightgray;
}

Ce sélecteur identifie l’élément dont la propriété StyleId a la valeur listView.This selector identifies the element whose StyleId property is set to listView. Toutefois, si la propriété StyleId n’est pas définie, le sélecteur revient à l’utilisation du x:Name de l’élément.However, if the StyleId property is not set, the selector will fall back to using the x:Name of the element. Par conséquent, dans l’exemple XAML suivant, le sélecteur de #listView identifie le ListView dont l’attribut x:Name est défini sur listView et définit sa couleur d’arrière-plan sur 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>

Sélection d’éléments avec un attribut de classe spécifiqueSelecting elements with a specific class attribute

Les éléments avec un attribut de classe spécifique peuvent être sélectionnés avec le sélecteur de .class sensible à la casse :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;
}

Une classe CSS peut être assignée à un élément XAML en affectant au StyleClass propriété de l’élément le nom de la classe CSS.A CSS class can be assigned to a XAML element by setting the StyleClass property of the element to the CSS class name. Par conséquent, dans l’exemple XAML suivant, les styles définis par la classe .detailPageTitle sont assignés au premier Label, tandis que les styles définis par la classe .detailPageSubtitle sont assignés au deuxième 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>

Sélection d’éléments enfantsSelecting child elements

Les éléments enfants de l’arborescence d’éléments visuels peuvent être sélectionnés avec le sélecteur de element element ne respectant pas la casse :Child elements in the visual tree can be selected with the case insensitive element element selector:

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

Ce sélecteur identifie tous les éléments de Image qui sont des enfants de ListView éléments et définit leur hauteur et leur largeur sur 60.This selector identifies any Image elements that are children of ListView elements, and sets their height and width to 60. Par conséquent, dans l’exemple XAML suivant, le sélecteur de listview image identifie le Image qui est un enfant du ListViewet définit sa hauteur et sa largeur sur 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>

Notes

Le sélecteur de element element ne requiert pas que l’élément enfant soit un enfant direct du parent : l’élément enfant peut avoir un autre parent.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. La sélection se produit si un ancêtre est le premier élément spécifié.Selection occurs provided that an ancestor is the specified first element.

Sélection d’éléments enfants directsSelecting direct child elements

Les éléments enfants directs dans l’arborescence d’éléments visuels peuvent être sélectionnés avec le sélecteur de element>element ne respectant pas la casse :Direct child elements in the visual tree can be selected with the case insensitive element>element selector:

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

Ce sélecteur identifie tous les éléments Image qui sont des enfants directs des éléments StackLayout et définit leur hauteur et leur largeur sur 200.This selector identifies any Image elements that are direct children of StackLayout elements, and sets their height and width to 200. Par conséquent, dans l’exemple XAML suivant, le sélecteur de stacklayout>image identifie le Image qui est un enfant direct du StackLayoutet définit sa hauteur et sa largeur sur 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>

Notes

Le sélecteur element>element nécessite que l’élément enfant soit un enfant direct du parent.The element>element selector requires that the child element is a direct child of the parent.

Référence du sélecteurSelector reference

Les sélecteurs CSS suivants sont pris en charge par Xamarin. Forms :The following CSS selectors are supported by Xamarin.Forms:

SélecteurSelector ExempleExample DescriptionDescription
.class .header Sélectionne tous les éléments avec la propriété StyleClass contenant « Header ».Selects all elements with the StyleClass property containing 'header'. Notez que ce sélecteur respecte la casse.Note that this selector is case sensitive.
#id #email Sélectionne tous les éléments avec StyleId défini sur email.Selects all elements with StyleId set to email. Si StyleId n’est pas défini, le secours est x:Name.If StyleId is not set, fallback to x:Name. Lors de l’utilisation de XAML, x:Name est préférable sur StyleId.When using XAML, x:Name is preferred over StyleId. Notez que ce sélecteur respecte la casse.Note that this selector is case sensitive.
* * Sélectionne tous les éléments.Selects all elements.
element label Sélectionne tous les éléments de type Label, mais pas les sous-classes.Selects all elements of type Label, but not subclasses. Notez que ce sélecteur ne respecte pas la casse.Note that this selector is case insensitive.
^base ^contentpage Sélectionne tous les éléments avec ContentPage comme classe de base, y compris ContentPage lui-même.Selects all elements with ContentPage as the base class, including ContentPage itself. Notez que ce sélecteur ne respecte pas la casse et ne fait pas partie de la spécification CSS.Note that this selector is case insensitive and isn't part of the CSS specification.
element,element label,button Sélectionne tous les éléments de Button et tous les éléments de Label.Selects all Button elements and all Label elements. Notez que ce sélecteur ne respecte pas la casse.Note that this selector is case insensitive.
element element stacklayout label Sélectionne tous les éléments Label à l’intérieur d’une StackLayout.Selects all Label elements inside a StackLayout. Notez que ce sélecteur ne respecte pas la casse.Note that this selector is case insensitive.
element>element stacklayout>label Sélectionne tous les éléments Label avec StackLayout en tant que parent direct.Selects all Label elements with StackLayout as a direct parent. Notez que ce sélecteur ne respecte pas la casse.Note that this selector is case insensitive.
element+element label+entry Sélectionne tous les éléments Entrys directement après une Label.Selects all Entry elements directly after a Label. Notez que ce sélecteur ne respecte pas la casse.Note that this selector is case insensitive.
element~element label~entry Sélectionne tous les éléments Entry précédés d’un Label.Selects all Entry elements preceded by a Label. Notez que ce sélecteur ne respecte pas la casse.Note that this selector is case insensitive.

Les styles avec des sélecteurs correspondants sont appliqués consécutivement, dans l’ordre de définition.Styles with matching selectors are applied consecutively, in definition order. Les styles définis sur un élément spécifique sont toujours appliqués en dernier.Styles defined on a specific item are always applied last.

Conseil

Les sélecteurs peuvent être combinés sans limitation, par exemple StackLayout>ContentView>label.email.Selectors can be combined without limitation, such as StackLayout>ContentView>label.email.

Les sélecteurs suivants ne sont pas pris en charge actuellement :The following selectors are currently unsupported:

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

Notes

La spécificité et les remplacements de spécificité ne sont pas pris en charge.Specificity, and specificity overrides are unsupported.

Référence de propriétéProperty reference

Les propriétés CSS suivantes sont prises en charge par Xamarin. Forms (dans la colonne valeurs , les types sont en italique, tandis que les littéraux de chaîne sont gray) :The following CSS properties are supported by Xamarin.Forms (in the Values column, types are italic, while string literals are gray):

PropertyProperty S'applique àApplies to ValeursValues ExempleExample
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 | de couleur initialcolor | initial background-color: springgreen;
background-image Page chaîne | initialstring | initial background-image: bg.png;
border-color Button, Frame, ImageButtonButton, Frame, ImageButton | de couleur 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 | de couleur 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 | 0 1 2column | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement float | auto | initial.float | auto | initial. En outre, un pourcentage compris entre 0 et 100% peut être spécifié avec le signe %.In addition, a percentage in the range 0% to 100% can be specified with the % sign. flex-basis: 25%;
flex-grow VisualElement initial | floatfloat | initial flex-grow: 1.5;
flex-shrink VisualElement initial | floatfloat | 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 chaîne | 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 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 | d' épaisseur initialthickness | initial margin: 6 12;
margin-left View | d' épaisseur initialthickness | initial margin-left: 3;
margin-top View | d' épaisseur initialthickness | initial margin-top: 2;
margin-right View | d' épaisseur initialthickness | initial margin-right: 1;
margin-bottom View | d' épaisseur 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 | d' épaisseur 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 | 0 1 2 3 4 5 6.left | top | right | bottom | start | center | middle | end | initial. left et right doivent être évités dans les environnements de droite à gauche.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, double | 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 double | initialdouble | initial min-width: 320;

Notes

initial est une valeur valide pour toutes les propriétés.initial is a valid value for all properties. Il efface la valeur (rétablit la valeur par défaut) qui a été définie à partir d’un autre style.It clears the value (resets to default) that was set from another style.

Les propriétés suivantes ne sont pas prises en charge actuellement :The following properties are currently unsupported:

  • all: initial.,all: initial.
  • Propriétés de la disposition (zone ou grille).Layout properties (box, or grid).
  • Propriétés sténographique, telles que font et border.Shorthand properties, such as font, and border.

En outre, il n’y a aucune valeur inherit et l’héritage n’est donc pas pris en charge.In addition, there's no inherit value and so inheritance isn't supported. Par conséquent, vous ne pouvez pas, par exemple, définir la propriété font-size sur une mise en page et vous attendre à ce que toutes les instances de Label dans la disposition héritent de la valeur.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. La seule exception est la propriété direction, qui a une valeur par défaut de inherit.The one exception is the direction property, which has a default value of inherit.

Le ciblage des éléments de Span a un problème connu empêchant les étendues d’être la cible des styles CSS par élément et par nom (à l’aide du symbole #).Targeting Span elements has a known issue preventing spans from being the target of CSS styles by both element and name (using the # symbol). L’élément Span dérive de GestureElement, qui n’a pas la propriété StyleClass, les étendues ne prennent pas en charge le ciblage de classe CSS.The Span element derives from GestureElement, which does not have the StyleClass property so spans do not support CSS class targeting. Pour plus d’informations, consultez l' impossibilité d’appliquer un style CSS pour étendre le contrôle.For more information, see Not able to apply CSS styling to Span control.

Propriétés spécifiques de Xamarin. FormsXamarin.Forms specific properties

Les propriétés CSS spécifiques à Xamarin. Forms suivantes sont également prises en charge (dans la colonne valeurs , les types sont en italique, tandis que les littéraux de chaîne sont gray) :The following Xamarin.Forms specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

PropertyProperty S'applique àApplies to ValeursValues ExempleExample
-xf-bar-background-color NavigationPage, TabbedPageNavigationPage, TabbedPage | de couleur initialcolor | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPageNavigationPage, TabbedPage | de couleur 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 Entry, EditorEntry, Editor | int initialint | initial -xf-max-length: 20;
-xf-max-track-color Slider | de couleur initialcolor | initial -xf-max-track-color: red;
-xf-min-track-color Slider | de couleur initialcolor | initial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayoutScrollView, StackLayout horizontal | vertical | both | initial.horizontal | vertical | both | initial. both est pris en charge uniquement sur un ScrollView.both is only supported on a ScrollView. -xf-orientation: horizontal;
-xf-placeholder Entry, Editor, SearchBarEntry, Editor, SearchBar | de texte entre guillemets initialquoted text | initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, Editor, SearchBarEntry, Editor, SearchBar | de couleur initialcolor | initial -xf-placeholder-color: green;
-xf-spacing StackLayout double | initialdouble | initial -xf-spacing: 8;
-xf-thumb-color Slider, SwitchSlider, Switch | de couleur 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 chaîne | initialstring | initial -xf-visual: material;

Propriétés spécifiques de l’interpréteur de commandes Xamarin. FormsXamarin.Forms Shell specific properties

Les propriétés CSS spécifiques à l’interpréteur de commandes Xamarin. Forms sont également prises en charge (dans la colonne valeurs , les types sont en italique, tandis que les littéraux de chaîne sont 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 S'applique àApplies to ValeursValues ExempleExample
-xf-flyout-background Shell | de couleur initialcolor | initial -xf-flyout-background: red;
-xf-shell-background Element | de couleur initialcolor | initial -xf-shell-background: green;
-xf-shell-disabled Element | de couleur initialcolor | initial -xf-shell-disabled: blue;
-xf-shell-foreground Element | de couleur initialcolor | initial -xf-shell-foreground: yellow;
-xf-shell-tabbar-background Element | de couleur initialcolor | initial -xf-shell-tabbar-background: white;
-xf-shell-tabbar-disabled Element | de couleur initialcolor | initial -xf-shell-tabbar-disabled: black;
-xf-shell-tabbar-foreground Element | de couleur initialcolor | initial -xf-shell-tabbar-foreground: gray;
-xf-shell-tabbar-title Element | de couleur initialcolor | initial -xf-shell-tabbar-title: lightgray;
-xf-shell-tabbar-unselected Element | de couleur initialcolor | initial -xf-shell-tabbar-unselected: cyan;
-xf-shell-title Element | de couleur initialcolor | initial -xf-shell-title: teal;
-xf-shell-unselected Element | de couleur initialcolor | initial -xf-shell-unselected: limegreen;

ColorColor

Les valeurs de color suivantes sont prises en charge :The following color values are supported:

  • X11 couleurs, qui correspondent aux couleurs CSS, aux couleurs prédéfinies UWP et aux couleurs Xamarin. Forms.X11 colors, which match CSS colors, UWP pre-defined colors, and Xamarin.Forms colors. Notez que ces valeurs de couleur ne respectent pas la casse.Note that these color values are case insensitive.
  • couleurs hexadécimales : #rgb, #argb, #rrggbb, #aarrggbbhex colors: #rgb, #argb, #rrggbb, #aarrggbb
  • couleurs RVB : rgb(255,0,0), rgb(100%,0%,0%).rgb colors: rgb(255,0,0), rgb(100%,0%,0%). Les valeurs sont comprises dans la plage 0-255, ou 0%-100%.Values are in the range 0-255, or 0%-100%.
  • couleurs RVBA : 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). La valeur d’opacité est comprise entre 0,0 et 1,0.The opacity value is in the range 0.0-1.0.
  • couleurs TSL : hsl(120, 100%, 50%).hsl colors: hsl(120, 100%, 50%). La valeur h est comprise dans la plage 0-360, tandis que s et l sont dans la plage 0%-100%.The h value is in the range 0-360, while s and l are in the range 0%-100%.
  • couleurs HSLA : hsla(120, 100%, 50%, .8).hsla colors: hsla(120, 100%, 50%, .8). La valeur d’opacité est comprise entre 0,0 et 1,0.The opacity value is in the range 0.0-1.0.

ThicknessThickness

Une, deux, trois ou quatre valeurs thickness sont prises en charge, chacune étant séparée par un espace blanc :One, two, three, or four thickness values are supported, each separated by white space:

  • Une valeur unique indique une épaisseur uniforme.A single value indicates uniform thickness.
  • Deux valeurs indiquent vertical, puis Epaisseur horizontale.Two values indicate vertical then horizontal thickness.
  • Trois valeurs indiquent Top, horizontal (gauche et droite), puis Epaisseur inférieure.Three values indicate top, then horizontal (left and right), then bottom thickness.
  • Quatre valeurs indiquent haut, puis droite, puis bas, puis gauche.Four values indicate top, then right, then bottom, then left thickness.

Notes

Les valeurs de thickness CSS diffèrent des valeurs de Thickness XAML.CSS thickness values differ from XAML Thickness values. Par exemple, en XAML, un Thickness à deux valeurs indique une épaisseur horizontale et verticale, tandis qu’un Thickness à quatre valeurs indique gauche, puis en haut, puis à droite, puis en bas.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. En outre, les valeurs Thickness XAML sont délimitées par des virgules.In addition, XAML Thickness values are comma delimited.

NamedSizeNamedSize

Les valeurs de namedsize qui ne respectent pas la casse suivantes sont prises en charge :The following case insensitive namedsize values are supported:

  • default
  • micro
  • small
  • medium
  • large

La signification exacte de chaque valeur namedsize dépend de la plateforme et de la vue.The exact meaning of each namedsize value is platform-dependent and view-dependent.

CSS dans Xamarin. Forms avec Xamarin. UniversityCSS in Xamarin.Forms with Xamarin.University

Vidéo CSS Xamarin. Forms 3,0Xamarin.Forms 3.0 CSS video