How to extend the button for a custom solution Xamarin

Question

Hi How I can extend in View the button for a custom solution?

I wont extend this:

....

 <Button BackgroundColor="#388fee" BorderColor="#388fee" BorderRadius="25" WidthRequest="50" HeightRequest="50"
                Command="{Binding CheckinShareCommand}" Margin="0,16">
            <Button.Image>
                <FileImageSource File="googlemap_view_share_button.png" />
            </Button.Image>
        </Button>

....

This is my custom solution.

When you press an image it magnifies it

public class CustomImage : Image { public static readonly BindableProperty CommandProperty = BindableProperty.Create(p => p.Command, null); public ICommand Command { get { return (ICommand)GetValue(CommandProperty); } set { SetValue(CommandProperty, value); } }

    public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create<CustomImage, object>(p => p.CommandParameter, null);
    public object CommandParameter
    {
        get { return (object)GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    private ICommand TransitionCommand
    {
        get
        {
            return new Command(async () =>
            {
                this.AnchorX = 0.48;
                this.AnchorY = 0.48;
                await this.ScaleTo(2.8, 50, Easing.Linear);
                await Task.Delay(100);
                await this.ScaleTo(1, 50, Easing.Linear);
                if (Command != null)
                {
                    Command.Execute(CommandParameter);
                }
            });
        }
    }

    public CustomImage()
    {
        Initialize();
    }


    public void Initialize()
    {
        GestureRecognizers.Add(new TapGestureRecognizer()
        {
            Command = TransitionCommand
        });

....

@ZiyadGodil Can I use this code to Image example to this code, no use CommandParameter? <local:AnimatedImage CommandParameter="{Binding Position.From}" Grid.Column="0" Grid.Row="0" Source="googlemap_view_profil.png" HorizontalOptions="Center" VerticalOptions="Start" Margin="16,24,16,0" /> — user3441937

Ziyad Godil Ziyad Godil · Accepted Answer · 2017-09-21T09:46:06

If you want magnifies Image when you pressing on it Try Below Code :

public class CustomButton : Button
{
    public CustomButton() : base()
    {
        const int _animationTime = 10;
        Clicked += async (sender, e) =>
        {
            try
            {
                var btn = (CustomButton)sender;
                await btn.ScaleTo(1.2, _animationTime);
                await btn.ScaleTo(1, _animationTime);
            }
            catch (Exception ex)
            {
                ex.Track();
            }
        };

    }
}

Xaml

<userControls:CustomButton BackgroundColor="#388fee" BorderColor="#388fee" BorderRadius="25" WidthRequest="50" HeightRequest="50"
                Command="{Binding CheckinShareCommand}" Margin="0,16">
            <Button.Image>
                <FileImageSource File="googlemap_view_share_button.png" />
            </Button.Image>
        </userControls:CustomButton>

Don't Forget to put this line in header

xmlns:userControls="clr-namespace:YourNameSpace.UserControls"

How to extend the button for a custom solution Xamarin

1 Answers