CODEWITHSUNDEEP
xamarinxamarin.forms
Hung Vuong
Hung Vuong

Reputation: 25

Align two Labels to be inline in XAML

I'm styling in Xamarin Forms. I have problem with align Vertical 2 label other size:

like this

This is my XAML code:

<StackLayout HorizontalOptions="EndAndExpand" Grid.Row="0" Grid.Column="1">
    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <Label Text="03" FontSize="42" FontAttributes="Bold" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" VerticalTextAlignment="End" />
        <Label Text="\20" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" VerticalTextAlignment="End" />
    </StackLayout>
    <Label Text="Chưa xử lý" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" />
</StackLayout>

I want "30" and "/20" are straight on bottom. How I can do it?

Resovled

Image resoved

This is my simple solution. I added Margin-bottom is "-7" and it worked.

<Label Text="03" FontSize="42" FontAttributes="Bold" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" VerticalTextAlignment="End" Margin="0,0,0,-7" />

Upvotes: 1

Views: 2187

Answers (1)

EvZ
EvZ

Reputation: 12179

While your solution is working it might be not the best, please consider the next topics:

  • Negative values in padding can introduce inconsistent side effects on different screens and platforms. It should be considered as a very dirty hack and should be avoided.
  • Performance. It seems that you overused StackLayout. Try Grid, it will reduce the amount of UI elements to render and will increase the loading time.

Good luck!

Upvotes: 3

Related Questions