CSS Styles

Article
08/22/2023

Important

Ce projet est une version expérimentale. Nous espérons que vous essayez experimental Mobile Blazor Bindings et que vous envoyez vos commentaires à l’adresse https://github.com/xamarin/MobileBlazorBindings.

Vue d’ensemble

Les applications créées à l’aide de liaisons Mobile Blazor ont un assortiment de styles qui peuvent être appliqués pour contrôler l’apparence de l’interface utilisateur. Ces styles peuvent être appliqués directement aux composants ou ils peuvent être appliqués à l’aide de feuilles de style en cascade (CSS). Certains des avantages de l’utilisation de CSS au lieu de styles directs sont qu’il permet une meilleure séparation des préoccupations (c’est-à-dire, en conservant des styles de composants distincts de leur disposition et de leurs fonctionnalités) et en autorisant le partage possible de CSS avec d’autres médias (par exemple, une application web).

Inclusion de CSS dans un projet

Pour ajouter CSS à un projet Mobile Blazor Bindings :

Dans le projet d’interface utilisateur partagée de votre application, cliquez avec le bouton droit sur un dossier, puis sélectionnez Ajouter --> Ajouter un nouvel élément, puis sélectionnez le type d’élément Feuille de style (si vous ne le trouvez pas, utilisez la fonctionnalité de recherche pour rechercher style sheet).
Choisissez un nom approprié pour votre feuille de style, puis appuyez sur Ajouter.
Modifiez le contenu du fichier CSS si nécessaire (voir ci-dessous pour connaître les styles pris en charge). Par exemple, pour définir toutes les étiquettes pour qu’elles aient une large taille de police :
```
label {
    font-size: large;
}
```
Ouvrez le .razor fichier dans lequel vous souhaitez utiliser le css.

Notes

De nombreuses applications auront un seul fichier CSS inclus dans la page main de l’application.
Ajoutez le balisage suivant au .razor fichier, généralement au niveau supérieur du fichier. Modification du nom et du chemin d’accès du fichier CSS pour qu’ils correspondent à ce que vous avez créé :
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

Notes

La prise en charge css nécessite le référencement de Xamarin.Forms 4.5 ou version ultérieure. Pour mettre à jour cette référence, gérez les packages NuGet de la solution et vérifiez que la solution utilise une version de Xamarin.Forms 4.5 ou ultérieure. Les versions ultérieures de Mobile Blazor Bindings incluront cette version par défaut.

Application de CSS à des composants

Les styles CSS sont déclarés dans le fichier CSS à l’aide de la syntaxe CSS standard. Les styles sont spécifiés à l’aide de sélecteurs, qui permettent d’appliquer des styles basés sur le type d’élément, la classe de base, le nom, l’attribut de classe et plusieurs autres moyens (voir ci-dessous pour obtenir des informations de référence sur Xamarin.Forms).

Dans le .razor fichier de chaque composant qui autorise les styles CSS, vous pouvez définir la classe ou le nom via les class propriétés et StyleId , respectivement.

Notes

Les éléments qui prennent en charge les styles CSS ont également une StyleClass propriété, qui est équivalente à la class propriété . Si vous devez utiliser la class propriété par programmation à partir de C#, utilisez la syntaxe @classd’échappement , telle que myElement.@class, ou utilisez la StyleClass propriété, telle que myElement.StyleClass.

Exemple de fichier CSS :

/* this rule applies to all labels */
label {
    font-size: large;
}

/* these rules apply only when this class is specified */
.happyText {
    color: green;
}

.sadText {
    color: red;
}

Exemple d’extrait de fichier Razor :

<Label Text="Seattle" /> @* no class specified, so only 'label' rule applied *@
<Label class="happyText" Text="Weather: good" /> @* class is specified, so 'label' rule and '.happyText' rules applied *@
<Label class="sadText" Text="Traffic: bad" /> @* class is specified, so 'label' rule and '.sadText' rules applied *@

Styles CSS pris en charge

Étant donné que les composants d’interface utilisateur intégrés sont basés sur des contrôles Xamarin.Forms, consultez Styles des applications Xamarin.Forms à l’aide de CSS pour en savoir plus sur cette fonctionnalité et sur les styles qui peuvent être appliqués à quels composants.

Dépannage

Définir l’action de génération sur Ressource incorporée

Lors de l’ajout d’un nouveau fichier CSS dans Visual Studio, le fichier CSS doit être automatiquement Build Action défini pour Embedded resource s’assurer qu’il est inclus dans le projet généré. Si ce n’est pas le cas, cliquez avec le bouton droit sur le fichier CSS, sélectionnez Propriétés et définissez Build ActionEmbedded resourcesur .

Utiliser la syntaxe de chemin d’accès correcte pour CSS dans les sous-dossiers

Si le fichier CSS se trouve dans un dossier, spécifiez son nom à l’aide de son chemin d’accès avec des barres obliques comme séparateurs de chemin. Par exemple, si le fichier CSS est <PROJECT ROOT>/assets/styles/MyApp.css, le balisage à inclure dans un .razor fichier est :

<StyleSheet Resource="assets/styles/MyApp.css" Assembly="GetType().Assembly"></StyleSheet>

Partager via