Answers

• NMackay GBInsider, University admin

  February 2019 Accepted Answer

  You don't need a custom render, just add an animation to the image, something like this.

  using System;
  using System.Threading.Tasks;
  using System.Windows.Input;
  using Xamarin.Forms;
  
  namespace Foobar.CustomControls
  {
      public class ImageButton : Image
      {
          public static readonly BindableProperty CommandProperty =
              BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(ImageButton), null);
  
          public static readonly BindableProperty CommandParameterProperty =
              BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(ImageButton), null);
  
          public static readonly BindableProperty AnimateProperty =
              BindableProperty.Create(nameof(Animate), typeof(bool), typeof(ImageButton), true);
  
          public event EventHandler ItemTapped = (e, a) => { };
  
          public ImageButton()
          {
              Initialize();
          }
  
          public ICommand Command
          {
              get => (ICommand)GetValue(CommandProperty);
              set => SetValue(CommandProperty, value);
          }
  
          public object CommandParameter
          {
              get => GetValue(CommandParameterProperty);
              set => SetValue(CommandParameterProperty, value);
          }
  
          public bool Animate
          {
              get => (bool)GetValue(AnimateProperty);
              set => SetValue(AnimateProperty, value);
          }
  
          // Added to ensure images are released from memory
          protected override void OnBindingContextChanged()
          {
              base.OnBindingContextChanged();
              if (Equals(base.BindingContext, null))
              {
                  base.Source = null;
              }
  
          }
  
          private ICommand TransitionCommand
          {
              get
              {
                  return new Command(async () =>
                  {
                      Command?.Execute(CommandParameter);
  
                      ItemTapped(this, EventArgs.Empty);
  
                      if (!Animate) return;
  
                      AnchorX = 0.48;
                      AnchorY = 0.48;
                      await this.ScaleTo(0.8, 50, Easing.Linear);
                      await Task.Delay(100);
                      await this.ScaleTo(1, 50, Easing.Linear);
  
                  });
              }
          }
  
          public void Initialize()
          {
              GestureRecognizers.Add(new TapGestureRecognizer
              {
                  Command = TransitionCommand
              });
          }
      }
  }
  
  
  

  Then just consume it in xaml

  <customControls:ImageButton Grid.Row="0" Source="IconSettings" 
              Command="{Binding SettingsCommand}" 
                          ItemTapped="ImageButton_OnItemTapped" 
                          Animate="True" />
  

  8
• Suriya_Kalidoss Member ✭✭✭

  February 2019

  Thank You

  1