Xamarin.Forms Desplazamiento de CollectionView

Descarga del 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 la otra desplaza el elemento especificado a la vista. Ambas sobrecargas tienen argumentos adicionales que se pueden especificar para indicar el 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 objeto que acompaña al evento tiene muchas propiedades, como ScrollToRequestedEventArgs , ScrollToRequested , y IsAnimatedIndexItemScrollToPosition . Estas propiedades se establecen a partir de los argumentos especificados en las llamadas ScrollTo al método .

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

CollectionView también define una propiedad que representa el comportamiento de desplazamiento de cuando se le agregan ItemsUpdatingScrollModeCollectionView 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, se puede controlar la posición final del desplazamiento para que los elementos se muestren por completo. Esta característica se conoce como ajuste, porque los elementos se alinean para colocarse cuando se detiene el desplazamiento. Para obtener más información, vea Puntos de instantánea.

CollectionView también puede cargar datos incrementalmente a medida que el usuario se desplaza. Para obtener más información, vea Cargar 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 a la izquierda y un valor positivo al desplazarse a 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 , define la cantidad por la que la lista se desplaza double horizontalmente desde su origen.
• VerticalOffset, de tipo , define la cantidad por la que la lista se desplaza double 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 CollectionView muestra un objeto que establece un controlador de eventos para el evento Scrolled :

<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, OnCollectionViewScrolled el controlador de eventos se ejecuta cuando se produce el evento Scrolled :

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

Desplazamiento de un elemento en un índice a la vista

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

collectionView.ScrollTo(12);

Como alternativa, un elemento de datos agrupados se puede desplazar hasta la vista especificando los índices de elemento y grupo. 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);

Desplazamiento de un elemento a la vista

La segunda ScrollTo sobrecarga del método desplaza el elemento especificado a la vista. Dado un CollectionView objeto denominado , en el ejemplo siguiente se muestra cómo desplazar el elemento collectionView 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 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 del grupo Monos 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);

Deshabilitación de 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 animate el argumento del método en ScrollTofalse :

collectionView.ScrollTo(monkey, animate: false);

Control de la posición de desplazamiento

Al desplazar un elemento a la vista, la posición exacta del elemento una vez completado el desplazamiento se puede especificar con el position argumento de los ScrollTo métodos . Este argumento acepta un miembro ScrollToPosition 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:

Screenshot

Inicio

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

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

Este código de ejemplo da lugar a que el elemento se desplace hasta el inicio de la vista:

Screenshot

Center

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

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

Este código de ejemplo da como resultado el desplazamiento del elemento al centro de la vista:

Screenshot

End

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

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

Este código de ejemplo da lugar a que el elemento se desplace hasta el final de la vista:

Screenshot

Controlar la posición de desplazamiento cuando se agregan nuevos elementos

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

• KeepItemsInView mantiene el primer elemento de la lista que se muestra 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 agregan nuevos elementos a un primer elemento de la lista CollectionView permanecerán mostrados. Para asegurarse de que se muestra el último elemento de la lista cuando se agregan nuevos elementos, establezca la ItemsUpdatingScrollMode propiedad en KeepLastItemInView :

<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

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

• Default indica el comportamiento predeterminado de la barra de desplazamiento de la plataforma y es el valor predeterminado de las HorizontalScrollBarVisibility propiedades VerticalScrollBarVisibility y .
• 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, se puede controlar la posición final del desplazamiento para que los elementos se muestren por completo. Esta característica se conoce como ajuste, porque los elementos se alinean para colocarse cuando se detiene el desplazamiento y se controla mediante las siguientes propiedades de la ItemsLayout clase :

• _ItemsLayout_SnapPointsType" data-linktype="absolute-path">, de tipo , especifica el comportamiento de los puntos de instantánea SnapPointsTypeSnapPointsType al desplazarse.
• Xamarin_Forms _ItemsLayout_SnapPointsAlignment" data-linktype="absolute-path">, de tipo , especifica cómo se alinean los puntos de ajuste SnapPointsAlignment con los SnapPointsAlignment elementos.

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

Tipo de puntos de ajuste

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 ajuste más cercano al lugar donde el desplazamiento se detendrá de forma natural, en la dirección de la inercia.
• MandatorySingle indica el mismo comportamiento que Mandatory , pero solo desplaza un elemento a la vez.

De forma predeterminada, la propiedad Xamarin_Forms _ItemsLayout_SnapPointsType" data-linktype="absolute-path">se establece en , lo que garantiza que el desplazamiento no ajuste los elementos, como se muestra en las capturas de pantalla SnapPointsTypeSnapPointsType.None siguientes:

instantánea Captura de pantalla de una lista vertical collectionView sin puntos de instantánea, eny Android

Alineación de puntos de ajuste

La SnapPointsAlignment enumeración define Start los miembros , y CenterEnd .

Inicio

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

De forma predeterminada, Xamarin_Forms _ItemsLayout_SnapPointsAlignment" data-linktype="absolute-path">SnapPointsAlignment propiedad está establecida en SnapPointsAlignment.Start . Sin embargo, para que sea completo, 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:

Screenshot of a

Center

El SnapPointsAlignment.Center miembro indica que los puntos de ajuste están alineados con el centro 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="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:

con puntos de instantánea central Captura de pantalla de una lista vertical collectionView con puntos de instantánea central, eny Android con puntos de instantánea central

End

El SnapPointsAlignment.End miembro indica que los puntos de ajuste 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:

Screenshot of a

Vínculos relacionados

• CollectionView (ejemplo)