Daniel Hindrikes

Sometimes you need a more flexible button than the one that is shipped with Xamarin.Forms. That was the case for me with the app I am working with right now. I wanted to be able to have more flexible content and I also wanted to style it more than I was able to when I used the default Button. So I decided to create my own Button control. I decided to use PancakeView by Steven Thewissen as the base class for my control. PancakeView is a great library if you want to have views and be more flexible when we are talking about corner radius, shadows, and gradients.

To make a button controls of PancakeView you need to add code to handle when a user taps the control. I added bindable properties for Command and CommandParameter as Xamarin.Forms.Button has, so that the user can bind a command to it.

In the constructor of the control, I am adding some default styling, that could be overridden by setting the properties in the view that you are using the control in. I also add a TapGestureRecognizer and an event handler for it in the constructor.

I wanted some feedback for the user when the button is tapped. So I added code to scale the control down and up again when a user tapped the control, to be able to easily set how much it should scale I added a property with the name AnimationScale.

In the event handler for the TapGestureRecognizer I do the animations and execute the Command if it is set. I execute the command before I animate the scale back to its original value. This because I think the delay is too long to wait for both animations. But it is nice to animate the value back, in case you not navigating when the users are pressing the button. But here you can write whatever feedback that fit your needs.

Then you can use it like this in yout views: