Прикрепляемые свойства

Кроме ранее рассмотренных свойств FlexLayout также имеет ряд прикреляемых свойств, которые задаются для отдельных элементов внутри контейнера.

AlignSelf

Свойство AlignSelf позволяет задать для элемента выравнивание. AlignSelf переопределяет свойство AlignItems, которое устанавливается для всех элементов контейнера. В качестве значения AlignSelf принимает константу из перечисления FlexAlignSelf:

• Auto: автоматическая установка исходя из настроек контейнера, значение по умолчанию

• Stretch: растяжение по высоте строки или ширине столбца

• Center: выравнивание относительно центральной оси самого высокого элемента в строке или самого широкого элемента в столбце

• Start: выравнивание относительно верхней границы строки или левой границы столбца

• End: выравниваение относительно нижней границы самого высокого элемента в строке или правой границы относительно самого широкого элемента в столбце

<?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">
    <FlexLayout Direction="Row" Wrap="Wrap" AlignItems="Start">
        <Button BackgroundColor="SeaGreen" Text="Item 1" WidthRequest="100" HeightRequest="90" />
        <Button BackgroundColor="LightBlue" Text="Item 2" WidthRequest="100" HeightRequest="140" />
        <Button BackgroundColor="LightPink" Text="Item 3" WidthRequest="100" HeightRequest="80" FlexLayout.AlignSelf="Center" />
        <Button BackgroundColor="LightGreen" Text="Item 4" WidthRequest="100" HeightRequest="90" />
    </FlexLayout>
</ContentPage>

В данном случае для всех элементов контейнера устанавливается выравнивание по верхней границе строки. Однако для третьей кнопки устанавливается выравнивание относительно центральной оси самого высокого элемента (то есть второй кнопки).

Установка свойства в коде C# для элемента button:

FlexLayout.SetAlignSelf(button, FlexAlignSelf.Center);

Order

Свойство Order позволяет переопределить порядок следования элементов:

<?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="120" />
            <Setter Property="HeightRequest" Value="100" />
        </Style>
    </ContentPage.Resources>
    <FlexLayout Direction="Row" Wrap="Wrap" AlignItems="End">
        <Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" FlexLayout.Order="5" />
        <Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" FlexLayout.Order="6"/>
        <Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" FlexLayout.Order="4"/>
        <Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" FlexLayout.Order="3"/>
        <Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" FlexLayout.Order="2" />
        <Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" FlexLayout.Order="1" />
    </FlexLayout>
</ContentPage>

Basis

Свойство Basis определяет высоту элемента (при расположении в столбик) и ширину элемента (при расположении в строку). В качестве значения можно передать как обычное число, так и процентное значение. Например, пусть каждый элемент в строке занимает четверть ширины:

<?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">
    <FlexLayout Direction="Row" Wrap="Wrap">
        <Button BackgroundColor="SeaGreen" Text="Item 1" FlexLayout.Basis="24.99%" HeightRequest="100" />
        <Button BackgroundColor="LightBlue" Text="Item 2" FlexLayout.Basis="24.99%" HeightRequest="100" />
        <Button BackgroundColor="LightPink" Text="Item 3" FlexLayout.Basis="24.99%" HeightRequest="100" />
        <Button BackgroundColor="LightGreen" Text="Item 4" FlexLayout.Basis="24.99%" HeightRequest="100" />
    </FlexLayout>
</ContentPage>

Однако стоит отметить, что в моем случае установка 25% привела в тому, что четвертый элемент размещался на новой строке, поэтому чтобы вместить все элементы в одной строке, пришлось задать значение 24.99%. Поэтому при установке значений нужно учитывать, что результат может быть не совсем тем, что ожидался.

Также можно установить абсолютные значения:

<Button BackgroundColor="SeaGreen" Text="Item 1" FlexLayout.Basis="80" HeightRequest="100" />

Установка свойства в коде C#:

FlexLayout.SetBasis(button, new FlexBasis(40));

Установка пропорциональных значений:

FlexLayout.SetBasis(button, new FlexBasis(0.25f, true));

В данном случае для элемента button устанавливается значение 25%. Пропорциональные значения берутся из диапазона от 0 до 1, где 1 соответствует 100%. Значение true указывает, что значение из первого параметра будет рассматриваться именно как пропорциональные значения.

Grow

Свойство Grow указывает, как элемент будет растягивается по ширине контейнера (при размещении в строку) или по высоте контейнера (при размещении в столбик). Это свойство принимает числовое значение, которое представляет долю от общего пространства.

<?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">
    <FlexLayout Direction="Row">
        <Button BackgroundColor="SeaGreen" Text="Item 1" FlexLayout.Grow="1"/>
        <Button BackgroundColor="LightBlue" Text="Item 2" FlexLayout.Grow="1.5" />
        <Button BackgroundColor="LightPink" Text="Item 3" FlexLayout.Grow="1.5" />
        <Button BackgroundColor="LightGreen" Text="Item 4" FlexLayout.Grow="1" />
    </FlexLayout>
</ContentPage>

В данном случае все четыре элемента имееют совокупное значение для FlexLayout.Grow 1 + 1.5 + 1.5 + 1 = 5. Это значит, что первый и четвертый элементы получат 100 / 5 * 1 = 20% ширины контейнера, а второй и третий элементы получат 100 / 5 * 1.5 = 30% ширины контейнера.

Shrink

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

<?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">
    <FlexLayout Direction="Row">
        <Button BackgroundColor="SeaGreen" Text="Item 1" FlexLayout.Shrink="1" WidthRequest="200"/>
        <Button BackgroundColor="LightBlue" Text="Item 2" FlexLayout.Shrink="2" WidthRequest="200"/>
        <Button BackgroundColor="LightPink" Text="Item 3" FlexLayout.Shrink="2" WidthRequest="200"/>
        <Button BackgroundColor="LightGreen" Text="Item 4" FlexLayout.Shrink="1" WidthRequest="200"/>
    </FlexLayout>
</ContentPage>

Чем большее значение принимает свойство, тем больше элемент будет сжиматься. То есть в данном случае, второй и третий элементы будут сжиматься в два раза сильнее, чем первый и четвертый элемент.

При расположении в строку, как в примере выше, сжатие будет применяться к ширине элемента, а при расположении в столбик - к высоте элемента.