Xamarin.Forms: xaml. Добавить анимацию "click" к кнопке

Question

, поэтому у меня есть эта кнопка:

        <ImageButton
                 Aspect="AspectFit"
                 Grid.Column="1"
                 x:Name="btn_mymatches_mainmenu"
                 Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

Когда пользователь нажимает на нее, анимация не отображается, как если бы я просто взял стандартную «Кнопку». Как я могу добавить эту маленькую анимацию, чтобы играть на кнопке с изображением? На Android это похоже на маленькую серую "волну". Любая анимация была бы потрясающей ...

Спасибо!

Answer 1

Вы можете создать ImageButton Renderer , установив собственный фон для достижения этой цели.

[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>

Затем кнопка ImageButton, используемая в Xaml , может отображать анимацию Ripple:

<ImageButton Aspect="AspectFit"
                Grid.Row="1"
                Grid.Column="0"
                x:Name="btn_mymatches_mainmenu"
                Source="heart.png"
                BackgroundColor="#00000000" />

Эффект:

Answer 2

вот отправная точка.

<ImageButton
     Aspect="AspectFit"
     Grid.Column="1"
     x:Name="btn_mymatches_mainmenu"
     Source="btn_emptydummy.png"
     BackgroundColor="#00000000"
     Clicked="btn_mymatches_mainmenu_Clicked" />

Тогда в вашем коде позади:

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);
}

Есть также анимация затухания и множество других. Просто взгляните на документацию Xamarin Forms. Если вы хотите, вы можете создать класс, который наследуется от ImageButton, и выполнить анимацию внутри, так что все ваши элементы управления будут иметь анимацию без кода.