Xamarin.Forms: xaml. Add "click" animation to button - xaml

Question

so I have this button:
<ImageButton
Aspect="AspectFit"
Grid.Column="1"
x:Name="btn_mymatches_mainmenu"
Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
When the user clicks on it, there is no animation visible as if I just were to take the standard "Button". How can I add this little animation to also play on my image button? On Android, this is like a little grey "wave". Any animation would be awesome...
Thank you!

Answer 1

here is a starting point.
<ImageButton
Aspect="AspectFit"
Grid.Column="1"
x:Name="btn_mymatches_mainmenu"
Source="btn_emptydummy.png"
BackgroundColor="#00000000"
Clicked="btn_mymatches_mainmenu_Clicked" />
Then in your code behind :
public async void btn_mymatches_mainmenu_Clicked(object sender, EventArgs e)
{
await btn_mymatches_mainmenu.ScaleTo(0.75, 100);
await btn_mymatches_mainmenu.ScaleTo(1, 100);
}
There is also Fade animations, and a lot of other. Just take a look at the Xamarin Forms documentation.
If you want, you can create a class which inherit from ImageButton and perform the animation inside so all your controls will have the animation without any code.

Answer 2

You can create an ImageButton Renderer by setting a custom background to achieve that .
[assembly: ExportRenderer(typeof(Xamarin.Forms.ImageButton), typeof(CustomImageButtonRenderer))]
namespace AppImageXml.Droid
{
public class CustomImageButtonRenderer : ImageButtonRenderer
{
public CustomImageButtonRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ImageButton> e)
{
base.OnElementChanged(e);
SetBackgroundResource(Resource.Drawable.ripple_bg);
// Set a background to be like a Ripple animation
}
}
}
ripple_bg.xml :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/darker_gray">
<!--Ripple color-->
<item>
<shape android:shape="rectangle">
<!-- background color-->
<solid android:color="#android:color/white"/>
</shape>
</item>
</ripple>
Then the ImageButton used in Xaml can show the Ripple animation :
<ImageButton Aspect="AspectFit"
Grid.Row="1"
Grid.Column="0"
x:Name="btn_mymatches_mainmenu"
Source="heart.png"
BackgroundColor="#00000000" />
The effect :