Text and Image Button

Hello friends. In this article, I will talk about how we can display the picture and the writing at the same time on a button. It may be necessary in some cases.

In fact, you do not have to create a very simple Custom Renderer. First we create a button. Then we add the picture and the text we will add to this button. Here we have to pay attention to the resolution of the photo we have added. If the resolution is too high, the problem is likely to occur. The ideal resolution is 64×64.

Then we set where the picture and the text should stop. We need to do this with the Content Layout feature. The first option in Content Layout is image. First we set where the picture should stop. Depending on the design you use, you can keep it on top, right, left or bottom. You can use Top right left commands for this. Below are sample code lines.

<StackLayout VerticalOptions="EndAndExpand"
                        HorizontalOptions="Start"
                         Padding="30">
                <Button x:Name="buttonCikis"
                        Text="Çıkış"
                        TextColor="White"
                        Image="quit32"
                        ContentLayout="Left,0"
                        BackgroundColor="#3598db"
                        BorderRadius="15"/>
            </StackLayout>

The output of the screen is as follows

If you have questions that you have in mind, you can reach me by email or comment. Good work.