Поделиться через

Xamarin.Forms Прокрутка CarouselView

  • Статья

CarouselView определяет следующие свойства прокрутки:

  • HorizontalScrollBarVisibility, тип ScrollBarVisibility, который указывает, когда горизонтальная полоса прокрутки видна.
  • IsDraggingboolтип , который указывает, выполняется ли CarouselView прокрутка. Это свойство только для чтения, значение по умолчанию которого равно false.
  • IsScrollAnimatedboolтип , который указывает, будет ли анимация возникать при прокрутке CarouselView. Значение по умолчанию — true.
  • ItemsUpdatingScrollModeтип ItemsUpdatingScrollMode, представляющий поведение CarouselView прокрутки при добавлении новых элементов в него.
  • VerticalScrollBarVisibilityScrollBarVisibilityтип , который указывает, когда отображается вертикальная полоса прокрутки.

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

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

CarouselViewScrollToRequested определяет событие, которое запускается при вызове ScrollTo одного из методов. ОбъектScrollToRequestedEventArgs, сопровождающий ScrollToRequested событие, имеет множество свойств, включая IsAnimated, IndexItemи ScrollToPosition. Эти свойства задаются из аргументов, указанных в ScrollTo вызовах метода.

Кроме того, CarouselView определяет Scrolled событие, которое запускается, чтобы указать, что произошла прокрутка. Объект ItemsViewScrolledEventArgs , сопровождающий Scrolled событие, имеет множество свойств. Дополнительные сведения см. в разделе "Обнаружение прокрутки".

Когда пользователь проводит пальцем, чтобы инициировать прокрутку, можно управлять конечной позицией прокрутки, чтобы элементы были полностью отображены. Эта функция называется привязкой, так как элементы привязываются к расположению при остановке прокрутки. Дополнительные сведения см. в разделе "Точки привязки".

CarouselView также может загружать данные постепенно по мере прокрутки пользователя. Дополнительные сведения см. в разделе "Загрузка данных" постепенно.

Обнаружение прокрутки

Свойство IsDragging можно проверить, чтобы определить, выполняется ли CarouselView прокрутка элементов в данный момент.

Кроме того, определяет Scrolled событие, CarouselView которое запускается, чтобы указать, что произошла прокрутка. Это событие следует использовать при необходимости данных о прокрутке.

В следующем примере XAML показан CarouselView обработчик событий для Scrolled события:

<CarouselView Scrolled="OnCollectionViewScrolled">
    ...
</CarouselView>

Эквивалентный код на C# выглядит так:

CarouselView carouselView = new CarouselView();
carouselView.Scrolled += OnCarouselViewScrolled;

В этом примере OnCarouselViewScrolled кода обработчик событий выполняется при Scrolled срабатывании события:

void OnCarouselViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    Debug.WriteLine("HorizontalDelta: " + e.HorizontalDelta);
    Debug.WriteLine("VerticalDelta: " + e.VerticalDelta);
    Debug.WriteLine("HorizontalOffset: " + e.HorizontalOffset);
    Debug.WriteLine("VerticalOffset: " + e.VerticalOffset);
    Debug.WriteLine("FirstVisibleItemIndex: " + e.FirstVisibleItemIndex);
    Debug.WriteLine("CenterItemIndex: " + e.CenterItemIndex);
    Debug.WriteLine("LastVisibleItemIndex: " + e.LastVisibleItemIndex);
}

В этом примере OnCarouselViewScrolled обработчик событий выводит значения ItemsViewScrolledEventArgs объекта, сопровождающего событие.

Внимание

Событие Scrolled запускается для прокручиваемых пользователем прокрутк и для программных прокрутк.

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

ScrollTo Первая перегрузка метода прокручивает элемент по указанному индексу в представление. При указании CarouselView объекта с именем carouselViewв следующем примере показано, как прокрутить элемент по индексу 6 в представление:

carouselView.ScrollTo(6);

Примечание.

Событие ScrollToRequested запускается при вызове ScrollTo метода.

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

Вторая ScrollTo перегрузка метода прокручивает указанный элемент в представление. Учитывая CarouselView объект с именем carouselView, в следующем примере показано, как прокрутить элемент Обезьяны Proboscis в представление:

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
carouselView.ScrollTo(monkey);

Примечание.

Событие ScrollToRequested запускается при вызове ScrollTo метода.

Отключение анимации прокрутки

При перемещении между элементами в элементе CarouselViewотображается анимация прокрутки. Эта анимация выполняется как для прокручиваемых пользователем прокрутк, так и для программных прокрутк. IsScrollAnimated Задание свойства false для отключения анимации для обеих категорий прокрутки.

Кроме того, animate аргумент ScrollTo метода можно задать для false отключения анимации прокрутки на программных прокрутках:

carouselView.ScrollTo(monkey, animate: false);

Положение прокрутки элемента управления

При прокрутке элемента в представление точное положение элемента после завершения прокрутки можно указать с position аргументом ScrollTo методов. Этот аргумент принимает ScrollToPosition член перечисления.

MakeVisible

Элемент ScrollToPosition.MakeVisible указывает, что элемент должен быть прокручен до тех пор, пока он не отображается в представлении:

carouselView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);

Этот пример кода приводит к минимальной прокрутке, необходимой для прокрутки элемента в представление.

Примечание.

Элемент ScrollToPosition.MakeVisible используется по умолчанию, если position аргумент не указан при вызове ScrollTo метода.

Начать

Элемент ScrollToPosition.Start указывает, что элемент должен прокручиваться до начала представления:

carouselView.ScrollTo(monkey, position: ScrollToPosition.Start);

Этот пример кода приводит к прокрутке элемента до начала представления.

Центр

Элемент ScrollToPosition.Center указывает, что элемент должен быть прокручен в центр представления:

carouselViewView.ScrollTo(monkey, position: ScrollToPosition.Center);

Этот пример кода приводит к прокрутке элемента в центр представления.

Завершить

Элемент ScrollToPosition.End указывает, что элемент должен быть прокручен до конца представления:

carouselViewView.ScrollTo(monkey, position: ScrollToPosition.End);

Этот пример кода приводит к прокрутке элемента до конца представления.

Управление положением прокрутки при добавлении новых элементов

CarouselView определяет ItemsUpdatingScrollMode свойство, которое поддерживается привязываемым свойством. Это свойство получает или задает ItemsUpdatingScrollMode значение перечисления, представляющее поведение CarouselView прокрутки при добавлении в него новых элементов. Перечисление ItemsUpdatingScrollMode определяет следующие члены:

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

Значение ItemsUpdatingScrollMode свойства по умолчанию — KeepItemsInView. Поэтому при добавлении новых элементов в CarouselView первый элемент в списке будет отображаться. Чтобы убедиться, что последний элемент в списке отображается при добавлении новых элементов, задайте ItemsUpdatingScrollMode для свойства KeepLastItemInViewзначение :

<CarouselView ItemsUpdatingScrollMode="KeepLastItemInView">
    ...
</CarouselView>

Эквивалентный код на C# выглядит так:

CarouselView carouselView = new CarouselView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

Видимость полосы прокрутки

CarouselViewHorizontalScrollBarVisibility определяет и VerticalScrollBarVisibility свойства, которые поддерживаются привязываемыми свойствами. Эти свойства получают или задают ScrollBarVisibility значение перечисления, представляющее, когда отображается горизонтальная или вертикальная полоса прокрутки. Перечисление ScrollBarVisibility определяет следующие члены:

  • Default указывает поведение полосы прокрутки по умолчанию для платформы и является значением по умолчанию для HorizontalScrollBarVisibility свойств и VerticalScrollBarVisibility свойств.
  • Always указывает, что полосы прокрутки будут видимыми, даже если содержимое помещается в представление.
  • Never указывает, что полосы прокрутки не будут видимыми, даже если содержимое не помещается в представление.

Точки прикрепления

Когда пользователь проводит пальцем, чтобы инициировать прокрутку, можно управлять конечной позицией прокрутки, чтобы элементы были полностью отображены. Эта функция называется привязкой, так как элементы привязываются к расположению при остановке прокрутки и управляются следующими свойствами из ItemsLayout класса:

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

Примечание.

При снимке происходит в направлении, которое создает наименьший объем движения.

Тип точек привязки

Перечисление SnapPointsType определяет следующие члены:

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

По умолчанию CarouselViewдля свойства задано SnapPointsType.MandatorySingleзначение , SnapPointsType которое гарантирует, что прокрутка выполняет прокрутку только одного элемента одновременно.

На следующих снимках CarouselView экрана показан отключена привязка:

Снимок экрана: CarouselView без оснастки в iOS и Android

Выравнивание точек привязки

Перечисление SnapPointsAlignment определяет Startи CenterEnd элементы.

Внимание

Значение SnapPointsAlignment свойства учитывается только в том случае, если SnapPointsType для свойства задано значение Mandatory, или MandatorySingle.

Начать

Элемент SnapPointsAlignment.Start указывает, что точки привязки выровнены с передним краем элементов. В следующем примере XAML показано, как задать этот элемент перечисления:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Эквивалентный код на C# выглядит так:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

Когда пользователь проводит пальцем, чтобы инициировать прокрутку в горизонтальной прокрутке CarouselView, левый элемент будет выровнен слева от представления:

Снимок экрана: CarouselView с начальными точками оснастки в iOS и Android

Центр

Элемент SnapPointsAlignment.Center указывает, что точки привязки выровнены с центром элементов.

По умолчанию CarouselViewSnapPointsAlignment для свойства задано Centerзначение . Однако для полноты в следующем примере XAML показано, как задать этот элемент перечисления:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Эквивалентный код на C# выглядит так:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

Когда пользователь проводит пальцем, чтобы инициировать прокрутку в горизонтальной прокрутке CarouselView, центральный элемент будет выровнен по центру представления:

Снимок экрана: CarouselView с точками оснастки центра в iOS и Android

Завершить

Элемент SnapPointsAlignment.End указывает, что точки привязки выравниваются с конечным краем элементов. В следующем примере XAML показано, как задать этот элемент перечисления:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Эквивалентный код на C# выглядит так:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

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

Снимок экрана: CarouselView с конечными точками оснастки в iOS и Android