Переполнение текста на следующей строке в сетке

Question

У меня есть сетка, где я определил высоту как 50, а затем отображаю группу меток, привязанных к списку. Как я могу переполнить метки от строки к строке вместо того, что происходит сейчас, когда метки сжимаются вертикально?

publi c List LabelList {get; набор; } = новый список {"Кошка", "Собака", "Лиса", "Леопард", "Медведь", "Обезьяна", "Лев", "Бизон", "Альпака", "Овца", "Муравей", " Лиса "," Тигр "," Слон "," Мышь "," Орел "," Койот "};

<Grid.RowDefinitions>
    <RowDefinition Height="20" />
    <RowDefinition Height="50" />
    <RowDefinition Height="20" />
</Grid.RowDefinitions>


<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />

<StackLayout
    Grid.Row="1"
    BackgroundColor="Beige"
    BindableLayout.ItemsSource="{Binding LabelList}"
    Orientation="Horizontal">

    <Label
        Padding="2"
        BackgroundColor="Blue"
        FontSize="Large"
        Text="{Binding}" />
</StackLayout>


<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />

Что происходит сейчас:

Чего я хочу достичь (это фотоделал):

Answer 1

Мне пришлось использовать FlexLayout вместо StackLayout

    <FlexLayout
        Grid.Row="1"
        BackgroundColor="Beige"
        BindableLayout.ItemsSource="{Binding LabelList}"
        Wrap="Wrap">

        <Label
            Padding="2"
            BackgroundColor="Blue"
            FontSize="Large"
            HorizontalOptions="StartAndExpand"
            Text="{Binding}" />
    </FlexLayout>

Answer 2

Если вы хотите отобразить пользовательский интерфейс как на скриншоте, вы можете посмотреть следующий код:

 <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="50" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>


        <StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
        <StackLayout
            Grid.Row="1"
            BackgroundColor="Beige"
            BindableLayout.ItemsSource="{Binding LabelList}"
            Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding}" />
                    </Grid>

                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>


        <StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />

Answer 3

Вы пробовали что-то вроде?:

<StackLayout
    Grid.Row="1"
    BackgroundColor="Beige"
    BindableLayout.ItemsSource="{Binding LabelList}"
    Orientation="Horizontal">

    <Label
        Padding="2"
        BackgroundColor="Blue"
        FontSize="Large"
        HorizontalOptions="StartAndExpand"
        Text="{Binding}" />
</StackLayout>

Из того, что я понял, вы не установили LayoutOptions для ярлыков, которые вы пытаетесь сложить. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout