Свойство Wrap

Свойство Wrap позволяет установить правила переноса элементов, если они не помещаются по ширине или высоте контейнера. Это свойство принимает одно из значений из перечисления FlexWrap:

• NoWrap: элементы не переносятся и ужимаются до таких размеров, достаточных для вмещения в контейнер. Это значение по умолчанию

• Wrap: элементы переносятся на новую строку (при расположении в строку) или на новый столбец при расположении в столбик

• Reverse: элементы переносятся в обратном порядке

Вначале возьмем значение по умолчанию - "NoWrap":

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutApp.MainPage">
    <ContentPage.Resources>
        <Style  x:Key="btnStyle" TargetType="Button">
            <Setter Property="WidthRequest" Value="150" />
            <Setter Property="HeightRequest" Value="100" />
        </Style>
    </ContentPage.Resources>
    <FlexLayout Direction="Row">
        <Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
    </FlexLayout>
</ContentPage>

Здесь кнопки расположены в строку. Каждая кнопка имеет ширину в 150 единиц, однако при такой ширине все кнопки могут не уместиться на экране устройства:

Из скриншота мы видим, что все элементы уместились по ширине экрана, но их ширина далеко не 150 единиц.

Такое поведение не всегда может быть желательным. Возможно, мы ожидаем, что неумещающиеся элементы будут просто переноситься дальше на следующую строку, что было бы вполне естественно. Для этого нам надо использовать значение Wrap:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutApp.MainPage">
    <ContentPage.Resources>
        <Style  x:Key="btnStyle" TargetType="Button">
            <Setter Property="WidthRequest" Value="150" />
            <Setter Property="HeightRequest" Value="100" />
        </Style>
    </ContentPage.Resources>
    <FlexLayout Direction="Row" Wrap="Wrap">
        <Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
    </FlexLayout>
</ContentPage>

В данном случае мы видим, что элементы сохраняют свою ширину и переносятся на новую строку. В итоге при ширине экрана в 400 единиц контейнер будет располагать элементы в три строки.

Подобным образом мы можем управлять переносом элементов при располжении в столбик. В этом случае элементы переносятся в новый столбец.

При альбомной ориентации устройства:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutApp.MainPage">
    <ContentPage.Resources>
        <Style  x:Key="btnStyle" TargetType="Button">
            <Setter Property="WidthRequest" Value="150" />
            <Setter Property="HeightRequest" Value="100" />
        </Style>
    </ContentPage.Resources>
    <FlexLayout Direction="Column" Wrap="Wrap">
        <Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
    </FlexLayout>
</ContentPage>