CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Ryan Payne
Ryan Payne

Reputation: 6301

How do I horizontally center a FlexLayout inside a StackLayout?

I have a FlexLayout inside of a StackLayout:

<StackLayout HorizontalOptions="Center" Padding="0,100">
    <Label
        Text="Franklin"
        HorizontalTextAlignment="Center"
        FontSize="Large" />
    <Label Text="Mostly Cloudy" HorizontalTextAlignment="Center" />
    <Label
        Text="55°"
        HorizontalTextAlignment="Center"
        FontSize="Header" />

    <!-- PLEASE CENTER ME -->
    <FlexLayout>
        <Label Text="H:55°" Margin="0,0,10,0" />
        <Label Text="L:37°" />
    </FlexLayout>

</StackLayout>

FlexLayout inside a StackLayout

How do I center the FlexLayout inside the StackLayout?

Upvotes: 2

Views: 417

Answers (2)

Ryan Payne
Ryan Payne

Reputation: 6301

Wrap the FlexLayout in an AbsoluteLayout:

<!-- This part is now centered -->
<AbsoluteLayout HorizontalOptions="CenterAndExpand">
    <FlexLayout>
        <Label Text="H:55°" Padding="5,0" />
        <Label Text="L:37°" Padding="5,0" />
    </FlexLayout>
</AbsoluteLayout>

FlexLayout centered in StackLayout

Note that I split your margin on the first label into padding between the two labels so that they would be centered inside the FlexLayout.

Upvotes: 0

Matt Dreiss
Matt Dreiss

Reputation: 91

I recommend using a StackLayout in the horizontal orientation. A StackLayout gives the more natural flow of placing the elements in the page.

<!-- This part is now centered -->
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
    <Label Text="H:55°" Padding="5,0" />
    <Label Text="L:37°" Padding="5,0" />
</StackLayout>

Upvotes: 2

Related Questions