CODEWITHSUNDEEP
xamlxamarin.forms
Michael Winther
Michael Winther

Reputation: 381

Xamarin two labels in each end in one line

I have implemented a listview and in each item I want to have two labels, in each end horizontally. But in reality it just put the two labels next to eachother left aligned.

I read that maybe this is not possible with a stacklayout, as it doesn't take up more space than needed. (Even tried fill and fillandExpand which didn't help.)

Instead I should use a grid. But I have options on my listview, as grouping, refresh, caching, tapped, which I guess I don't have on a grid?

I would like to succeed with a listview if that is possible. Anyone have some insights to this layout issue?

Here is my xaml code:

<?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="MyApp.Page.ItemsTest">
<ListView  x:Name="ItemView" 
                ItemsSource="{Binding ItemGroup}"
                CachingStrategy="RecycleElement"
                IsGroupingEnabled="true"
                HasUnevenRows="True"
                ItemTapped="Handle_ItemTapped">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout BackgroundColor="#FFA500" Orientation="Vertical" Padding="10">
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding Heading}" TextColor="White" FontAttributes="Bold" />
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
                    <Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
                    <Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
</ContentPage>

Central part is this:

<StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
     <Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
     <Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</StackLayout>

Update:

As requested I have a colored the background of the two labels and the stacklayout. It's the same output if I use HorizontalOptions="End" and HorizontalTextAlignment="End" at the same time or each one alone. Also if I remove the HorizontalOptions="FillAndExpand" on the stacklayout, it's still the exact same graphical output. (The orange color was already present)

Picture of app with different backgroundcolors

Upvotes: 0

Views: 5957

Answers (2)

Michael Hamilton
Michael Hamilton

Reputation: 111

You could also use nested StackLayout

        <StackLayout>
            <Label />
            <Label Text="Gender:" FontAttributes="Bold"/>
            <StackLayout Orientation="Horizontal">
                <Label HorizontalOptions="Start"  Text="First Name: " FontAttributes="Bold"/>
                <Entry HorizontalOptions="EndAndExpand" Placeholder="First Name" MaxLength="256" Text="{Binding FirstName}"></Entry>
            </StackLayout>
        </StackLayout>

Upvotes: 1

GeralexGR
GeralexGR

Reputation: 3592

Maybe you could use a Grid instead of the StackLayout and place each Label in a different Column:

  <Grid>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"></ColumnDefinition>
  <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>

    <Label Grid.Column="0" Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
    <Label Grid.Column="1" Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
  </Grid>

Upvotes: 2

Related Questions