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 would like to 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

core

Handling Excel Files with NPOI

NPOI is a library for working with Office documents like Word and Excel. I mainly been using it for reading and writing Excel files so that’s what I’m going to write about. It works with .csv and .xlsx formats and is based on the Apache POI project for Java. It

Read More »