'Button with image and text and text bellow the image, how?

First time with cross-platform apps with xamarin, i'm working with xamarin forms in visual studio 2017 community.

I have a button with an image and text but the text needs to be below the image. currently the text is displaying to the left of the image, how can i do this?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;

namespace AppUnap
{
public class PPrincipal : ContentPage
{
    public PPrincipal()
    {
        Button btn1= new Button();
        btn1.Image = "notas.png";
        btn1.Text = "Calificaciones";
        btn1.HorizontalOptions = LayoutOptions.CenterAndExpand;

        Button btn2 = new Button();
        btn2.Image = "notas.png";
        btn2.Text = "Aula Virtual";
        btn2.HorizontalOptions = LayoutOptions.CenterAndExpand;

        Content = new StackLayout
        {
            Spacing = 0,
            VerticalOptions = LayoutOptions.CenterAndExpand,
            Children =
            {
            new StackLayout
            {
                Spacing = 0,
                Orientation = StackOrientation.Horizontal,
                Children =
                {                       
                    btn1,
                    btn2,
                }
            }
            }


        };
    }
}
}

Solution 1:^[1]

You need to use ContentLayout on your button.

Here is the code I use in XAML:

<Button Command="{Binding MyCommand}" ContentLayout="Top,0" Text="mytext" Image="myimage.png" />

Top = Position of the Image

0 = spacing between image & text

You should find easily how to use the ContentLayout in C#

Solution 2:^[2]

To get the above result I used a ImageButtom, because is possible adjust the image size. I made like this:

  <Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="*" />
  </Grid.RowDefinitions>
      <Label 
            Text="{Binding CountryId}"
            TextColor="{DynamicResource PrimaryDarkColor}"
            FontFamily="MontSerratBold"
            Margin="0, 0, 0, 10"
            VerticalOptions="End"
            HorizontalTextAlignment="Center" 
            VerticalTextAlignment="End"/>
      <ImageButton 
            Source="{Binding CountryUrl}"
            HorizontalOptions="Center"
            VerticalOptions="Start"
            BackgroundColor="Transparent" 
            Padding="0, 10, 0, 30"
            HeightRequest="90"
            Command="{Binding OpenPickerPopUp}"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	hugo
Solution 2	Fernando Silva

'Button with image and text and text bellow the image, how?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]