Выравнивание строк и столбцов. AlignContent

Свойство AlignContent управляет выравниванием элементов. Это свойство в качестве значения принимает одну из констант из перечисления FlexAlignContent:

• Stretch: элементы растягиваются по всему пространству контейнера, значение по умолчанию

• Center: элементы позиционируются по центру контейнера

• Start: элементы располагаются в начале контейнера. Понятие "начало" зависит от направления элементов: при расположении в строку элементы прижимаются к верху, а при расположении в столбик элементы прижимаются к левому краю контейнера

• End: элементы располагаются в конце контейнера: при расположении в строку элементы прижимаются к низу, а при расположении в столбик элементы - к правому краю контейнера

• SpaceAround: устанавливает отступы между строками и верхней и нижней границей контейнера (при расположении в строку) и между столбцами и правой и левой границами контейнера (при расположении в столбик)

• SpaceBetween: устанавливает равномерные отступы между строками (при расположении в строку) и или между столбцами (при расположении в столбик)

• SpaceEvenly: устанавливает равномерные отступы между строками (при расположении в строку) и или между столбцами (при расположении в столбик) и между границами контейнера

Stretch

Например, возьмем код из прошлой темы:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutApp"
             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>

По умолчанию AlignContent имеет значение Stretch, поэтому строки с элементами (при расположении строку) растягиваются по всей высоте контейнера. И мы можем увидить незаполненные протранства между элементами сверху и снизу.

Start и End

Теперь применим значение Start:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutApp"
             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" AlignContent="Start">
        <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>

Теперь элементы прижимаются к верхней границе контейнера:

Соответственно если использовать значение End, то при расположении в строку элементы будут примыкать к низу контейнера

<FlexLayout Direction="Row" Wrap="Wrap" AlignContent="End">
	<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>

При расположении в столбик значения Start и End представляют соответственно выравнивание элементов к левой и правой границе контейнера. Например, расположим элементы вдоль левой границы:

<FlexLayout Direction="Column" Wrap="Wrap" AlignContent="Start">
	<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>

Center

При значении Center элементы располагаются по центру по вертикали или по горизнтали в зависимости от направления элементов:

<FlexLayout Direction="Column" Wrap="Wrap" AlignContent="Center">
	<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}" />
</FlexLayout>

Стоит отметить, что в этом случае также действует установка Wrap="Wrap".

SpaceAround

SpaceAround устанавливает равномерные отступы от границ контейнера до элементов. При расположении в строку отступы устанавливаются от верхней и нижней границы контейнера до строк. При расположении в столбик отступы устанавливаются от левой и правой границ контейнера до столбцов.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutApp"
             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" AlignContent="SpaceAround">
        <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>

SpaceBetween

Значение SpaceBetween устанавливает равномерные отступы между строками (при расположении в строку) и между столбцами (при расположении в столбик). При этом элементы прижимаются к границам контейнера: при расположении в строку первая строка прижимается к верхней границе, а последняя строка - к нижней границе; при расположении в столбик первый столбец прижимается к левой границе, а последний столбец - к правой границе.

<FlexLayout Direction="Row" Wrap="Wrap" AlignContent="SpaceBetween">
	<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>

Если FlexLayout содержит одну строку или один столбец, то они просто прижимаются к границе контейнера.

SpaceEvenly

Значение SpaceEvenly устанавливает равномерные отступы между строками (при расположении в строку) и между столбцами (при расположении в столбик). Но в отличие от SpaceBetween в данном случае элементы не прижимаются к границам контейнера. Между границами контейнера и строками и столбцами также устанавливаются равномерные отступы:

<FlexLayout Direction="Row" Wrap="Wrap" AlignContent="SpaceEvenly">
	<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>

Если FlexLayout содержит одну строку или один столбец, то они размещаются по центру контейнера.