Xamarin Center StackLayout in ScrollView

Question

Ich versuche, eine StackLayout innerhalb einer ScrollView horizontal zu zentrieren. Die StackLayout ist jedoch nicht horizontal zentriert (es ist linksbündig). Ich habe versucht, die ScrollView zu zentrieren, aber dann ist die ganze Ansicht nicht scrollbar - nur der mittlere Abschnitt ist.

<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> 

Die Zentrierung arbeitet mit 2 StackLayout Elemente verschachtelt, aber es funktioniert nicht mit dem ScrollView. Irgendwelche Ideen?

Answer 1

Sie haben ein paar Optionen, und jedes Etikett im Beispiel unten sollte zentriert angezeigt.

Der Schlüssel ist, dass das StackLayout sein Layout auf seinen Inhalt basiert. Man könnte denken, dass man das ganze StackLayout so zentrieren könnte, aber zumindest so wie der Inhalt einer ScrollView, funktioniert das nicht so. Aber Zentrieren der Kinder dieses StackLayout wird Zentrum innerhalb des Scroll:

<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> 

Die HorizontalOptions auf der äußeren StackLayout scheinen keinen Einfluss auf diese Situation zu haben, aber ich würde verwenden FillAndExpand als eine Möglichkeit, um die Absicht zu dokumentieren füllen Sie den gesamten horizontalen Bereich der ScrollView.

Answer 2

Die Art, wie StackLayout funktioniert, ist, dass es in einer Achse füllt, während der verfügbare Platz in der anderen Achse für alle untergeordneten Elemente aufgeteilt wird. Auf der "gefüllten" Achse (in diesem Fall horizontal) wird nicht automatisch skaliert, und daher führt das Zentrieren des Elements auf dieser Achse zu keinen Ergebnissen.

Sie können jedoch das gewünschte Layout mithilfe eines Rasters erreichen und möglicherweise auch andere Layoutmodelle verwenden.

Mit einem 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>