Najprostszy sposób na Image Button w Xamarin.Forms

 

W tym poście postaram się wyjaśnić jak stworzyć przycisk, który posiada “obrazek” w Xamarin.Forms z użyciem XAML.

Ten wpis może wydawać się dość naiwny, ale nie mogłem znaleźć prostego sposobu na wykonanie tego zadania tzn. stworzenia przycisku, który posiada obrazek jako swoje tło. Oczywiście istnieją gotowe kontrolki “third party”. Jak na przykład ImageButton z Xlabs. To jednak ja chciałem uzyskać dany efekt możliwie najprostszym sposobem.

Zaznaczam, że dopiero poznaje Xamarin.Forms i nie wiedziałem, że coś takiego jak GestureRecognizers/TapGestureRecognizer istnieje i może być zaimplementowane do prawie każdej kontrolki…

Poniżej w jaki sposób zrobiłem Image Button:

Aby obrazek wyświetlał się prawidłowo na każdej platformie (w przypadku mojego projektu korzystam tylko z Androida i UWP) powinien znajdować się on odpowiednio dla:

  • Androida – plik powinien być w folderze Resources > Drawable ustawiony jako AndroidResoruce,
  • UWP  – w root folderze projektu ustawiony jako typ Content

Aby uzyskać Text na butonie po prostu dodałem Label w kontenerze StackLayout z orientacja Horizontal. Efekt finalny:

Oto efekt końcowy może nie powalający, ale na początek wystarczy:

image_buttons
Image Buttons

 

Mam nadzieje, że ten krótki wpis rozjaśnił w jaki sposób można uzyskać Image Button, oraz podpiąć zdarzenia i komendy do każdej kontrolki.