Xamarin.Forms Desplazamiento de CollectionView

Descargar el ejemplo

CollectionView define dos ScrollTo métodos, que desplazan los elementos a la vista. Una de las sobrecargas desplaza el elemento en el índice especificado a la vista, mientras que el otro desplaza el elemento especificado a la vista. Ambas sobrecargas tienen argumentos adicionales que se pueden especificar para indicar al grupo al que pertenece el elemento, la posición exacta del elemento una vez completado el desplazamiento y si se va a animar el desplazamiento.

CollectionView define un ScrollToRequested evento que se desencadena cuando se invoca uno de los ScrollTo métodos. El ScrollToRequestedEventArgs objeto que acompaña al ScrollToRequested evento tiene muchas propiedades, como IsAnimated, Index, Itemy ScrollToPosition. Estas propiedades se establecen a partir de los argumentos especificados en las llamadas al ScrollTo método.

Además, CollectionView define un Scrolled evento que se desencadena para indicar que se ha producido el desplazamiento. El ItemsViewScrolledEventArgs objeto que acompaña al Scrolled evento tiene muchas propiedades. Para obtener más información, consulte Detección del desplazamiento.

CollectionView también define una ItemsUpdatingScrollMode propiedad que representa el comportamiento de desplazamiento de CollectionView cuando se agregan nuevos elementos. Para obtener más información sobre esta propiedad, vea Control de la posición de desplazamiento cuando se agregan nuevos elementos.

Cuando un usuario desliza el dedo para iniciar un desplazamiento, la posición final del desplazamiento se puede controlar para que los elementos se muestren por completo. Esta característica se conoce como ajuste, ya que los elementos se ajustan a la posición cuando se detiene el desplazamiento. Para obtener más información, consulte Puntos de acoplamiento.

CollectionView también puede cargar datos de forma incremental a medida que el usuario se desplaza. Para más información, consulte Carga de datos incrementalmente.

Detección del desplazamiento

CollectionView define un Scrolled evento que se desencadena para indicar que se ha producido el desplazamiento. La ItemsViewScrolledEventArgs clase , que representa el objeto que acompaña al Scrolled evento, define las siguientes propiedades:

• HorizontalDelta, de tipo double, representa el cambio en la cantidad de desplazamiento horizontal. Se trata de un valor negativo al desplazarse hacia la izquierda y un valor positivo al desplazarse hacia la derecha.
• VerticalDelta, de tipo double, representa el cambio en la cantidad de desplazamiento vertical. Se trata de un valor negativo al desplazarse hacia arriba y un valor positivo al desplazarse hacia abajo.
• HorizontalOffset, de tipo double, define la cantidad por la que la lista se desplaza horizontalmente desde su origen.
• VerticalOffset, de tipo double, define la cantidad por la que la lista se desplaza verticalmente desde su origen.
• FirstVisibleItemIndex, de tipo int, es el índice del primer elemento que está visible en la lista.
• CenterItemIndex, de tipo int, es el índice del elemento central que está visible en la lista.
• LastVisibleItemIndex, de tipo int, es el índice del último elemento que está visible en la lista.

En el ejemplo XAML siguiente se muestra un CollectionView objeto que establece un controlador de eventos para el Scrolled evento:

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

El código de C# equivalente es el siguiente:

CollectionView collectionView = new CollectionView();
collectionView.Scrolled += OnCollectionViewScrolled;

En este ejemplo de código, el OnCollectionViewScrolled controlador de eventos se ejecuta cuando se desencadena el Scrolled evento:

void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    // Custom logic
}

Importante

El Scrolled evento se desencadena para los desplazamientos iniciados por el usuario y para los desplazamientos mediante programación.

Desplazar un elemento en un índice a la vista

La primera ScrollTo sobrecarga del método desplaza el elemento en el índice especificado en la vista. Dado un CollectionView objeto denominado collectionView, en el ejemplo siguiente se muestra cómo desplazar el elemento en el índice 12 a la vista:

collectionView.ScrollTo(12);

Como alternativa, un elemento de los datos agrupados se puede desplazar a la vista especificando los índices de elementos y grupos. En el ejemplo siguiente se muestra cómo desplazar el tercer elemento del segundo grupo a la vista:

// Items and groups are indexed from zero.
collectionView.ScrollTo(2, 1);

Nota

El ScrollToRequested evento se desencadena cuando se invoca el ScrollTo método .

Desplazar un elemento a la vista

La segunda ScrollTo sobrecarga del método desplaza el elemento especificado en la vista. Dado un CollectionView objeto denominado collectionView, en el ejemplo siguiente se muestra cómo desplazar el elemento Proboscis Monkey a la vista:

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

Como alternativa, un elemento de los datos agrupados se puede desplazar a la vista especificando el elemento y el grupo. En el ejemplo siguiente se muestra cómo desplazar el elemento Proboscis Monkey en el grupo Monkeys a la vista:

GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;
AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");
Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey, group);

Nota

El ScrollToRequested evento se desencadena cuando se invoca el ScrollTo método .

Deshabilitar la animación de desplazamiento

Se muestra una animación de desplazamiento al desplazar un elemento a la vista. Sin embargo, esta animación se puede deshabilitar estableciendo el animate argumento del ScrollTo método en false:

collectionView.ScrollTo(monkey, animate: false);

Posición de desplazamiento del control

Al desplazarse por un elemento a la vista, se puede especificar la posición exacta del elemento una vez completado el desplazamiento con el position argumento de los ScrollTo métodos. Este argumento acepta un ScrollToPosition miembro de enumeración.

MakeVisible

El ScrollToPosition.MakeVisible miembro indica que el elemento debe desplazarse hasta que esté visible en la vista:

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

Este código de ejemplo da como resultado el desplazamiento mínimo necesario para desplazar el elemento a la vista:

Nota

El ScrollToPosition.MakeVisible miembro se usa de forma predeterminada, si el position argumento no se especifica al llamar al ScrollTo método .

Inicio

El ScrollToPosition.Start miembro indica que el elemento debe desplazarse hasta el inicio de la vista:

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

Este código de ejemplo da como resultado que el elemento se desplaza hasta el inicio de la vista:

Center

El ScrollToPosition.Center miembro indica que el elemento debe desplazarse al centro de la vista:

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

Este código de ejemplo da como resultado que el elemento se desplaza al centro de la vista:

End

El ScrollToPosition.End miembro indica que el elemento debe desplazarse al final de la vista:

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

Este código de ejemplo da como resultado que el elemento se desplaza hasta el final de la vista:

Posición de desplazamiento de control cuando se agregan nuevos elementos

CollectionView define una ItemsUpdatingScrollMode propiedad, respaldada por una propiedad enlazable. Esta propiedad obtiene o establece un ItemsUpdatingScrollMode valor de enumeración que representa el comportamiento de desplazamiento de CollectionView cuando se agregan nuevos elementos. La enumeración ItemsUpdatingScrollMode define los miembros siguientes:

• KeepItemsInView mantiene el primer elemento de la lista mostrado cuando se agregan nuevos elementos.
• KeepScrollOffset garantiza que la posición de desplazamiento actual se mantiene cuando se agregan nuevos elementos.
• KeepLastItemInView ajusta el desplazamiento de desplazamiento para mantener el último elemento de la lista mostrado cuando se agregan nuevos elementos.

El valor predeterminado de la ItemsUpdatingScrollMode propiedad es KeepItemsInView. Por lo tanto, cuando se agreguen nuevos elementos a un CollectionView primer elemento de la lista permanecerán mostrados. Para asegurarse de que el último elemento de la lista se muestra cuando se agregan nuevos elementos, establezca la ItemsUpdatingScrollMode propiedad KeepLastItemInViewen :

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

El código de C# equivalente es el siguiente:

CollectionView collectionView = new CollectionView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

Visibilidad de la barra de desplazamiento

CollectionViewdefine y VerticalScrollBarVisibility las propiedades, respaldadas HorizontalScrollBarVisibility por propiedades enlazables. Estas propiedades obtienen o establecen un ScrollBarVisibility valor de enumeración que representa cuando la barra de desplazamiento horizontal o vertical está visible. La enumeración ScrollBarVisibility define los miembros siguientes:

• Default indica el comportamiento predeterminado de la barra de desplazamiento para la plataforma y es el valor predeterminado de las HorizontalScrollBarVisibility propiedades y VerticalScrollBarVisibility .
• Always indica que las barras de desplazamiento estarán visibles, incluso cuando el contenido se ajuste a la vista.
• Never indica que las barras de desplazamiento no estarán visibles, incluso si el contenido no cabe en la vista.

Puntos de acoplamiento

Cuando un usuario desliza el dedo para iniciar un desplazamiento, la posición final del desplazamiento se puede controlar para que los elementos se muestren por completo. Esta característica se conoce como ajuste, porque los elementos se ajustan a la posición cuando se detiene el desplazamiento y se controla mediante las siguientes propiedades de la ItemsLayout clase :

• SnapPointsType, de tipo SnapPointsType, especifica el comportamiento de los puntos de acoplamiento al desplazarse.
• SnapPointsAlignment, de tipo SnapPointsAlignment, especifica cómo se alinean los puntos de acoplamiento con los elementos.

Estas propiedades están respaldadas por BindableProperty objetos, lo que significa que las propiedades pueden ser destinos de enlaces de datos.

Nota:

Cuando se produce el ajuste, se producirá en la dirección que produce la menor cantidad de movimiento.

Tipo de puntos de acoplamiento

La enumeración SnapPointsType define los miembros siguientes:

• None indica que el desplazamiento no se ajusta a los elementos.
• Mandatory indica que el contenido siempre se ajusta al punto de acoplamiento más cercano a donde el desplazamiento se detendría naturalmente, a lo largo de la dirección de la inercia.
• MandatorySingle indica el mismo comportamiento que Mandatory, pero solo se desplaza un elemento a la vez.

De forma predeterminada, la SnapPointsType propiedad se establece SnapPointsType.Noneen , lo que garantiza que el desplazamiento no ajusta los elementos, como se muestra en las capturas de pantalla siguientes:

Alineación de puntos de acoplamiento

La SnapPointsAlignment enumeración define los Startmiembros , Centery End .

Importante

El valor de la SnapPointsAlignment propiedad solo se respeta cuando la SnapPointsType propiedad se establece Mandatoryen o MandatorySingle.

Inicio

El SnapPointsAlignment.Start miembro indica que los puntos de acoplamiento están alineados con el borde inicial de los elementos.

De forma predeterminada, la propiedad SnapPointsAlignment se establece en SnapPointsAlignment.Start. Sin embargo, por integridad, en el ejemplo XAML siguiente se muestra cómo establecer este miembro de enumeración:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

El código de C# equivalente es el siguiente:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

Cuando un usuario desliza el dedo para iniciar un desplazamiento, el elemento superior se alineará con la parte superior de la vista:

Center

El SnapPointsAlignment.Center miembro indica que los puntos de acoplamiento están alineados con el centro de elementos. En el ejemplo XAML siguiente se muestra cómo establecer este miembro de enumeración:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

El código de C# equivalente es el siguiente:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

Cuando un usuario desliza el dedo para iniciar un desplazamiento, el elemento superior se alineará en la parte superior de la vista:

End

El SnapPointsAlignment.End miembro indica que los puntos de acoplamiento están alineados con el borde final de los elementos. En el ejemplo XAML siguiente se muestra cómo establecer este miembro de enumeración:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

El código de C# equivalente es el siguiente:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

Cuando un usuario desliza el dedo para iniciar un desplazamiento, el elemento inferior se alineará con la parte inferior de la vista:

Vínculos relacionados

• CollectionView (ejemplo)