Урок посвящен работе с контейнерами в Xamarin.Forms. Понимание этих контейнеров упростит проектирование дизайна и позволит создавать привлекательный интерфейс.
StackLayout
StackLayout располагает элементы друг под другом (по умолчанию) или друг за другом.
Отступы:
- Margin: Внешние отступы. Значение может быть одним числом (отступ со всех сторон) или четырьмя, разделенными запятыми (слева, сверху, справа, снизу). Например, Margin="20, 10" установит отступ 20 пикселей слева и справа, 10 пикселей сверху и снизу.
- Padding: Внутренние отступы.
Пример с двумя метками (Label):
<StackLayout BackgroundColor="Yellow" Margin="20, 10" Padding="5">
<Label Text="Hello" />
<Label Text="World" />
</StackLayout>Для горизонтального расположения элементов используется атрибут Orientation="Horizontal":
<StackLayout BackgroundColor="Yellow" Margin="20, 10" Padding="5" Orientation="Horizontal">
<Label Text="Hello" />
<Label Text="World" />
</StackLayout>Вложенные контейнеры
Внутри контейнера можно использовать другие контейнеры. Например, вложенный StackLayout с горизонтальной ориентацией внутри вертикального StackLayout:
<StackLayout>
<Label Text="Первый элемент" />
<StackLayout Orientation="Horizontal">
<Label Text="Hello" />
<Label Text="World" />
</StackLayout>
</StackLayout>ScrollView
ScrollView создает область прокрутки, если элементы не помещаются на экране.
Пример:
<ScrollView>
<StackLayout>
<!-- Здесь ваш существующий код -->
</StackLayout>
</ScrollView>AbsoluteLayout
AbsoluteLayout позволяет располагать объекты в абсолютных координатах, задавая отступы от краев экрана.
Пример с BoxView (квадратная область):
<AbsoluteLayout>
<BoxView BackgroundColor="Red" AbsoluteLayout.LayoutBounds="70, 150, 70, 80" />
</AbsoluteLayout>AbsoluteLayout.LayoutBounds="70, 150, 70, 80" задает отступы: 70 пикселей слева, 150 сверху, ширина 70 пикселей, высота 80 пикселей.
Frame
Frame похож на BoxView, но позволяет размещать внутри себя другие элементы. Для Frame можно задавать BackgroundColor, BorderColor и CornerRadius.
Пример:
<Frame BackgroundColor="Red" BorderColor="Blue" CornerRadius="20">
<StackLayout>
<Label Text="Текст 1" TextColor="White" />
<Label Text="Текст 2" TextColor="White" />
<BoxView BackgroundColor="Green"/>
</StackLayout>
</Frame>GridLayout (Система сеток)
GridLayout организует элементы в сетке, задавая количество столбцов и рядов.
Grid.ColumnDefinitions используется для столбцов, Grid.RowDefinitions — для рядов. * означает автоматическое определение ширины/высоты.
Пример:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView BackgroundColor="Blue" Grid.Column="0" Grid.Row="0" />
<BoxView BackgroundColor="Green" Grid.Column="1" Grid.Row="1" />
<BoxView BackgroundColor="Red" Grid.Column="2" Grid.Row="2" />
</Grid>Создается сетка 3×3, BoxView размещаются в ячейках.
Рассмотрены ключевые контейнеры Xamarin.Forms, позволяющие создавать разнообразные макеты пользовательского интерфейса. Комбинируя эти контейнеры, можно реализовать любой дизайн.