Les boutons avec image font partie de ce petit groupe d’objet d’UI incontournables. Mais jusqu’ici point de bouton à image sous Xamarin.Forms, mais cela vient de changer !
ImageButton
Voici un post qui ne réclame pas de long blabla ni ne justifie une vidéo sur Dot.Vlog. Tout le monde sait ce qu’est un bouton, une image, et tout le monde a déjà vu des bouton avec texte + image.
Les présentations étant faites, depuis la version 3.4.0 des Xamarin.Forms nous avons ainsi le plaisir de trouver une nouvelle classe “ImageButton” qui remplit cet office.
Certes imparfaitement (j’ai vu quelques petits bugs de comportements un peu louche, mais comme le reste ce n’est pas à sa première release qu’il faut juger une nouveauté), mais l’ImageButton fait le job et très simplement.
Utilisations inventives
Un bouton avec image seule cela permet d’obtenir une image cliquable… Sans avoir à bricoler une image en lui ajoutant une Gesture par exemple. Ce qui n’est guère compliqué (mon livre sur les Xamarin.Forms montre des exemples de cette stratégie) mais si c’est déjà fait autant en profiter et se concentrer sur du code plus utile.
Ainsi en associant habilement les possibilités du Visual State Manager et de l’ImageButton on peut facilement créer des effets sympathiques autant que dynamiques, comme par exemple un effet visuel d’enfoncement lorsqu’on clique sur le bouton (en réalité un changement de l’échelle de l’image).
Pour ceux qui souhaiterait tout savoir sur le Visual State Manager, n’oubliez pas ma série de trois vidéos sur Dot.Vlog qui traite du sujet !
Le code suivant illustre une telle astuce :
Ce qui visuellement donnera environ cela :
Comme on le voit gérer l’effet sur le bouton ne l’empêche pas de gérer normalement son clic (mis en évidence ici par l’affichage d’un message).
Les plus perspicaces d’entre vous (et ceux qui auront suivi ma série de trois vidéos sur le VSM !) auront remarqué que l’exemple de code utilise un état “Pressed” sur le bouton. Or les CommonStates ne définissent que Normal, Focused et Disabled. Il s’agit ici d’un petit raccourci, l’état “Pressed” étant un état “custom” géré à part mais ce n’était pas l’objet du papier d’aujourd’hui…
Conclusion
Que dire de plus que merci… L’ImageButton n’est certes pas une fonction “killer”, la terre ne suspendra pas sa ronde autour de son axe ni autour du soleil. Mais c’est une modeste contribution qui simplifie la vie car des images cliquables c’est un besoin fréquent…
Stay Tuned !