CODEWITHSUNDEEP
xamarinxamarin.forms
Alan2
Alan2

Reputation: 24552

How can I lay out three labels one after another with two at the end in Xamarin.Forms XAML

I am trying to layout but it's not working. Here is what I have:

<Grid">
   <Label Text="ABC"  HorizontalOptions="StartAndExpand"/>
   <Label Text="DEF"  HorizontalOptions="End"/>
   <Label Text="GHI"  HorizontalOptions="End" />
</Grid>

This gives me the following where DEF appears on top of GHI

ABC                              DGHIEF

Can someone give me advice on how I can achieve this layout:

ABC                              DEF GHI

Upvotes: 0

Views: 223

Answers (1)

pinedax
pinedax

Reputation: 9346

This should work:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Label Text="ABC"  HorizontalOptions="StartAndExpand"/>
    <Label Grid.Column="1" Text="DEF"  HorizontalOptions="End"/>
    <Label Grid.Column="2"  Text="GHI"  HorizontalOptions="Start" />
</Grid>

You separate the content by columns and use the Horizontal Option to place the items where you need.

Hope this helps.-

Upvotes: 2

Related Questions