CarouselView определяет следующие свойства, управляющие компоновкой:
ItemsLayout, типа LinearItemsLayout, задает используемый макет.
PeekAreaInsets, тип Thickness, определяет, на сколько процентов должны быть частично видны соседние элементы.
Эти свойства поддерживаются объектами BindableProperty, что означает, что свойства могут быть объектами привязки данных.
По умолчанию CarouselView отображает элементы в горизонтальной ориентации. На экране отображается один элемент, а жесты пролистывания приводят к перемещению по коллекции элементов вперед и назад. Однако возможна и вертикальная ориентация. Это связано с тем, что свойство ItemsLayout имеет тип LinearItemsLayout, который наследуется от класса ItemsLayout. Класс ItemsLayout определяет следующие свойства:
Orientation, типа ItemsLayoutOrientation, задает направление, в котором расширяется CarouselView при добавлении элементов.
SnapPointsAlignment, тип SnapPointsAlignment, определяет, как точки привязки выравниваются по элементам.
SnapPointsType, тип SnapPointsType, задает поведение точек привязки при прокрутке.
Эти свойства поддерживаются объектами BindableProperty, что означает, что свойства могут быть объектами привязки данных.
Перечисление ItemsLayoutOrientation определяет следующие члены:
Vertical указывает, что при добавлении элементов CarouselView будет расширяться по вертикали.
Horizontal указывает, что при добавлении элементов CarouselView будет расширяться по горизонтали.
Класс LinearItemsLayout наследуется от класса ItemsLayout и определяет свойство ItemSpacing типа double, которое представляет собой пустое пространство вокруг каждого элемента. По умолчанию значение этого свойства равно 0, и его значение всегда должно быть больше или равно 0. Класс LinearItemsLayout также определяет статические элементы Vertical и Horizontal. Эти элементы могут быть использованы для создания вертикальных или горизонтальных списков соответственно. В качестве альтернативы можно создать объект LinearItemsLayout, указав в качестве аргумента член перечисления ItemsLayoutOrientation.
Примечание. CarouselView использует собственные механизмы компоновки для выполнения компоновки.
Горизонтальное расположение
По умолчанию CarouselView отображает элементы горизонтально. Поэтому для использования этого макета нет необходимости устанавливать свойство ItemsLayout:
В качестве альтернативы можно установить свойство ItemsLayout для объекта LinearItemsLayout, указав в качестве значения свойства Orientation член перечисления Horizontal ItemsLayoutOrientation:
В результате макет растет по горизонтали по мере добавления новых элементов:
Вертикальная компоновка
CarouselView может отображать элементы вертикально, установив свойство ItemsLayout в объект LinearItemsLayout, указав в качестве значения свойства Orientation член перечисления Vertical ItemsLayoutOrientation:
В результате макет растет по вертикали по мере добавления новых элементов:
Частично видимые соседние элементы
По умолчанию CarouselView отображает все элементы сразу. Однако это поведение можно изменить, задав свойству PeekAreaInsets значение Thickness, которое определяет, на сколько процентов сделать соседние элементы частично видимыми. Это может быть полезно для указания пользователям на наличие дополнительных элементов. В следующем XAML показан пример установки этого свойства:
<CarouselView ItemsSource="{Binding Monkeys}"
PeekAreaInsets="100">
...
</CarouselView>
Эквивалентный код на языке C# имеет вид:
CarouselView carouselView = new CarouselView
{
...
PeekAreaInsets = new Thickness(100)
};
В результате соседние элементы оказываются частично раскрытыми на экране:
Расстояние между элементами
По умолчанию между каждым элементом в CarouselView нет промежутка. Это поведение можно изменить, установив свойство ItemSpacing для макета элементов, используемого в CarouselView.
Когда CarouselView устанавливает свойство ItemsLayout в объект LinearItemsLayout, свойство LinearItemsLayout.ItemSpacing может быть установлено в двойное значение, которое представляет собой промежуток между элементами:
Примечание. Для свойства LinearItemsLayout.ItemSpacing установлен обратный вызов проверки, который гарантирует, что значение свойства всегда больше или равно 0.
Эквивалентный код на языке C# выглядит следующим образом:
CarouselView carouselView = new CarouselView
{
...
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
ItemSpacing = 20
}
};
Этот код приводит к вертикальной компоновке, в которой расстояние между элементами составляет 20.
Динамическое изменение размеров элементов
Размер элементов в CarouselView может быть динамически изменен во время выполнения программы путем изменения свойств элементов шаблона DataTemplate, связанных с компоновкой. Например, следующий пример кода изменяет свойства HeightRequest и WidthRequest объекта Image, а также свойство HeightRequest его родительского фрейма:
Обработчик события OnImageTapped выполняется в ответ на касание объекта Image и изменяет размеры изображения (и его родительского фрейма), чтобы его было удобнее просматривать:
Расположение справа налево
CarouselView может размещать свое содержимое в направлении потока справа налево, установив для свойства FlowDirection значение RightToLeft. Однако в идеале свойство FlowDirection должно быть установлено на странице или корневом макете, что заставит все элементы внутри страницы или корневого макета реагировать на направление потока:
