Xamarin Center StackLayout within ScrollView - xaml

Question

I'm trying to horizontally center a StackLayout within a ScrollView. However, the StackLayout isn't horizontally centered (it's left aligned). I tried centering the ScrollView but then the whole view is not scrollable - only the center section is.
<ScrollView BackgroundColor="Teal">
<StackLayout Spacing="5"
Padding="30"
WidthRequest="400"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Label Text="Test"/>
<Label Text="Test"/>
<Label Text="Test"/>
<Label Text="Test"/>
</StackLayout>
</ScrollView>
The centering works with 2 nested StackLayout elements, but it doesn't with the ScrollView. Any ideas?

Answer 1

You have a couple of options, and each Label in the example below should show up centered.
The key thing is that the StackLayout bases its layout on its contents. You'd think that you could center the whole StackLayout the way you did, but at least as the content of a ScrollView, it doesn't work that way. But centering the children of that StackLayout will center within the ScrollView:
<ScrollView BackgroundColor="Teal">
<StackLayout Spacing="5"
Padding="30"
WidthRequest="400"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Label Text="Test" HorizontalOptions="Center"/>
<StackLayout HorizontalOptions="Center">
<Label Text="Test"/>
</StackLayout>
</StackLayout>
</ScrollView>
The HorizontalOptions on the outer StackLayout does not seem to have any impact in this situation, but I would use FillAndExpand as a way to document the intent to fill the entire horizontal space of the ScrollView.

Answer 2

The way that StackLayout works is that it Fills in one axis while splitting the space available in the other axis for all child elements. It does not autosize on the "filled" axis (horizontal in this case), and therefore centering the element on that axis will not produce any results.
However you can achieve the desired layout using a Grid and possibly using other layout models as well.
Using a Grid:
<ScrollView BackgroundColor="Teal">
<Grid HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Grid.Row="0" Text="Test"/>
<Label Grid.Column="1" Grid.Row="1" Text="Test"/>
<Label Grid.Column="1" Grid.Row="2" Text="Test"/>
<Label Grid.Column="1" Grid.Row="3" Text="Test"/>
<Label Grid.Column="1" Grid.Row="4" Text="Test"/>
<Label Grid.Column="1" Grid.Row="5" Text="Test"/>
<Label Grid.Column="1" Grid.Row="6" Text="Test"/>
<Label Grid.Column="1" Grid.Row="7" Text="Test"/>
<Label Grid.Column="1" Grid.Row="8" Text="Test"/>
<Label Grid.Column="1" Grid.Row="9" Text="Test"/>
<Label Grid.Column="1" Grid.Row="10" Text="Test"/>
<Label Grid.Column="1" Grid.Row="11" Text="Test"/>
<Label Grid.Column="1" Grid.Row="12" Text="Test"/>
<Label Grid.Column="1" Grid.Row="13" Text="Test"/>
<Label Grid.Column="1" Grid.Row="14" Text="Test"/>
<Label Grid.Column="1" Grid.Row="15" Text="Test"/>
<Label Grid.Column="1" Grid.Row="16" Text="Test"/>
<Label Grid.Column="1" Grid.Row="17" Text="Test"/>
<Label Grid.Column="1" Grid.Row="18" Text="Test"/>
<Label Grid.Column="1" Grid.Row="19" Text="Test"/>
<Label Grid.Column="1" Grid.Row="20" Text="Test"/>
<Label Grid.Column="1" Grid.Row="21" Text="Test"/>
<Label Grid.Column="1" Grid.Row="22" Text="Test"/>
<Label Grid.Column="1" Grid.Row="23" Text="Test"/>
<Label Grid.Column="1" Grid.Row="24" Text="Test"/>
<Label Grid.Column="1" Grid.Row="25" Text="Test"/>
<Label Grid.Column="1" Grid.Row="26" Text="Test"/>
<Label Grid.Column="1" Grid.Row="27" Text="Test"/>
<Label Grid.Column="1" Grid.Row="28" Text="Test"/>
<Label Grid.Column="1" Grid.Row="29" Text="Test"/>
<Label Grid.Column="1" Grid.Row="30" Text="Test"/>
<Label Grid.Column="1" Grid.Row="31" Text="Test"/>
<Label Grid.Column="1" Grid.Row="32" Text="Test"/>
<Label Grid.Column="1" Grid.Row="33" Text="Test"/>
<Label Grid.Column="1" Grid.Row="34" Text="Test"/>
<Label Grid.Column="1" Grid.Row="35" Text="Test"/>
<Label Grid.Column="1" Grid.Row="36" Text="Test"/>
<Label Grid.Column="1" Grid.Row="37" Text="Test"/>
<Label Grid.Column="1" Grid.Row="38" Text="Test"/>
<Label Grid.Column="1" Grid.Row="39" Text="Test"/>
</Grid>
</ScrollView>