Applications de style en utilisant des feuilles de style en cascade

Vous pouvez appliquer un style à des applications .NET Multi-Platform App UI (.NET MAUI) en utilisant des feuilles de style en cascade (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 suivant montre certaines feuilles de style en cascade conformes à .NET MAUI :

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

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

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

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

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

Dans .NET MAUI, les feuilles de style en cascade sont analysées et évaluées au moment de l’exécution, plutôt qu’au moment de la compilation, et les feuilles de style sont réévaluées lors de l’utilisation.

Consommer une feuille de style

Le processus d’ajout d’une feuille de style à une application .NET MAUI est le suivant :

1. Ajoutez un ficher de feuilles de style en cascade vide à votre projet d’application .NET MAUI. Vous pouvez placer le fichier de feuilles de style en cascade dans n’importe quel dossier, le dossier Ressources étant l’emplacement recommandé.
2. Définissez l’action de build du fichier de feuilles de style en cascade sur MauiCss.

Chargement d’une feuille de style

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

Charger une feuille de style dans 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="/Resources/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 /.

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.

Charger une feuille de style en C#

Dans C#, vous pouvez charger une feuille de style à partir d’un StringReader et l’ajouter à un ResourceDictionary:

using Microsoft.Maui.Controls.StyleSheets;

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

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

L’argument de la méthode StyleSheet.FromReader est celui TextReader qui a lu la feuille de style.

Sélectionner des éléments et appliquer des 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 obtenir plus d’informations sur les sélecteurs pris en charge, consultez Référence sur le 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 obtenir plus d’informations sur les propriétés prises en charge, consultez Référence sur la propriété.

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’une application est remplacé par un style défini dans les ressources de la page, s’il définit 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’une application est remplacé par un style défini dans les ressources du contrôle, s’il définit les mêmes propriétés.

Sélectionner des é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.

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 .

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 suivant, le sélecteur #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.

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

Sélectionner des é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: 14;
    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 suivant, les styles définis par la classe .detailPageTitle sont attribués à la première Label, tandis que les styles définis par la classe .detailPageSubtitle sont affectés à la deuxième Label.

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

Sélectionner des é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="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Sélectionner des é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 suivant, le sélecteur stacklayout>image identifie Image qui est un enfant de la StackLayoutet définit sa hauteur et sa largeur sur 200.

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

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

Les sélecteurs de feuilles de style en cascade suivants sont pris en charge par .NET MAUI :

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.

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

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

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

Les propriétés de feuilles de style en cascade suivantes sont prises en charge par .NET MAUI (dans la colonne Valeurs, les types sont en italique, tandis que les littéraux de chaîne sont gray) :

Les propriétés suivantes ne sont 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.

Propriétés spécifiques à .NET MAUI

Les propriétés de feuilles de style en cascade spécifiques à .NET MAUI 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) :

Propriétés spécifiques à .NET MAUI Shell

Les propriétés de feuilles de style en cascade spécifiques à .NET MAUI Shell 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) :

Couleur

Les valeurs color suivantes sont prises en charge :

• X11 couleurs qui correspondent aux couleurs de feuilles de style en cascade et aux couleurs .NET MAUI. Ces deux 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.

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.