Xamarin Center StackLayout в ScrollView

Question

Я пытаюсь горизонтально центрировать StackLayout в пределах ScrollView. Однако, StackLayout не расположен по горизонтали (выравнивается влево). Я попытался центрировать ScrollView, но тогда весь вид не прокручивается - только центральная часть.

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

Центрирование работает с 2 вложенных StackLayout элементов, но не с ScrollView. Есть идеи?

Answer 1

У вас есть несколько вариантов, и каждый ярлык в примере ниже, должны отображаться по центру.

Главное, что StackLayout основывает свой макет на своем содержании. Вы могли бы подумать, что вы можете сосредоточить весь StackLayout так, как вы это делали, но по крайней мере, как содержимое ScrollView, это не работает. Но центрирования детей этого StackLayout сконцентрируется в 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> 

В HorizontalOptions на внешней StackLayout, кажется, не имеет никакого влияния в этой ситуации, но я хотел бы использовать FillAndExpand как способ документирования Намерения заполните все горизонтальное пространство ScrollView.

Answer 2

Способ работы StackLayout заключается в том, что он заполняется одной осью, разделяя пространство, доступное на другой оси для всех дочерних элементов. Он не авторизован на «заполненной» оси (в данном случае горизонтальной), и поэтому центрирование элемента на этой оси не даст никаких результатов.

Однако вы можете достичь желаемой компоновки с использованием сетки и, возможно, с использованием других моделей макета.

Использование сетки:

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