Fermer

avril 12, 2018

Xamarin.Forms Styling avec CSS


Cet article explique comment styliser Xamarin.Forms avec CSS, en couvrant les avantages que vous pouvez en tirer et en incluant des exemples.

"Blasphemy!"

C'est la réaction typique des amateurs de hardcore XAML quand ils ' re dit que Xamarin.Forms XAML peut maintenant être stylé avec CSS . Oui, nous parlons de vieux Cascading StyleSheets (CSS). Conçu pour le Web, mais maintenant capable d'être utilisé pour créer des applications Xamarin.Forms multiplateformes natives. Bien sûr, ça sonne un peu bizarre au début. Mais il est important de considérer que le style CSS pour XAML a des avantages uniques (tout comme d'autres technologies Web ). Cet article explore la promesse de style Xamarin.Forms applications avec CSS et ce qui nous attend. C'est une nouvelle façon optionnelle de styliser vos éléments visuels XAML Xamarin.Forms, où il n'y a pas grand chose à perdre et à gagner!

Pourquoi CSS?

Tout d'abord, si vous êtes un ennemi des technologies web, vous besoin d'abandonner la lutte contre le soutien CSS à Xamarin.Forms. Cela arrive. Et bien que ce ne soit pas encore dans une version stable de Xamarin.Forms, la requête pull a été fusionnée en master fin 2017 . L'analyseur CSS est essentiellement un mappage vers XAML styles en cours d'utilisation dans Xamarin.Forms.

Alors, pourquoi Microsoft aurait-il même essayé d'apporter la qualité CSS du monde Web à Xamarin.Forms? Il s'avère qu'il existe de réels avantages à pouvoir styliser les applications natives Xamarin.Forms avec la facilité qu'offre CSS. Voici un run down informel:

CSS Benefits

Voici quelques avantages que CSS fournit pour le style Xamarin.Forms:

  • Essentiellement, HTML pour le web et XAML pour Xamarin.Forms construisent des arbres visuels
  • Les développeurs Xamarin viennent d'un ASP.NET arrière-plan
  • CSS est puissant et bien aimé par beaucoup
  • Les développeurs peuvent réutiliser les compétences qu'ils ont déjà de construire des applications web
  • Il y a un riche écosystème
  • Par rapport au style XAML, CSS peut être plus léger et moins verbeux
  • CSS fournit essentiellement un mappage vers les styles XAML sous-jacents
  • Tout le balisage XAML intégré pour le style peut être déplacé vers des fichiers CSS
  • CSS offre des avantages uniques avec l'héritage de style
  • CSS offre le potentiel de partage de code des styles entre web et Xamarin.Forms apps
  • Les pré-traitements CSS et les styles sont supportés
  • Avec Mono's WebAssembly support le style XAML via CSS ouvre de nouvelles portes
  • L'utilisation du CSS est facultative et les développeurs ne se plaignent pas de la flexibilité

Bien que la promesse de style CSS et de partage de code puisse être séduisante, rappelez-vous que ce sont encore les premiers jours. Voici quelques éléments à garder à l'esprit:

  • XAML styling est le premier citoyen de classe dans Xamarin.Forms
  • CSS joue un rôle secondaire en fournissant une approche familière au style des éléments XAML
  • On ne peut pas tout faire en CSS est faisable dans le style XAML
  • Certaines fonctionnalités CSS ne sont pas supportées, comme [attribute^="value"] et @media
  • Pour l'instant, les feuilles de style sont analysées et évaluées à l'exécution; ils ne sont pas compilés
  • Les performances sont faibles car CSS est analysé et mappé sur les styles XAML
  • Le style de CSS n'est pas officiel dans Xamarin.Forms encore

The Basics

Il est temps de voir comment ça se passe travaux. Alors, comment allez-vous ajouter le support CSS à vos applications Xamarin.Forms? Tout d'abord, vous devez passer à une version bêta du package Xamarin.Forms NuGet pour utiliser CSS. Ces versions sont disponibles en cochant la case pour voir les paquets pré-version. Quoi que ce soit 2.6.0 et après devrait fonctionner – le dernier étant 3.0.0 Pré 3 . Faites ce changement dans votre projet Xamarin.Forms nouveau ou existant – dans la bibliothèque .NET Standard / PCL ainsi que tous les projets spécifiques à la plate-forme.

Ensuite, ajoutons un fichier CSS générique – cela peut habitez dans un dossier / Styles si vous prévoyez conserver tous vos styles

Assurez-vous de marquer le fichier CSS comme une ressource incorporée ] – de cette façon, il est inclus pour l'analyse de tous les paquets d'applications spécifiques à la plate-forme.

C'est tout! Nous sommes maintenant prêts à faire référence au CSS dans notre XAML. Créez simplement une ressource pour votre ContentPage et pointez sur le fichier CSS de votre répertoire.

Vous pouvez également charger le CSS en tant que ressource incorporée du code C #, mais XAML est l'endroit le plus préféré et naturel pour attacher en CSS. Maintenant, dans notre fichier CSS, écrivons le premier bit de code pour styler notre arbre visuel XAML, comme ceci:

 ^ ContentPage {
  couleur de fond: vert clair;
  rembourrage: 20
}

Le signe du caret ( ^ ) sélectionne tous les éléments avec ContentPage comme classe de base, y compris ContentPage lui-même. Alors que le reste du style CSS est le même que ce que vous faites pour le web, c'est le seul sélecteur qui ne fait pas partie des spécifications CSS – c'est spécial pour Xamarin.Forms seulement. Ayez confiance et lancez votre application – vous verrez que sans changer quoi que ce soit dans le template par défaut de Xamarin.Forms, nous avons CSS qui stylise notre ContentPage . Une petite ligne de code, un pas de géant dans les perspectives de partage de code!

Maintenant, le fichier CSS de vos projets Xamarin.Forms peut être travaillé comme vous le souhaitez – Visual Studio pour Windows et Mac offriront un bon support avec IntelliSense. Vous êtes également libre d'utiliser votre outil CSS bien-aimé. Excepté le symbole du caret ( ^ ), il devrait être affaire comme d'habitude.

CSS Authenticity

Bien que la promesse d'être capable de styler Xamarin.Forms UI avec CSS peut être passionnante, vous pouvez avoir ce sentiment harcelant dans votre intestin: "Est-ce vraiment CSS? Comme, vraiment ce que nous utilisons pour le HTML?" Oui, c'est CSS dans toute sa gloire et la plupart de ses fonctionnalités fonctionnent simplement.

Element Property Support

L'un des avantages immédiats est la prise en charge étendue des propriétés des éléments visuels. CSS peut atteindre à peu près n'importe quelle propriété de style pour les éléments XAML. Voici quelques-unes des propriétés de style les plus courantes familières aux développeurs XAML:

  • couleur
  • couleur de fond
  • font-family [19659010] font-size
  • font-style
  • hauteur
  • largeur
  • bordure- couleur
  • largeur bordure
  • visibilité
  • opacité
  • text-align [19659010] marge – left | à droite | en haut | bas
  • rembourrage – left | à droite | en haut | bottom

Les sélecteurs CSS dictent les éléments sur lesquels agir et ces valeurs de propriété peuvent être définies de la même façon que vous les définiriez à partir de XAML. Pour la précédence, les styles avec des sélecteurs correspondants sont appliqués, un par un, dans l'ordre de la définition. Les styles définis sur l'élément visuel lui-même sont toujours appliqués en dernier. En parlant de sélecteurs, jetons un coup d'œil à certains standards pour choisir les éléments visuels de XAML – CSS est vraiment flexible ici.

Classes de Style

Comme vous pouvez l'imaginer, vous pouvez assigner une classe de style CSS ] aux éléments XAML et définissez le style dans votre fichier CSS – en cas de conflits de valeurs de propriété, le dernier style gagne. Supposons le code XAML suivant:

L'étiquette a la classe .MyLabel appliquée, qui est la suivante:

 .MyLabel {
  La couleur rouge;
}

Voici comment ça se passe au moment de l'exécution:

Nommé Style

Vous pouvez faire référence à n'importe quel élément visuel XAML par leur nom générique en tant que sélecteurs CSS, mais vous pouvez également revenir à x: Name pour identifier les éléments individuels de l'arborescence visuelle. Par exemple, supposons que le code XAML suivant:

 < Label   x:  Name  =  " NamedLabel "   Texte  = [19659070] " Bonjour le monde "   />

Vous pouvez mapper ce Label en utilisant sa propriété Name grâce à un sélecteur d'ID en CSS:

 #NamedLabel   {
   font-size [19659070]:  grand ; 
}

Voici comment ça se passe au moment de l'exécution:

Inline Styling

Si vous avez des besoins de style complexes, il est presque toujours conseillé de définir vos styles dans un fichier CSS séparé – la définition de l'arbre visuel XAML et son style peuvent être rassemblés lors de l'exécution. Pour des scénarios très simples cependant, vous avez la possibilité de définir vos styles CSS en ligne dans votre fichier XAML:

 < ContentPage.Resources > 
   < StyleSheet > 
    
   </  StyleSheet > 
 </  ContentPage.Resources >

Voici comment ça se passe à l'exécution:

Héritage

Passons à la partie en cascade du style CSS. C'est là que CSS brille avec des effets de "retombées" faciles. Supposons que vous vouliez tous les étiquettes dans un StackLayout pour avoir un certain style. Vous pouvez vous référer aux enfants directs en utilisant le sélecteur élément> élément .

Supposons que le XAML suivant:

 < StackLayout   x:  Nom  =  ] " MyStack " 
              Orientation  =  " Vertical " 
              VerticalOptions  =  " Centre " 
              HorizontalOptions  =  " Centre "  > 
   < Label   Texte  =  " Bienvenue dans les formulaires Xamarin!  "  StyleClass  = "  MyLabel  "  />  
   < Label   x:  Nom  =  " NamedLabel "   Texte  =  " Bonjour le monde "   /> 
 </  StackLayout >

Donnons un style aux enfants directs du StackLayout en utilisant le sélecteur element> element :

 stacklayout> label  {
   couleur  couleur :  bleu ; 
}

Vous pouvez commencer à apprécier la puissance et la flexibilité que le support CSS dans Xamarin.Forms fournit:

Maintenant, que faire si vous vouliez que tous les éléments enfants aient un style spécifique, même s'ils ne le sont pas hériter d'un parent direct? Utilisez simplement le sélecteur element element ! Supposons encore un peu de XAML:

 < StackLayout   x:  Nom  =  " MyStack " 
              Orientation  =  ] " vertical " 
              VerticalOptions  =  " Centre " 
              HorizontalOptions  =  " Centre "  > 
   < Label   Texte  =  " Bienvenue sur Xamarin Forms! "   StyleClass  =  " MyLabel "   />  
   < Libellé:   x:  Nom  =  " NamedLabel "   Texte  =  " Bonjour le monde "   /> 
   < StackLayout   Orientation  =  " Vertical  " > 
     < Button   Texte  = "  Bonjour  "  /> 
   </  StackLayout > 
 </  StackLayout >

Utilisons le sélecteur élément élément pour styler le bouton:

 bouton stacklayout  {
   couleur d'arrière-plan :  wheat ; 
 }

Facile, non?

Road Ahead

Vous pouvez appeler cela un mouvement aberrant audacieux, mais le style CSS pour Xamarin.Forms est là pour rester. CSS apporte à la table la possibilité de styliser XAML d'une manière moins verbeuse et plus efficace. Et le plus grand avantage est le partage de code entre votre web et les applications Xamarin.Forms.

Il ne faut pas un lecteur d'esprit pour deviner votre prochaine série de questions. Maintenant que nous avons CSS, pourrions-nous prendre les choses à un niveau avancé et en tirer vraiment profit? Pourrais-je utiliser des pré-processeurs CSS comme Sass et Less dans le style Xamarin.Forms et obtenir des avantages de productivité? Si j'ai un modèle de style XAML, puis-je utiliser CSS pour le modifier? J'utilise Telerik UI pour Xamarin pour une interface utilisateur performante – pourrais-je les styler avec CSS ou modifier le thème intégré ? La réponse à toutes vos questions est un OUI emphatique! Mais pour le risque d'exécution de TL; DR, nous sauvegardons cette discussion pour un autre article. Jusque-là, restez chic et stylisez vos applications Xamarin.Forms comme vous le souhaitez. Cheers!

Les commentaires sont désactivés en mode aperçu.
[ad_2]
Source link