Utiliser CSS pour styler les Apps sous MAUI ? Oui c'est possible. Comment ? Lisez la suite !
Introduction
.NET MAUI (Multi-platform App UI) est un framework permettant de créer des applications multi-plateformes en utilisant C# et XAML. L'une des fonctionnalités intéressantes de MAUI est la possibilité d'utiliser des feuilles de style en cascade (CSS) pour styliser les applications, une fonctionnalité héritée de Xamarin.Forms. CSS permet de séparer le style du contenu, facilitant ainsi la maintenance et l'évolution des applications.
Avantages de CSS dans .NET MAUI
Utiliser CSS dans .NET MAUI présente plusieurs avantages :
- Réduction de la redondance de code : CSS permet de définir des styles réutilisables pour plusieurs éléments, réduisant ainsi la duplication du code.
- Amélioration de la maintenance et de la lisibilité : Les styles centralisés dans des fichiers CSS sont plus faciles à gérer et à modifier.
- Réutilisation des styles : Les mêmes styles peuvent être appliqués à différents composants de l'application, assurant une cohérence visuelle.
Personnellement je ne suis pas un fan de l'association CSS/XAML. XAML est ultra puissant et n'a pas besoin de cette béquille pour définir des styles même très sophistiqués. Je n'aime donc pas trop ce mélange des genres et je ne le conseillerai pas vraiment. Toutefois, lorsque les développeurs viennent du monde Web ou qu'ils désirent réutiliser la charte graphique d'un site existant pour styler une App, l'option CSS peut avoir un intérêt. A chacun de choisir ce qui convient le mieux à son App de toute façon !
Mise en place de CSS dans .NET MAUI
Pour utiliser CSS avec .NET MAUI, voici les étapes à suivre :
- Configuration initiale : Assurez-vous que votre projet MAUI est correctement configuré.
- Structure de fichier CSS : Créez un fichier CSS dans votre projet. Par exemple, `styles.css`.
- Inclusion de CSS dans le projet : Ajoutez le fichier CSS à votre projet MAUI et référencez-le dans votre fichier XAML principal.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage"
StyleSheet="styles.css">
<!-- Contenu de la page -->
</ContentPage>
Syntaxe et Sélecteurs CSS
En CSS, les sélecteurs permettent de cibler des éléments spécifiques pour leur appliquer des styles. Voici quelques exemples :
Sélecteurs basiques
/* Sélecteur par balise */
button {
background-color: blue;
}
/* Sélecteur par classe */
.header {
font-size: 24px;
}
/* Sélecteur par ID */
#submit-button {
padding: 10px;
}
Sélecteurs avancés
/* Pseudo-classe :hover */
button:hover {
background-color: green;
}
/* Pseudo-élément ::before */
label::before {
content: "*";
color: red;
}
Propriétés CSS Supportées
Les propriétés CSS couramment utilisées dans .NET MAUI incluent :
- Couleur et typographie : `color`, `font-size`, `font-family`
- Mise en page : `margin`, `padding`, `border`
- Affichage : `flex`, `grid`
- Animations : `transition`, `transform`
Il y a bien entendu des tonnes de propriétés supportées par MAUI selon les contrôles visuels utililisés. Pour une liste complète des propriétés supportées, référez-vous à la documentation officielle de Microsoft.
Bonnes Pratiques et Astuces
Pour optimiser l'utilisation de CSS dans .NET MAUI :
- Organisation : Divisez vos styles en plusieurs fichiers CSS si nécessaire pour une meilleure gestion.
- Modularisation : Utilisez des classes et des IDs de manière judicieuse pour éviter les conflits de styles.
- Debugging : Utilisez les outils de développement pour identifier et résoudre les conflits de styles.
Exemples de Code
Voici quelques exemples de styles CSS pour .NET MAUI :
(fichier CSS)
/* Style pour un bouton */
button {
background-color: #007aff;
color: white;
border-radius: 5px;
padding: 10px 20px;
}
/* Style pour un label */
label {
font-size: 18px;
color: #333;
}
/* Style pour une vue en flexbox */
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
}
Exemple MAUI XAML avec ContentPage
Voici un exemple de ContentPage en XAML utilisant les différents styles et sélecteurs CSS définis ci-dessus :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage"
StyleSheet="styles.css">
<StackLayout>
<!-- Sélecteur par classe -->
<Label Text="Bienvenue dans MAUI!"
Class="header"/>
<!-- Sélecteur par ID -->
<Button Text="Cliquez-moi"
x:Name="submit-button"/>
<!-- Sélecteur par classe pour le conteneur flex -->
<StackLayout Class="flex-container">
<!-- Sélecteur par balise pour chaque Label -->
<Label Text="Item 1" />
<Label Text="Item 2" />
<Label Text="Item 3" />
</StackLayout>
</StackLayout>
</ContentPage>
Commentaires :
- Le Label avec la classe `
header` utilise les styles définis pour `.header` dans le fichier CSS.
- Le Button avec l'ID `
submit-button` utilise les styles définis pour `#submit-button`.
- Le
StackLayout avec la classe `flex-container` applique les styles de flexbox.
- Les Labels à l'intérieur du
StackLayout utilisent les styles définis pour les balises `label`.
Conclusion
L'utilisation de CSS dans .NET MAUI offre une flexibilité et une efficacité accrues pour styliser vos applications, principalement si vous venez du monde Web, sinon préférez l'homogénéité et restez en XAML de bout en bout. Sinon, les avantages sont les mêmes qu'avec les styles XAML : en séparant les styles du contenu, vous pouvez maintenir et faire évoluer vos applications plus facilement tout en assurant une cohérence visuelle. Les perspectives futures pour CSS dans .NET MAUI sont prometteuses, avec des améliorations continues et des ajouts de nouvelles fonctionnalités, ce qui réjouira les amateurs d'applications Web mais qui ne changera pas grand chose pour ceux qui préfèrent comme moi XAML, pur et sans eau ni glaçon, merci !
Stay Tuned !