How do you create a parallelogram button in Xamarin.Forms

Question

I'm currently working on a new multi-platform (iOS & Android) app in Xamarin and the designer of the app wants the buttons to be parallelogram shaped, anyone have any idea how you might achieve this? Below is an example of one of the buttons they want done.

Answer 1

For custom controls like the one you are mentioning, you could typically create a shape , layer on the text you would like, and add gesture recognizers like a tapped event to the shape itself, allowing it to act as a button.

See this sample by Microsoft, which includes shapes like the Windows Logo, which is several parallelograms.

One thing to look out for is how the tapped events may be received on different devices. The gesture recognizers may not work on all shapes on every platform.

For instance, if you are making a parallelogram button, it may have an issue recognizing the button is clicked on some devices, if you wrap that button in a Frame that has the gesture recognizer instead (which may be more reliable), the frame bounds may not line up perfectly with the button, and the gesture may be slightly off.

In that case you would probably need a platform specific implementations may be needed.