Using Button with image and text in Xamarin Forms

Question

I am new to Xamarin forms and has a basic question to find out the best approach of using Buttons with Image and Text in Xamarin forms.

The task is to design a main page having buttons layout as follows:

I am able to complete this layout using Buttons and StackLayout. I used the ContentLayout property of Button to set the alignments (for example):

ContentLayout="Right, 80"
ContentLayout="Right, 25"
ContentLayout="Right, 100"
ContentLayout="Right, 10"

This way the image goes to right and the spacing defines the space between text and image. I have to set different spacing for each button that seems to be wrong. I did not find any better way to set the Text as left aligned and it seems to be centered aligned by default.

Is there any property of Button that can be used to left align the button text. Or what will be the better approach to have buttons with this basic design.

No, I don't think you can do this by default. You'll either want to create a custom renderer that changes the text orientation of the native text control, or create a custom button layout/implementation. I would tend to suggest the latter approach. — Ben Reierson

bhavya joshi bhavya joshi · Accepted Answer · 2019-10-10T07:54:16

I don't think there is any other way with button but in your case,i would suggest you to go with StackLayout without using ContentLayout property in button as you always need to show buttons at the very end.

 <StackLayout Orientation="Vertical">
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">
                    <Label Text="Small Text" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                    <Image Source="image.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                </StackLayout>
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">
                    <Label Text="This is large text" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                    <Image Source="image.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                </StackLayout>
            </StackLayout>

Using Button with image and text in Xamarin Forms

1 Answers