Xamarin StackLayout Horizontal and Vertical

Question

<StackLayout>
    <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Hello"/>
    <Slider/> 
 </StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" >
   <Label Text="Hello" />
    <Slider />
</StackLayout>

Output of above two codes are same can anyone explain the differece between specifying the vertical and horizontal options to stacklayout vs defining these properties at label ?

HorizontalOptions and VerticalOptions determine how an element is positioned within it's parent container — Jason, Sep 13 '21 at 11:38
So how does label is positioned in center in both of the above cases . I think in second case stacklayout have these properties so how does label get centred. — Pulkit Sharma, Sep 13 '21 at 14:26
it you want the Label centered within it's parent you place the properties on the Label — Jason, Sep 13 '21 at 14:28
But the output of both the cases are same. After setting up the horizontal and vertical options property in stacklayout label also get centers. — Pulkit Sharma, Sep 13 '21 at 14:30
most likely because the parent container is not large enough for the alignment to matter. By default a StackLayout will only be as big as needed to contain it's children. If you want the StackLayout to fill it's own parent, you need to use "FillAndExpand". The options are very well documented - https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options — Jason, Sep 13 '21 at 14:36

score 5 · Accepted Answer · answered Sep 14 '21 at 06:30

As jason mentioned , LayoutOptions only apply to the view/layout ,relative to its parent .

In your case HorizontalOptions="Center" works for the Label and StackLayout , it is totally different .

For the first scenario , Label locates in center of the outer stacklayout .

For the second scenario, StackLayout locates in center of the outer layout(here I use StackLayout for test).

Please check the following screenshot to clarify the differences.

Xamarin StackLayout Horizontal and Vertical

1 Answers1