{"id":9784,"date":"2022-12-08T10:43:02","date_gmt":"2022-12-08T10:43:02","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=9784"},"modified":"2022-12-08T10:43:02","modified_gmt":"2022-12-08T10:43:02","slug":"imagebutton-or-image-with-tapgesturerecognizer-in-maui","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/imagebutton-or-image-with-tapgesturerecognizer-in-maui\/","title":{"rendered":"ImageButton or Image with TapGestureRecognizer in MAUI ?"},"content":{"rendered":"

MAUI includes a Button<\/em> (as you’d expect) as well as an ImageButton<\/em> which allows us to display (as I’m sure you guessed) and image instead of text. Sadly (at least in the current version of .NET 7.0) this does not work nicely on Windows and I want my MAUI app to deploy to iOS, Android and Windows.<\/p>\n

An Image Button takes and image source and we can supply a command etc. like this<\/p>\n

\r\n<ImageButton \r\n   Source="start.png" \r\n   Command="{Binding StartCommand}" \/>\r\n<\/pre>\n
I’ve not tested this yet on a device, but on an Android emulator the image button doesn’t have the pressed, ripple effect that a standard button has, so it’s not that obvious that it’s been clicked. However it displays the image correctly and with transparency. Much to my surprise though, on Windows, the transparency is lost and instead we get a button with some percentage of opacity, however on Windows it does look more like a button – so good and bad points.<\/p>\n
So, at this time, the best way to display an image and respond to tap events appears to still be using an Image and TapGestureRecognizer, like this<\/p>\n
\r\n<Image Source="start.png">\r\n   <Image.GestureRecognizers>\r\n      <TapGestureRecognizer Command="{Binding StartStopCommand}"\/>\r\n   <\/Image.GestureRecognizers>\r\n<\/Image>\r\n<\/pre>\n
This still lacks the button-like feedback (such as a ripple). Using something like the AlohaKit.Animations<\/em> NuGet package we could add a Tapped event to our TapGestureRecognizer and in code behind have something like<\/p>\n
\r\nprivate void TapGestureRecognizer_OnTapped(object? sender, TappedEventArgs e)\r\n{\r\n   if (sender is View view)\r\n   {\r\n      view.Animate(new StoryBoard(new List<AnimationBase>\r\n      {\r\n         new ScaleToAnimation { Scale = 1.2, Duration = "200" },\r\n         new ScaleToAnimation { Scale = 1, Duration = "100" }\r\n      }));\r\n   }\r\n}\r\n<\/pre>\n
Whilst it’s not a button ripple effect, it does give some feedback on the image being tapped – obviously it would be worth looking at alternative animations to best suit your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
MAUI includes a Button (as you’d expect) as well as an ImageButton which allows us to display (as I’m sure you guessed) and image instead of text. Sadly (at least in the current version of .NET 7.0) this does not work nicely on Windows and I want my MAUI app to deploy to iOS, Android […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[330],"tags":[],"class_list":["post-9784","post","type-post","status-publish","format-standard","hentry","category-maui"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9784"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9784\/revisions"}],"predecessor-version":[{"id":9787,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9784\/revisions\/9787"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}