Как заставить элементы переноситься в формы Xamarin

#xamarin.forms

Вопрос:

Я пытаюсь реализовать что-то похожее на скриншот ниже (первый скриншот); т. Е. Элементы, которые переносятся, когда они достигают максимального размера, который может вместить один столбец. Этот пример был взят из этого проекта в GitHub (к сожалению, проект слишком старый, поэтому я не смог запустить его и увидеть результат).

Вдохновленный вышеупомянутым проектом, я попробовал следующее на странице содержимого:

 <ScrollView>
    <FlexLayout Direction="Row" AlignContent="Center">
        <BindableLayout.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Baboon</x:String>
                <x:String>Capuchin Monkey</x:String>
                <x:String>Blue Monkey</x:String>
                <x:String>Squirrel Monkey</x:String>
                <x:String>Golden Lion Tamarin</x:String>
                <x:String>Howler Monkey</x:String>
                <x:String>Japanese Macaque</x:String>
            </x:Array>
        </BindableLayout.ItemsSource>
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Frame WidthRequest="100" HeightRequest="100" HasShadow="False" HorizontalOptions="Start" BackgroundColor="Beige">
                    <FlexLayout>
                        <Button
                            BorderColor="#fff"
                            BorderWidth="1"
                            BackgroundColor="#4D000000"
                            HeightRequest="90"
                            CornerRadius="45"
                            Text="{Binding}" />
                    </FlexLayout>
                </Frame>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>
</ScrollView>

Однако в итоге я не получил того же результата; т. Е. Элементы не переносятся (см. Второй снимок экрана).

Как заставить элементы переноситься?

Ответ №1:

Похоже, хитрость заключается в добавлении Wrap="Wrap" в FlexLayout . Итак, это будет что-то вроде:

 <FlexLayout Direction="Row" AlignContent="Center" Wrap="Wrap">