Adding an icon to a Button in Xamarin Forms

Screen Shot 2019-03-24 at 2.09.11 PM
Share on facebook
Share on twitter
Share on linkedin

To achieve this we are going have to set the ContentLayout and Image properties from the Button we want to customize. Let’s just jump right into it.

Here is the XAML

Here is in C#

This is pretty straight forward but I’m going to explain what we are doing. The Image property takes the name of an image resource, that’s going to be the icon for our button. You must add the image on each platform accordingly and remember to include the different sizes for each dpi/screen size for better visuals.

The ContentLayout property has two values separated by a comma. First is the position we want the image to appear in defined by the ImagePosition enumerator we can set the image to the Top, Left, Right or Bottom of the button. The second parameter is the space we want between the button text and the icon.

In the end you will end up with something like the following

All four positions of button/text. The iOS version is on the left and the android version on the right.

And that’s it, hope you found this useful. See you next time.

Did you like the post and Wanna leave a reply? You can mention me on twitter @eatskolnikov so we can have a conversation about it

Share it with your friends

Share on facebook
Share on twitter
Share on linkedin

Want to get these post in your inbox?

Type your email down here and you will get a weekly digest of the post here

Other articles on the site


Prettying things up with Styles

Using styles you can define a consistent UI for your app and is a great way to make your XAML files more readable and maintainable in the long term. Some neat characteristics of styles: They are very easy to define. Can be inherited to minimize code reuse. Can be defined

Read More »
Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019

The CodecampSDQ experience

Last Saturday, June 1st I had the privilege of participating as both staff and speaker for a little-known tech event called CodecampSDQ. It was held in the premises of INTEC University here in Santo Domingo. This event has been going on for many years and it has become a sort

Read More »