Forum Xamarin.Forms

Label position and text alignment

JaumardJaumard USMember

Hi,

I try to right align text under Label but can't find how do this. I try to make 3 label like this :

Label 1 | Label 2 | Label 3

Here is my layout

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BasicForm.MainPage">
    <ContentPage.Content >

            <StackLayout Spacing = "0" Padding="10, 40, 10, 40" BackgroundColor="Green" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
                <Label x:Name="start" Font="Large" Text="t" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
                <Label x:Name="middle" Font="Large" TextColor="Red" Text="e" HorizontalOptions="Center" VerticalOptions="Center"></Label>
                <Label x:Name="end" Font="Large" Text="st" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
            </StackLayout>

    </ContentPage.Content>
</ContentPage>

Label 2 contain only one letter so it have to be on center of the screen. Label 1 is the start of the word (align right) and Label 3 the end of the word.

Posts

  • DanZhuDanZhu CNMember ✭✭

    did you tryed XAlign of Label?

  • JaumardJaumard USMember

    It's working with XAlign... I feel stupid ^^.
    And did you know how can fix the Label 2 on the center of the screen ? Because with this code label 2 move if label 1 and 3 doesn't have same size

  • DanZhuDanZhu CNMember ✭✭
    edited July 2014

    use grid,
    var grid = new Grid()
    {
    Padding = new Thickness(0, 5),
    //Spacing = 5,
    ColumnSpacing = 0,
    RowSpacing = 0,
    BackgroundColor = Color.White
    };
    ////-----------------------------
    grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(40, GridUnitType.Absolute) });
    ////-----------------------------

                grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });      
    

    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });

    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });

    //===========================
    grid.Children.Add(label1, 0,0);
    grid.Children.Add(label2, 1,0);
    grid.Children.Add(label3, 2,0);

  • JaumardJaumard USMember

    @DanZhu‌ with your solution is working ! Thanks. But I thinks it's better to create a custom component and use CoreText (iOS) and subclassing TextView (Android). I will look this way

  • arueda_1980arueda_1980 Member ✭✭
    edited March 2018

    for this case dynamic text.... try this , Label Text="{Binding EstadoPedidoActual}" XAlign="Center" HorizontalOptions="FillAndExpand" FontSize="Small" /

  • titolerutitoleru Member ✭✭

    What worked for me was center aligning the StackLayout in which the ListView and Label were placed:

    <ListView x:Name="lvMenu" 
                  SeparatorVisibility="None" 
                  ItemsSource="{Binding Durations}"
                  ItemSelected="OnDurationSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Controls:MyViewCell>
                        <StackLayout Spacing="10" HorizontalOptions="Center" VerticalOptions="Center">
                            <Label TextColor="Gray" Font="20" Text="{Binding}"/>
                        </StackLayout>
                    </Controls:MyViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
Sign In or Register to comment.