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 »
nuget package

Getting the user signature

This is a common feature requested for many applications in the corporate world or if you are working on some sort of payment processing application or a delivery app. You may need the user signature to confirm they have received a package, an order has been delivered or many other

Read More »
app center

Crashing like a pro with App Center

Accept your fate Face it, your app is going to crash at some point. No matter how well you test it or how great the QA team is nor the 100% code coverage or how extensive the device suite for testing you have. There are always going to be edge

Read More »