Partager via

Applications de style Xamarin.Forms à l’aide de feuilles de style en cascade (CSS)

  • Article

Xamarin.Forms prend en charge le style d’éléments visuels à l’aide de feuilles de style en cascade (CSS).

Xamarin.Forms les applications peuvent être styleées à l’aide de CSS. Une feuille de style se compose d’une liste de règles, chaque règle se composant d’un ou plusieurs sélecteurs et d’un bloc de déclaration. Un bloc de déclaration se compose d’une liste de déclarations entre accolades, chaque déclaration se composant d’une propriété, d’un signe deux-points et d’une valeur. Lorsqu’il existe plusieurs déclarations dans un bloc, un point-virgule est inséré en tant que séparateur. L’exemple de code suivant montre un Xamarin.Forms css conforme :

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, plutôt que le temps de compilation, et les feuilles de style sont réévaluées lors de l’utilisation.

Remarque

Actuellement, tous les styles possibles avec le style XAML ne peuvent pas être effectués avec CSS. Toutefois, les styles XAML peuvent être utilisés pour compléter css pour les propriétés qui ne sont actuellement pas prises en charge par Xamarin.Forms. Pour plus d’informations sur les styles XAML, consultez Applications de style Xamarin.Forms à l’aide de styles XAML.

L’exemple illustre l’utilisation de CSS pour mettre en forme une application simple et s’affiche dans les captures d’écran suivantes :

Page principale MonkeyApp avec style CSS

Page De détails MonkeyApp avec style CSS

Utilisation d’une feuille de style

Le processus d’ajout d’une feuille de style à une solution est le suivant :

  1. Ajoutez un fichier CSS vide à votre projet de bibliothèque .NET Standard.
  2. Définissez l’action de génération du fichier CSS sur EmbeddedResource.

Chargement d’une feuille de style

Vous pouvez utiliser plusieurs approches pour charger une feuille de style.

Remarque

Il n’est actuellement pas possible de modifier une feuille de style au moment de l’exécution et d’appliquer la nouvelle feuille de style.

XAML

Vous pouvez charger et analyser une feuille de style avec la classe StyleSheet avant de l’ajouter à un 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 relatif à l’emplacement du fichier XAML joint, ou relatif à la racine du projet si l’URI commence par un /.

Avertissement

Le fichier CSS ne peut pas être chargé si son action de génération n’est pas définie sur EmbeddedResource.

Vous pouvez également charger et analyser une feuille de style avec la classe StyleSheet, avant de l’ajouter à un ResourceDictionary, en l’incorporant dans une section CDATA :

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

Pour obtenir plus d’informations sur les dictionnaires de ressources, consultez Dictionnaires de ressources.

C#

Dans C#, vous pouvez charger une feuille de style à partir d’un StringReader et l’ajouter à un 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 celui TextReader qui a lu la feuille de style.

Sélection d’éléments et application de propriétés

Les feuilles de style en cascade utilisent des sélecteurs pour déterminer les éléments à cibler. Les styles avec les sélecteurs correspondants sont appliqués consécutivement dans l’ordre de définition. Les styles définis sur un élément spécifique sont toujours appliqués en dernier. Pour plus d’informations sur les sélecteurs pris en charge, consultez Référence du sélecteur.

Les feuilles de style en cascade utilisent des propriétés pour appliquer un style à un élément sélectionné. Chaque propriété a un ensemble de valeurs possibles et certaines propriétés peuvent affecter n’importe quel type d’élément, alors que d’autres s’appliquent aux groupes d’éléments. Pour plus d’informations sur les propriétés prises en charge, consultez Informations de référence sur les propriétés.

Les feuilles de style enfants remplacent toujours les feuilles de style parentes si elles définissent les mêmes propriétés. Par conséquent, les règles de précédence suivantes sont suivies lors de l’application de styles qui définissent les mêmes propriétés :

  • Un style défini dans les ressources d’application est remplacé par un style défini dans les ressources de page, s’ils définissent les mêmes propriétés.
  • Un style défini dans les ressources d’une page est remplacé par un style défini dans les ressources du contrôle, s’il définit les mêmes propriétés.
  • Un style défini dans les ressources d’application est remplacé par un style défini dans les ressources de contrôle, s’ils définissent les mêmes propriétés.

Important

Les variables de feuilles de style en cascade ne sont pas prises en charge.

Sélection d’éléments par type

Les éléments de l’arborescence visuelle peuvent être sélectionnés par type avec le sélecteur element ne respectant pas la casse :

stacklayout {
    margin: 20;
}

Ce sélecteur identifie tous les éléments StackLayout sur des pages qui consomment la feuille de style et définit leurs marges sur une épaisseur uniforme de 20.

Remarque

Le sélecteur element n’identifie pas les sous-classes du type spécifié.

Sélection d’éléments par classe de base

Les éléments de l’arborescence visuelle peuvent être sélectionnés par classe de base avec le sélecteur ^base ne respectant pas la casse :

^contentpage {
    background-color: lightgray;
}

Ce sélecteur identifie tous les éléments ContentPage qui consomment la feuille de style et définit leur couleur d’arrière-plan lightgray sur .

Remarque

Le ^base sélecteur est spécifique à Xamarin.Forms, et ne fait pas partie de la spécification CSS.

Sélection d’un élément par nom

Les éléments individuels de l’arborescence visuelle peuvent être sélectionnés avec le sélecteur #id respectant la casse :

#listView {
    background-color: lightgray;
}

Ce sélecteur identifie l’élément dont la propriété StyleId est définie sur listView. Toutefois, si la propriété StyleId n’est pas définie, le sélecteur revient à l’utilisation de l’élément x:Name. Par conséquent, dans l’exemple XAML suivant, le #listView sélecteur identifie l’attribut dont x:Name l’attribut ListView est défini listViewsur , et définit sa couleur lightgrayd’arrière-plan sur .

<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écifique

Les éléments avec un attribut de classe spécifique peuvent être sélectionnés avec le sélecteur .class respectant la casse :

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

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

Une classe de feuilles de style en cascade peut être affectée à un élément XAML en définissant la propriété StyleClass de l’élément sur le nom de la classe de feuilles de style en cascade. Par conséquent, dans l’exemple XAML suivant, les styles définis par la .detailPageTitle classe sont attribués au premier Label, tandis que les styles définis par la .detailPageSubtitle classe sont affectés au deuxième 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 enfants

Les éléments enfants de l’arborescence visuelle peuvent être sélectionnés avec le sélecteur element element ne respectant pas la casse :

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

Ce sélecteur identifie tous les éléments Image qui sont des enfants d’éléments ListView et définit leur hauteur et leur largeur sur 60. Par conséquent, dans l’exemple XAML suivant, le sélecteur listview image identifie Image qui est un enfant de ListViewet définit sa hauteur et sa largeur sur 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>

Remarque

Le sélecteur element element ne nécessite pas que l’élément enfant soit un enfant direct du parent. L’élément enfant peut avoir un autre parent. La sélection se produit à condition qu’un ancêtre soit le premier élément spécifié.

Sélection d’éléments enfants directs

Les éléments enfants directs de l’arborescence visuelle peuvent être sélectionnés avec le sélecteur element>element ne respectant pas la casse :

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

Ce sélecteur identifie tous les éléments Image qui sont des enfants directs d’éléments StackLayout et définit leur hauteur et leur largeur sur 200. Par conséquent, dans l’exemple XAML suivant, le stacklayout>image sélecteur identifie l’enfant Image direct du StackLayoutcode et définit sa hauteur et sa largeur sur 200.

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

Remarque

Le sélecteur element>element exige que l’élément enfant soit un enfant direct du parent.

Informations de référence sur le sélecteur

Les sélecteurs CSS suivants sont pris en charge par Xamarin.Forms:

Sélecteur Exemple Description
.class .header Sélectionne tous les éléments avec la propriété StyleClass contenant « en-tête ». Notez que ce sélecteur respecte la casse.
#id #email Sélectionne tous les éléments dont la valeur de StyleId est définie sur email. Si StyleId n’est pas défini, effectue un retour vers x:Name. Lors de l’utilisation de XAML, x:Name est préféré à StyleId. Notez que ce sélecteur respecte la casse.
* * Sélectionne tous les éléments.
element label Sélectionne tous les éléments de type Label, mais pas les sous-classes. Notez que ce sélecteur ne respecte pas la casse.
^base ^contentpage Sélectionne tous les éléments avec ContentPage comme classe de base, notamment l’élément ContentPage lui-même. Notez que ce sélecteur ne respecte pas la casse et ne fait pas partie de la spécification CSS.
element,element label,button Sélectionne tous les éléments Button et tous les éléments Label. Notez que ce sélecteur ne respecte pas la casse.
element element stacklayout label Sélectionne tous les éléments Label dans une StackLayout. Notez que ce sélecteur ne respecte pas la casse.
element>element stacklayout>label Sélectionne tous les éléments Label avec StackLayout comme parent direct. Notez que ce sélecteur ne respecte pas la casse.
element+element label+entry Sélectionne tous les éléments Entry directement après une Label. Notez que ce sélecteur ne respecte pas la casse.
element~element label~entry Sélectionne tous les éléments Entry précédés d’une Label. Notez que ce sélecteur ne respecte pas la casse.

Les styles avec les sélecteurs correspondants sont appliqués consécutivement dans l’ordre de définition. Les styles définis sur un élément spécifique sont toujours appliqués en dernier.

Conseil

Les sélecteurs peuvent être combinés sans limitation, comme StackLayout>ContentView>label.email.

Les sélecteurs suivants ne sont actuellement pas pris en charge :

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

Remarque

La spécificité et les remplacements de spécificité ne sont pas pris en charge.

Informations de référence sur les propriétés

Les propriétés CSS suivantes sont prises en charge Xamarin.Forms (dans la colonne Valeurs , les types sont italiques, tandis que les littéraux de chaîne sont ) gray:

Propriété S’applique à Valeurs Exemple
align-content FlexLayout stretch | 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 | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | flex-start | flex-end | initial align-self: flex-end;
background-color VisualElement color | initial background-color: springgreen;
background-image Page string | initial background-image: bg.png;
border-color Button, , FrameImageButton color | initial border-color: #9acd32;
border-radius BoxView, , ButtonFrame, ,ImageButton double | initial border-radius: 10;
border-width Button, ImageButton double | initial border-width: .5;
color ActivityIndicator, , BoxView, CheckBoxButton, DatePicker, Editor, EntryLabelPickerProgressBarSearchBarSwitchTimePicker color | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid double | initial column-gap: 9;
direction VisualElement ltr | rtl | inherit | initial direction: rtl;
flex-direction FlexLayout column | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement flottant | auto | initial. En outre, un pourcentage de la plage comprise entre 0 % et 100 % peut être spécifié avec le signe %. flex-basis: 25%;
flex-grow VisualElement float | initial flex-grow: 1.5;
flex-shrink VisualElement float | initial flex-shrink: 1;
flex-wrap VisualElement nowrap | wrap | reverse | wrap-reverse | initial flex-wrap: wrap-reverse;
font-family Button, DatePicker, , EntryEditor, Label, Picker, SearchBar, TimePicker,Span string | initial font-family: Consolas;
font-size Button, DatePicker, , EntryEditor, Label, Picker, SearchBar, TimePicker,Span doublenamedsize | | initial font-size: 12;
font-style Button, DatePicker, , EntryEditor, Label, Picker, SearchBar, TimePicker,Span bold | italic | initial font-style: bold;
height VisualElement double | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial justify-content: flex-end;
letter-spacing Button, , DatePicker, EntryEditor, , PickerSpanSearchBarSearchHandlerLabelTimePicker double | initial letter-spacing: 2.5;
line-height Label, Span double | initial line-height: 1.8;
margin View épaisseur | initial margin: 6 12;
margin-left View épaisseur | initial margin-left: 3;
margin-top View épaisseur | initial margin-top: 2;
margin-right View épaisseur | initial margin-right: 1;
margin-bottom View épaisseur | initial margin-bottom: 6;
max-lines Label int | initial max-lines: 2;
min-height VisualElement double | initial min-height: 50;
min-width VisualElement double | initial min-width: 112;
opacity VisualElement double | initial opacity: .3;
order VisualElement int | initial order: -1;
padding Button, , ImageButtonLayout, ,Page épaisseur | initial padding: 6 12 12;
padding-left Button, , ImageButtonLayout, ,Page double | initial padding-left: 3;
padding-top Button, , ImageButtonLayout, ,Page double | initial padding-top: 4;
padding-right Button, , ImageButtonLayout, ,Page double | initial padding-right: 2;
padding-bottom Button, , ImageButtonLayout, ,Page double | initial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid double | initial row-gap: 12;
text-align Entry, , EntryCellLabel, ,SearchBar left | top | right | bottom | start | center | middle | end | initial. Vous devez éviter left et right dans des environnements de droite à gauche. text-align: right;
text-decoration Label, Span none | underline | strikethrough | line-through | initial text-decoration: underline, line-through;
text-transform Button,Editor, , LabelEntry, , SearchBar,SearchHandler none | default | uppercase | lowercase | initial text-transform: uppercase;
transform VisualElement none, , rotate, , scaletranslatetranslateYrotateYscaleXscaleYtranslateXrotateXinitial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement double, double | initial transform-origin: 7.5, 12.5;
vertical-align Label left | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement double | initial min-width: 320;

Remarque

initial est une valeur valide pour toutes les propriétés. Elle efface la valeur (réinitialise la valeur par défaut) définie à partir d’un autre style.

Les propriétés suivantes ne sont actuellement pas prises en charge :

  • all: initial.
  • Propriétés de disposition (zone ou grille).
  • Propriétés raccourcies, telles que font et border.

En outre, il n’existe aucune valeur inherit. L’héritage n’est donc pas pris en charge. Par conséquent, vous ne pouvez pas, par exemple, définir la propriété font-size sur une disposition et vous attendre à ce que toutes les instances Label de la disposition héritent de la valeur. La seule exception est la propriété direction qui a une valeur par défaut de inherit.

Les éléments de Span ciblage ont un problème connu empêchant la cible des styles CSS par élément et par nom (à l’aide du # symbole). L’élément Span dérive de GestureElement, qui n’a pas la propriété, de sorte que les étendues ne prennent pas en charge le StyleClass ciblage de classes CSS. Pour plus d’informations, consultez Impossible d’appliquer le style CSS au contrôle Span.

Xamarin.Forms propriétés spécifiques

Les propriétés CSS spécifiques suivantes Xamarin.Forms sont également prises en charge (dans la colonne Valeurs , les types sont italiques, tandis que les littéraux de chaîne sont gray) :

Propriété S’applique à Valeurs Exemple
-xf-bar-background-color NavigationPage, TabbedPage color | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPage color | initial -xf-bar-text-color: gray
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-max-length Entry, , EditorSearchBar int | initial -xf-max-length: 20;
-xf-max-track-color Slider color | initial -xf-max-track-color: red;
-xf-min-track-color Slider color | initial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both est uniquement pris en charge sur un ScrollView. -xf-orientation: horizontal;
-xf-placeholder Entry, , EditorSearchBar texte entre guillemets | initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, , EditorSearchBar color | initial -xf-placeholder-color: green;
-xf-spacing StackLayout double | initial -xf-spacing: 8;
-xf-thumb-color Slider, Switch color | initial -xf-thumb-color: limegreen;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-vertical-text-alignment Label start | center | end | initial -xf-vertical-text-alignment: end;
-xf-visual VisualElement string | initial -xf-visual: material;

Xamarin.Forms Propriétés spécifiques de l’interpréteur de commandes

Les propriétés CSS spécifiques à l’interpréteur de commandes suivantes Xamarin.Forms sont également prises en charge (dans la colonne Valeurs , les types sont italiques, tandis que les littéraux de chaîne sont gray) :

Propriété S’applique à Valeurs Exemple
-xf-flyout-background Shell color | initial -xf-flyout-background: red;
-xf-shell-background Element color | initial -xf-shell-background: green;
-xf-shell-disabled Element color | initial -xf-shell-disabled: blue;
-xf-shell-foreground Element color | initial -xf-shell-foreground: yellow;
-xf-shell-tabbar-background Element color | initial -xf-shell-tabbar-background: white;
-xf-shell-tabbar-disabled Element color | initial -xf-shell-tabbar-disabled: black;
-xf-shell-tabbar-foreground Element color | initial -xf-shell-tabbar-foreground: gray;
-xf-shell-tabbar-title Element color | initial -xf-shell-tabbar-title: lightgray;
-xf-shell-tabbar-unselected Element color | initial -xf-shell-tabbar-unselected: cyan;
-xf-shell-title Element color | initial -xf-shell-title: teal;
-xf-shell-unselected Element color | initial -xf-shell-unselected: limegreen;

Couleur

Les valeurs color suivantes sont prises en charge :

  • X11couleurs, qui correspondent aux couleurs CSS, aux couleurs prédéfinies UWP et Xamarin.Forms aux couleurs. Notez que ces valeurs de couleur ne respectent pas la casse.
  • couleurs hexadécimales : #rgb, #argb, #rrggbb, #aarrggbb
  • couleurs RVB : rgb(255,0,0), rgb(100%,0%,0%). Les valeurs sont dans la plage comprise entre 0 et 255, ou entre 0 et 100 %.
  • couleurs RVBA : rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). La valeur d’opacité se trouve dans la plage comprise entre 0.0 et 1.0.
  • couleurs TSL : hsl(120, 100%, 50%). La valeur h se trouve dans la plage comprise entre 0 et 360, tandis que s et l se trouvent dans la plage comprise entre 0 % et 100 %.
  • couleurs HSLA : hsla(120, 100%, 50%, .8). La valeur d’opacité se trouve dans la plage comprise entre 0.0 et 1.0.

Thickness

Une, deux, trois ou quatre valeurs thickness sont prises en charge, chacune séparée par un espace blanc :

  • Une valeur unique indique une épaisseur uniforme.
  • Deux valeurs indiquent une épaisseur verticale, puis horizontale.
  • Trois valeurs indiquent une épaisseur en haut, puis horizontale (gauche et droite) et en bas.
  • Quatre valeurs indiquent une épaisseur en haut, puis à droite, en bas et à gauche.

Remarque

Les feuilles de style en cascade thickness diffèrent des valeurs XAML Thickness. Par exemple, dans XAML, une valeur Thickness à deux valeurs indique une épaisseur horizontale, puis verticale, tandis qu’une valeur Thickness à quatre valeurs indique une épaisseur à gauche, puis en haut, à droite et en bas. En outre, les valeurs XAML Thickness sont délimitées par des virgules.

NamedSize

Les valeurs non sensibles à namedsize la casse suivantes sont prises en charge :

  • default
  • micro
  • small
  • medium
  • large

La signification exacte de chaque valeur est dépendante de la namedsize plateforme et dépendante de la vue.

Functions

Les dégradés linéaires et radiaux peuvent être spécifiés en utilisant les fonctions de linear-gradient() radial-gradient() et de feuilles de style en cascade, respectivement. Le résultat de ces fonctions doit être affecté à la propriété background d’un contrôle.

CSS dans Xamarin.Forms Xamarin.University

Xamarin.Forms Vidéo CSS 3.0