Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Xamarin.Forms : Des astuces un peu passées dans l’ombre

Il y a dans chaque release de tout software quelques ajouts phares qui font couler l’encre et plein de petites choses utiles dont on ne parle nulle part… Découvrons quelques trucs bien utiles…

Nouveautés anciennes

Comme je le disais chaque nouvelle release contient quelques ajouts qui font les gros titres. Nous en sommes à la V4.x qui apporte le Shell dont j’ai parlé longuement et on ne parlera certainement pas beaucoup du reste. Mais en bon archéologue des astuces oubliées je vais attendre un peu, par exemple la sortie de la V 5.0 pour revenir sur les trucs de la 4.0 que vous avez loupés ! Sinon je briserai moi-même l’affirmation qui commence ce paragraphe, abominable paradoxe qui me plongerait dans les affres kafkaïens de type “retour vers le futur”, en pire.

Donc puisque nous en sommes à la V 4.x je vais vous parler de trucs de la V 3.0 que vous avez loupés (ou pas, mais il y a des chances).

Les options Ime d’Android

Le truc consiste ici à pouvoir personnaliser la touche “return” du clavier virtuel. Vous ne l’aviez pas vu celle là j’en suis presque sûr.

Le clavier par défaut ressemble en générale à cela :

image

Avant, mais ça c’était avant, pour personnaliser ce clavier on faisait appel à du code spécifique de la plateforme. Mais maintenant on peut utiliser ImeOption qui reste une option spécifique à la plateforme mais autrement plus simple à manipuler que de bricoler dans le code natif.

Pour s’en servir il faut déclarer les namespace Android dans l’entête de la page en général :

xmlns:android=”clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
     assembly=Xamarin.Forms.Core”

(sur une même ligne c’est mieux mais ici ça risque de dépasser de la mise en page)

Une fois le namespace ajouté, on peut utiliser plein de choses qui se trouvent dedans mais surtout ici ImeOption de Entry :

android:Entry.ImeOptions=”Search”

Ce code s’ajoute à celui d’un Entry bien entendu comme n’importe quelle propriété ordinaire.

Vous allez me dire c’est sympa mais ça fait quoi ?

Je l’ai dit plus haut : ça personnalise le bouton “return” du clavier qui par défaut ressemble à celui de l’image plus haut (une checkmark verte).

Et avec “Search” ? Devinez … Une loupe.image

Et c’est tout ? Ben c’est déjà pas mal non ! L’UX bord* ça compte !  Avec ça le user il sait qu’il va valider une recherche à faire. C’est plus parlant.

Mais en plus, non, ce n’est pas tout, il y en a plein !

En C# c’est l’énumération ImeFlags qui contient la liste.

Tapez un code du genre : MonEntry.Current.On<Android>.ImeOptions = ImeFlags. et vous verrez alors toute la liste s’afficher.

Le choix modifie aussi la valeur de retour du bouton mais ça je vous laisse le découvrir tout seul, je ne vais pas repomper la doc officielle.

Le séparateur de lignes de ListView sous iOS

Il en faut pour tout le monde ! En reprenant le même principe de la déclaration du namespace natif qui ici s’écrit :

xmlns:ios=”clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;
     assembly=Xamarin.Forms.Core”

Toujours sur une ligne (ici la coupure évite que ça déborde à droite de la mise en page du blog)

Au passage vous pouvez appeler le namespace comme vous le voulez, mais pour ces namespaces natifs, appeler android celui pour Android et ios celui pour iOS me semble une bonne habitude à prendre qui se fonde sur un rationalisme assez basique et le bon sens tout à la fois !

“Vous pouvez répéter la question ?”

Pour une fois point de blonde un peu idiote pour faire cette réplique culte (et machiste, mais la liberté existe-t-elle encore quand on ne peut plus rire de tout ? vous avez quatre heures).

En vérité je vous le dit, je n’ai pas indiquer la question. Donc on ne se moque ni de la blonde ni de personne d’autre ! Mea culpa, mea maxima culpa !

J’enrobe (de chambre – c’est aussi de l’humour mais plus lourd) car vous allez le voir ça ne casse pas trois pattes à un pauvre canard (et puis on ne casse aucune patte à des canards c’est ignoble de penser un truc pareil).

Le truc c’est que sous iOS chaque contenu d’une ligne d’une ListView est séparée de la suivante par une ligne (un trait). Et si vous l’avez remarqué cette ligne commence à gauche sous la première lettre de la ligne. C’est qui est un choix esthétique tout à fait légitime. Et comme le contenu commence avec une légère marge, dans une cohérence stylistique impayable digne d’Apple tout commence donc avec un léger décalage du plus bel effet. Une marge gauche donc. Des génies je vous dit. Prosternez-vous devant la Pomme !

Mais on pourrait vouloir, selon le design, que cette ligne commence vraiment à gauche, sans marge. Certes cela va décaler son début de celui du contenu. Mais imaginons que le designer l’ait ainsi décidé, qu’il ait personnalisé le contenu par une ViewCell qui serait plus jolie si la ligne démarrait du début, qu’il ait tout simplement trop bu. Ou n’importe quelle autre raison d’ailleurs, on s’en fiche, ici on parle possibilités nouvelles, pas justification de ces possibilités, pff vous posez trop de questions, circulez y’a rien à voir, ouste !

Donc imaginons qu’on veuille que la ligne commence à gauche pile. Parce que.

Et bien maintenant au lieu de passer par des Effects ou des Renderers en natif, avec le namespace plus haut indiqué, il suffit d’ajouter aux propriétés de la ListView le code suivant :

ios:ListView.SeparatorStyle=”FullWidth”

Et hop ! la ligne commencera sans marge. Comme ça :

image

Sous Android ça n’existe pas en natif puisque l’OS a un look & feel basé sur des choix différents, donc là on reprendra la recette du pauvre qu’on utilisait sous iOS avant l’astuce sus-indiquée : on ajoute une BoxView d’une hauteur de 1 pixel ou  2 en dessous du design de la ViewCell…

Le Picker s’embellit

le pauvre Picker avait vraiment été écrit à l’arrache par un stagiaire dans les premières versions. Les options ne pouvaient être codées qu’en dur par des x:string sous Xaml, il n’y avait pas de binding, rien. C’était pas le contrôle le plus réussi. Heureusement ces lacunes ont été comblées depuis un moment.

Mais il restait une ombre au tableau. La famille de fonte ne pouvait pas être modifiée… Dommage pour une mise en conformité avec le design d’une page hyper bien travaillée…

C’est tout bête mais le Picker supporte désormais la propriété FontFamily. Il suffit de lui passer le nom de la famille à afficher et ça marche.

Alors quand je dis “désormais” entendez-le dans le cadre de ce voyage dans le passé, un bon coup de rewind comme un magnéto à cassette en gros (joke totalement incompréhensible pour les plus jeunes) … On parle des “nouveautés” de la version 3.0 que vous avez certainement loupées ne l’oubliez pas. C’est un papier d’archéologue à l’inverse de mes papiers habituels qui vous font miroiter ce qui va bientôt exister Smile

La barre de progression prend de couleurs

Vous l’aviez vu passer celle-là aussi ? Peut-être pas…

jusqu’à “maintenant” (entendez jusqu’à la V3.0) la Progressbar avait une couleur fixe. C’était comme ça. Ou alors il fallait encore partir dans les méandres du code natif. Ce qui est toujours possible avec Xamarin.Forms et c’est génial car on évite d’attendre une mise à jour future pour un besoin immédiat, mais ce n’est pas le plus rapide à coder.

Aller, je vais abréger le suspens ici, outre la couleur de fond (on plutôt la couleur par défaut de la ligne quand elle est à zéro) BackgroundColor, oui vous l’avez deviné, on trouve la propriété ProgressColor… Merveilleux n’est-il pas ? Attention tout de même toutes les combinaisons ne sont pas très user friendly car sur une ligne si une moitié est rouge et l’autre bleu, il sera difficile de savoir de quel côté se trouve la partie qui avance… Optez pour une backgroundColor sombre, voir gris, et une ProgressColor plus flashy, l’UX n’en sera que meilleure. Principe de base du design  : la Lisibilité.

Savoir limiter les entrées

Ici jouons les videurs de night club. T’as des Nike tu passes, T’as des imitations chinoises, rentre chez toi !

De mon temps on passait pas du tout, Nike ou pas, des chaussures de sport ne pouvaient en aucun cas être assimilées à la classe de chaussures de soirée. C’est dingue ce truc des modes idiotes. Trouver classe une paire de basket continue à me sidérer… Je dois vieillir on va dire ça.

Bref, faisons barrage !

“Mais à quoi m’sieur ?”

Bonne question mon petit gars ! On va faire barrage aux caractères clandestins !

Il fut un temps, avant la 3.0 donc, où les Entry pouvaient se remplir à volonté. Là où le code attendait 10 caractères maximum par exemple, et malgré le message qui disait “10 car. max.” juste en dessous, des petits vicieux essayaient d’en entrer 11. Puis voyant que ça passait, 12 et puis plein ! Une invasion !

L’Entry était un petit laxiste incapable de juguler ces hordes de caractères clandestins barbares qui par forcent se trouvaient tronqués par le programme qui lui ne rigolait pas avec les quotas !

Ou pire, pour les mauvais codes ça plantait.

Certains bricolèrent des Behaviors pour policer tout ça. Comme un ligne de CRS bien positionnée devant la frontière. Mais c’était du bricolage il faut l’avouer.

L’ordre de l’Angsoc est enfin rétabli mes amis ! Et c’est plusbon ! C’est même Doubleplusbon !

Océania est enfin libérée de cette anarchisante Crimepensée !

MaxLength. What else ?

Non, pas MaxWell, on n’est pas chez qualitéfiltre ici.  MaxLength. Longueur maximale. Nouvelle propriété du Entry qui fait ce qu’elle dit…

Conclusion

La presse en parle :

Ecrit avec un humour décalé très hype” Libération

'”Scénario un peu décousu, 3 étoiles sur 5” Télé Star

Une entré convenable, un plat trop léger et un dessert trop lourd” Le Guide Michelin

Le sérieux se perd chez ces pseudo-auteurs modernes.” Le Figaro

Les auteur.e.s se sont lâché.e.s dans des envolées désuètes. Nos lecteur.rice.s s’en méfieront”. Le Monde

Rire du péril clandestin est odieux, cet auteur est un collabo” Minute

Ce plumitif possédé utilise une parole qui n’est pas sans rappeler celle d’un certain Juda” La Croix

Bref, vous voyez, tout le monde en parle. Et vu le contenu c’était à parier. Je le sentais bien. Trop engagé. Trop libre, ça déplait par force.

Mais pour lire d’autres articles (souvent moins barrés avouons-le) :

Stay Tuned !

blog comments powered by Disqus