2017-11-01
1924
Кроме обычных элементов типа кнопок и текстовых полей, в Xamarin Forms также имеются контейнеры, которые позволяют скомпоновать содержимое, расположить его определенным образом. Всего 4 вида: StackLayout, AbsoluteLayout, RelativeLayout и Grid
Все элементы компоновки имеют свойство Children, позволяющее задать или получить вложенные элементы.
StackLayout определяет размещение элементов в виде горизонтального или вертикального стека. Для позиционирования элементов он определяет два свойства: Orientation (определяет ориентацию стека - вертикальный или горизонтальный) и Spacing (устанавливает пространство между элементами в стеке, по умолчанию равно 6 единицам)
При этом элемент StackLayout - обычный элемент, у которого могут использоваться все стандартные свойства типа настройки цвета, отступы и т.д.
| public class MainPage: ContentPage{ public MainPage(){ Label label1 = new Label() { Text = "Первая метка" }; Label label2 = new Label() { Text = "Вторая метка" }; StackLayout stackLayout = new StackLayout() { Children = {label1, label2} }; this.Content = stackLayout; }} | public class MainPage: ContentPage{ public MainPage(){ AbsoluteLayout absoluteLayout = new AbsoluteLayout(); absoluteLayout.Children.Add( new Label { Text = "Заголовок", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) }, new Rectangle(70, 50, 150, 60) // или Point: new Point(30, 110)); Content = absoluteLayout;}} |
AbsoluteLayout позволяет задавать вложенным элементам абсолютные координаты расположения на странице и подходит больше для тех случаев, когда нам нужны элементы с точными координатами.
Для создания абсолютного позиционирования нам надо с помощью Rectangle определить прямоугольную область, которую будет занимать элемент. Если нам неизвестна точная ширина и длина элемента, то мы можем ограничиться позиций, с которой начинается элемент, в виде структуры Point.
RelativeLayout задает относительное позиционирование вложенных элементов относительно сторон контейнера или относительно других элементов.
Позиционирование и размеры элементов внутри RelativeLayout определяются с помощью ограничений. Ограничение представляет собой выражение, которое включает следующую информацию: Type (тип ограничения, который указывает, применяется ограничение относительно контейнера или других элементов), Property (свойство, которое устанавливается), Factor (значение, которое применяется к свойству), Constant (значение, которые применяется в качестве смещения) и ElementName (название элемента, к которому применяется ограничение).
Контейнер Grid располагает вложенные элементы в виде таблицы. С помощью свойств RowDefinitions и ColumnDefinitions грид создает набор строк и столбцов соответственно.
