Xamarin. Макеты - layouts

Это видео - часть бесплатного обучения в Xamarin University. Чтобы просмотреть весь курс, посетите https://university.xamarin.com/.

Виды макетов

StackLayout

Вертикальная разметка

	var layout = new StackLayour {
	Orientation = StackOrientation.Vertical
	};
	layout.Children.Add(new Label { Text = "Enter your name:"});
	layout.Children.Add(new Entry());
	layout.Children.Add(new Button { Text = "ОК"} );

view raw VerticalStackLayout.cs hosted with ❤ by GitHub

Горизонтальная разметка

	new StackLayout{
	Spacing = 0,
	Orientation = StackOrientation.Horizontal,
	Children = {
	new Label {
	HorizontalOpions = LayoutOptions.CenterAndExpand
	},
	new Label {
	Text = "horizontal.",
	},
	}
	}

view raw HorizontalStackLayout.cs hosted with ❤ by GitHub

AbsoluteLayout

Дочерние элементы позиционируются относительно левого верхнего угла экрана.

	var layout = new AbsoluteLayout();
	...
	//Ставит абсолютную позицию по координатной точке
	layout.Children.Add(label1, new Point(100, 100));
	//Или использует конкретую ограничительную рамку
	layout.Children.Add(label2, new Rectangle(20, 20, 100, 25));

view raw AbsoluteLayout.cs hosted with ❤ by GitHub

RelativeLayout

Использует зависимость от значений родительского компонента.

	<BoxView Color="Green" WidthRequest="50" HeightRequest="50">
	RelativeLayout.XConstraint =
	"{ConstraintExpression Type=RelativeToParent,
	Property=Width,
	Factor=0.5,
	Constant = -100}"
	RelativeLayout.YConstraint =
	"{ConstraintExpression Type=RelativeToParent,
	Property=Height,
	Factor=0.5,
	Constant = -100}"

view raw RelativeLayout.xaml hosted with ❤ by GitHub

Grid

Представляет собой табличный макет.

	Label label = new Label { Text = "Enter Your Name" };
	Grid layout = new Grid();
	layout.Children.Add(label);
	//Используем статические методы Grid для установки позиции в таблице(сетке)
	Grid.SetColumn(label, 1);
	Grid.SetRow(label, 1);
	Grid.SetColumnSpan(label, 2);
	Grid.SetRowSpan(label, 1);

view raw GridLayout.cs hosted with ❤ by GitHub

ScrollView

Представляет собой прокручиваемый контейнер.

	var stack = new StackLayout();
	var label = new Label {...};
	var button = new Button {...};
	var box = new BoxView {...};
	stack.AddChildren.Add(label);
	stack.AddChildren.Add(button);
	stack.AddChildren.Add(box);
	...
	var scroll = new ScrollView { Content = stack };

view raw ScrollView.cs hosted with ❤ by GitHub

Длина и ширина

Свойства Height и Width вернут высоту и ширину соответственно. Они могут быть 0 до тех пор, пока вид не будет размещен и не отображен на экране. Помните, что высота и ширина не могут быть установлены напрямую, для этого используем HeightRequest и WidthRequest соответственно. Непосредственные длина и ширина определяются свойствами WidthRequest и HeightRequest соответственно.

	var Button = new Button();
	button.WidthRequest = 300;
	button.HeightRequest = 150;

view raw ReqestProperty.cs hosted with ❤ by GitHub

Отступ c внешней стороны

Отступ c внешней стороны определяется свойством Margin.

	Label label = ...
	Button button = ...
	label.Marin = new Thickness(10);
	button.Margin = new new Thickness(10, 20);

view raw Margin.cs hosted with ❤ by GitHub

Отступ c внутренней стороны

Отступ c внутренней стороны контейнера определяется свойством Padding.

	Grid grid = ...;
	grid.Padding = new Thickness(10);

view raw Padding.cs hosted with ❤ by GitHub

Отступ между элементами в контейнере

Отступ между элементами в контейнере StackLayout определяется свойством Spacing.

	StackLayout panel = ...;
	panel.Spacing = 20; //отступ между элементами со всех сторон

view raw Spacing.cs hosted with ❤ by GitHub

Существует и RowSpacing и ColSpacing для определения отступов в GridView.