В чем разница между Xamarin.LayoutOptions формы, особенно заполнить и расширить?

короткий ответ:

Start,Center,End и Fill определение вида выравнивание в пределах своего пространства.

Expand определяет занимает ли он больше места если таковые имеются.

теория

структура LayoutOptions управление два различных поведения:

1. согласование:как вид выравнивается внутри родителя посмотреть?

   • Start: для вертикального выравнивания вид перемещается наверх. Для горизонтального выравнивания это обычно левая сторона. (Но обратите внимание, что на устройствах с настройкой языка справа налево это наоборот, т. е. выровнено по правому краю.)
   • Center: вид по центру.
   • End: обычно вид выравнивается снизу или справа. (На языках справа налево, конечно, выровнены по левому краю.)
   • Fill: это расклад немного другой. Представление растянется на весь размер родительского представления.

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

2. расширения:будет ли элемент занимать больше места, если он доступен?

   • суффикс Expand: если Родительский вид больше, чем объединенный размер всех его дочерних элементов, т. е. доступно дополнительное пространство, затем пространство пропорционально между дочерними видами с этим суффиксом. Эти дети будут "занимать "свое пространство, но не обязательно" заполнять " его. Мы рассмотрим это поведение в примере ниже.
   • нет суффикса: дети без Expand суффикс не получит дополнительного пространства, даже если доступно больше места.

   опять же, если родительский вид не больше чем его дети, суффикс расширения также не имеет никакого значения.

пример

давайте посмотрим на следующем примере, чтобы увидеть разницу между всеми восемью вариантами компоновки.

приложение содержит темно-серый StackLayout с восемью вложенными белыми кнопками, каждая из которых помечена своим вариантом вертикальной компоновки. При нажатии на одну из кнопок он назначает свой вариант вертикальной компоновки для компоновки стека. Именно такой образ мы можем легко проверить взаимодействие представлений с родителями, как с различными вариантами компоновки.

(последние несколько строк кода добавляют дополнительные желтые поля. Мы вернемся к этому вопросу.)

public static class App
{
    static readonly StackLayout stackLayout = new StackLayout {
        BackgroundColor = Color.Gray,
        VerticalOptions = LayoutOptions.Start,
        Spacing = 2,
        Padding = 2,
    };

    public static Page GetMainPage()
    {
        AddButton("Start", LayoutOptions.Start);
        AddButton("Center", LayoutOptions.Center);
        AddButton("End", LayoutOptions.End);
        AddButton("Fill", LayoutOptions.Fill);
        AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
        AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
        AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
        AddButton("FillAndExpand", LayoutOptions.FillAndExpand);

        return new NavigationPage(new ContentPage {
            Content = stackLayout,
        });
    }

    static void AddButton(string text, LayoutOptions verticalOptions)
    {
        stackLayout.Children.Add(new Button {
            Text = text,
            BackgroundColor = Color.White,
            VerticalOptions = verticalOptions,
            HeightRequest = 20,
            Command = new Command(() => {
                stackLayout.VerticalOptions = verticalOptions;
                (stackLayout.ParentView as Page).Title = "StackLayout: " + text;
            }),
        });
        stackLayout.Children.Add(new BoxView {
            HeightRequest = 1,
            Color = Color.Yellow,
        });
    }
}

следующие скриншоты показывают результат при нажатии на каждую из восьми кнопок. Мы делаем следующие замечания:

• пока родитель stackLayout плотно (не Fill страница), вариант вертикальной компоновки каждого Button ничтожна.
• опция вертикальной компоновки имеет значение только в том случае, если stackLayout больше (например, через Fill выравнивание) и отдельные кнопки имеют Expand суффиксом.
• дополнительное пространство равномерно распределено между всеми кнопками с Expand суффиксом. Чтобы увидеть это более четко, мы добавили желтые горизонтальные линии между каждыми двумя соседними кнопками.
• кнопки с большим пространством, чем их запрошенная высота, не обязательно "заполняют" его. В этом дело в том, что фактическое поведение контролируется их выравниванием. Например, они либо выровнены сверху, по центру или кнопке своего пространства, либо заполняют его полностью.
• все кнопки охватывают всю ширину макета, так как мы изменяем только VerticalOptions.

здесь вы найдете соответствующие скриншоты с высоким разрешением.