How to use Xamarin forms’ Button.ContentLayout property?

No, this property does not allow you to set any custom content to be rendered inside the button.

ContentLayout on the Button element is a property of type “ButtonLayoutContent” it determines the positioning of the button’s image in relation to it’s text.
It has two properties, image position and spacing.

Position is used to set the placement of the image in relation to the text. The image can be above or below the text, or to the left or the right side of the text.

Spacing is the amount of space between the image and the text.
In the Android implementation of the Button renderer, it sets the CompoundDrawablePadding property, which is defined as the padding between the compound drawables and the text.

On iOS, the default renderer does some math to figure out the correct values for ImageEdgeInsets, TitleEdgeInsets and ContentEdgeInsets

Example usage in XAML:

<Button BackgroundColor="Color.Gray" Image="coffee.png" Text="Click Me" ContentLayout="Top,10">

In C# code, you simply pass the two values in the constructor

btn.ContentLayout = new ButtonContentLayout(ImagePosition.Top,10);

Leave a Comment