6

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,
                }
            }
            }


        };
    }
}
}

2 Answers 2

18

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#

0

enter image description here

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}"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.