Xamarin.Forms CollectionView Scrolling

  • Article

Télécharger l’exemple Télécharger l’exemple

CollectionView définit deux ScrollTo méthodes, qui permettent de faire défiler les éléments dans l’affichage. L’une des surcharges fait défiler l’élément à l’index spécifié dans la vue, tandis que l’autre fait défiler l’élément spécifié dans la vue. Les deux surcharges ont des arguments supplémentaires qui peuvent être spécifiés pour indiquer le groupe auquel appartient l’élément, la position exacte de l’élément une fois le défilement terminé et s’il faut animer le défilement.

CollectionView définit un ScrollToRequested événement qui est déclenché quand l’une ScrollTo des méthodes est appelée. L’objet ScrollToRequestedEventArgs qui accompagne l’événement ScrollToRequested a de nombreuses propriétés, notamment IsAnimated, Index, Itemet ScrollToPosition. Ces propriétés sont définies à partir des arguments spécifiés dans les appels de ScrollTo méthode.

En outre, CollectionView définit un Scrolled événement qui est déclenché pour indiquer que le défilement s’est produit. L’objet ItemsViewScrolledEventArgs qui accompagne l’événement Scrolled a de nombreuses propriétés. Pour plus d’informations, consultez Détecter le défilement.

CollectionView définit également une ItemsUpdatingScrollMode propriété qui représente le comportement de défilement du lorsque de CollectionView nouveaux éléments y sont ajoutés. Pour plus d’informations sur cette propriété, consultez Contrôler la position de défilement lorsque de nouveaux éléments sont ajoutés.

Lorsqu’un utilisateur effectue un mouvement de balayage pour lancer un défilement, la position de fin du défilement peut être contrôlée afin que les éléments soient entièrement affichés. Cette fonctionnalité est appelée alignement, car les éléments s’alignent sur la position lorsque le défilement s’arrête. Pour plus d’informations, consultez Points d’ancrage.

CollectionView peut également charger des données de manière incrémentielle à mesure que l’utilisateur défile. Pour plus d’informations, consultez Charger des données de manière incrémentielle.

Détecter le défilement

CollectionView définit un Scrolled événement qui est déclenché pour indiquer que le défilement s’est produit. La ItemsViewScrolledEventArgs classe, qui représente l’objet qui accompagne l’événement Scrolled , définit les propriétés suivantes :

  • HorizontalDelta, de type double, représente la modification de la quantité de défilement horizontal. Il s’agit d’une valeur négative lors du défilement vers la gauche et d’une valeur positive lors du défilement vers la droite.
  • VerticalDelta, de type double, représente la modification de la quantité de défilement vertical. Il s’agit d’une valeur négative lors du défilement vers le haut et d’une valeur positive lors du défilement vers le bas.
  • HorizontalOffset, de type double, définit la quantité par laquelle la liste est décalée horizontalement par rapport à son origine.
  • VerticalOffset, de type double, définit la quantité par laquelle la liste est décalée verticalement par rapport à son origine.
  • FirstVisibleItemIndex, de type int, est l’index du premier élément visible dans la liste.
  • CenterItemIndex, de type int, est l’index de l’élément central visible dans la liste.
  • LastVisibleItemIndex, de type int, est l’index du dernier élément visible dans la liste.

L’exemple XAML suivant montre un CollectionView qui définit un gestionnaire d’événements pour l’événement Scrolled :

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

Le code C# équivalent est :

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

Dans cet exemple de code, le OnCollectionViewScrolled gestionnaire d’événements est exécuté lorsque l’événement Scrolled se déclenche :

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

Important

L’événement Scrolled est déclenché pour les défilements initiés par l’utilisateur et pour les défilements programmatiques.

Faire défiler un élément au niveau d’un index dans la vue

La première ScrollTo surcharge de méthode fait défiler l’élément à l’index spécifié dans la vue. Étant donné un CollectionView objet nommé collectionView, l’exemple suivant montre comment faire défiler l’élément à l’index 12 dans la vue :

collectionView.ScrollTo(12);

Vous pouvez également faire défiler un élément dans les données groupées en spécifiant les index d’élément et de groupe. L’exemple suivant montre comment faire défiler le troisième élément du deuxième groupe dans l’affichage :

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

Notes

L’événement ScrollToRequested est déclenché lorsque la ScrollTo méthode est appelée.

Faire défiler un élément dans l’affichage

La deuxième ScrollTo surcharge de méthode fait défiler l’élément spécifié dans l’affichage. Avec un CollectionView objet nommé collectionView, l’exemple suivant montre comment faire défiler l’élément Proboscis Monkey dans l’affichage :

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

Vous pouvez également faire défiler un élément dans les données groupées en spécifiant l’élément et le groupe. L’exemple suivant montre comment faire défiler l’élément Singe proboscis dans le groupe Monkeys dans l’affichage :

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);

Notes

L’événement ScrollToRequested est déclenché lorsque la ScrollTo méthode est appelée.

Désactiver l’animation de défilement

Une animation de défilement s’affiche lors du défilement d’un élément dans l’affichage. Toutefois, cette animation peut être désactivée en définissant l’argument animate de la méthode sur ScrollTofalse:

collectionView.ScrollTo(monkey, animate: false);

Contrôle de la position de défilement

Lors du défilement d’un élément dans l’affichage, la position exacte de l’élément une fois le défilement terminé peut être spécifiée avec l’argument position des ScrollTo méthodes. Cet argument accepte un membre d’énumération ScrollToPosition .

MakeVisible

Le ScrollToPosition.MakeVisible membre indique que l’élément doit faire défiler jusqu’à ce qu’il soit visible dans la vue :

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

Cet exemple de code entraîne le défilement minimal requis pour faire défiler l’élément dans l’affichage :

Capture d’écran d’une liste verticale CollectionView avec ScrollToPosition.MakeVisible, sur iOS et Android

Notes

Le ScrollToPosition.MakeVisible membre est utilisé par défaut si l’argument position n’est pas spécifié lors de l’appel de la ScrollTo méthode .

Démarrer

Le ScrollToPosition.Start membre indique que l’élément doit faire défiler jusqu’au début de la vue :

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

Cet exemple de code entraîne le défilement de l’élément jusqu’au début de la vue :

Capture d’écran d’une liste verticale CollectionAfficher la liste verticale avec ScrollToPosition.Start, sur iOS et Android

Center

Le ScrollToPosition.Center membre indique que l’élément doit être fait défiler jusqu’au centre de la vue :

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

Cet exemple de code entraîne le défilement de l’élément jusqu’au centre de la vue :

Capture d’écran d’une liste verticale CollectionAfficher la liste verticale avec ScrollToPosition.Center, sur iOS et Android

End

Le ScrollToPosition.End membre indique que l’élément doit faire défiler jusqu’à la fin de la vue :

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

Cet exemple de code entraîne le défilement de l’élément jusqu’à la fin de la vue :

Capture d’écran d’une liste verticale CollectionView avec ScrollToPosition.End, sur iOS et Android

Contrôler la position de défilement lors de l’ajout de nouveaux éléments

CollectionView définit une ItemsUpdatingScrollMode propriété, qui est adossée à une propriété pouvant être liée. Cette propriété obtient ou définit une valeur d’énumération ItemsUpdatingScrollMode qui représente le comportement de défilement du CollectionView lorsque de nouveaux éléments y sont ajoutés. L’énumération ItemsUpdatingScrollMode définit les membres suivants :

  • KeepItemsInView conserve le premier élément de la liste affiché lors de l’ajout de nouveaux éléments.
  • KeepScrollOffset garantit que la position de défilement actuelle est conservée lors de l’ajout de nouveaux éléments.
  • KeepLastItemInView ajuste le décalage de défilement pour que le dernier élément de la liste reste affiché lors de l’ajout de nouveaux éléments.

La valeur par défaut de la ItemsUpdatingScrollMode propriété est KeepItemsInView. Par conséquent, lorsque de nouveaux éléments sont ajoutés à un CollectionView , le premier élément de la liste reste affiché. Pour vous assurer que le dernier élément de la liste est affiché lors de l’ajout de nouveaux éléments, définissez la propriété KeepLastItemInViewsur ItemsUpdatingScrollMode :

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

Le code C# équivalent est :

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

Visibilité de la barre de défilement

CollectionView définit HorizontalScrollBarVisibility les propriétés et VerticalScrollBarVisibility , qui sont adossées à des propriétés pouvant être liées. Ces propriétés obtiennent ou définissent une valeur d’énumération ScrollBarVisibility qui représente quand la barre de défilement horizontale ou verticale est visible. L’énumération ScrollBarVisibility définit les membres suivants :

  • Default indique le comportement par défaut de la barre de défilement pour la plateforme et est la valeur par défaut des HorizontalScrollBarVisibility propriétés et VerticalScrollBarVisibility .
  • Always indique que les barres de défilement seront visibles, même lorsque le contenu est intégré à la vue.
  • Never indique que les barres de défilement ne seront pas visibles, même si le contenu ne tient pas dans la vue.

Points d’ancrage

Lorsqu’un utilisateur effectue un mouvement de balayage pour lancer un défilement, la position de fin du défilement peut être contrôlée afin que les éléments soient entièrement affichés. Cette fonctionnalité est appelée alignement, car les éléments s’alignent sur la position lorsque le défilement s’arrête, et est contrôlée par les propriétés suivantes de la ItemsLayout classe :

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données.

Notes

Lorsque l’alignement se produit, il se produit dans la direction qui produit le moins de mouvement.

Type de points d’ancrage

L’énumération SnapPointsType définit les membres suivants :

  • None indique que le défilement ne s’aligne pas sur les éléments.
  • Mandatory indique que le contenu s’aligne toujours sur le point d’ancrage le plus proche où le défilement s’arrêterait naturellement, le long du sens d’inertie.
  • MandatorySingle indique le même comportement que Mandatory, mais ne fait défiler qu’un élément à la fois.

Par défaut, la propriété a la SnapPointsTypeSnapPointsType.Nonevaleur , ce qui garantit que le défilement n’aligne pas les éléments, comme illustré dans les captures d’écran suivantes :

d’ancrage Capture d’écran d’une liste verticale CollectionView sans points d’ancrage, sur iOS et Android

Alignement des points d’ancrage

L’énumération SnapPointsAlignment définit Startles membres , Centeret End .

Important

La valeur de la SnapPointsAlignment propriété n’est respectée que lorsque la propriété a la MandatorySnapPointsType valeur ou MandatorySingle.

Démarrer

Le SnapPointsAlignment.Start membre indique que les points d’ancrage sont alignés sur le bord d’avant-plan des éléments.

Par défaut, la propriété SnapPointsAlignment a la valeur SnapPointsAlignment.Start. Toutefois, pour l’exhaustivité, l’exemple XAML suivant montre comment définir ce membre d’énumération :

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

Le code C# équivalent est :

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

Lorsqu’un utilisateur effectue un mouvement de balayage pour lancer un défilement, l’élément supérieur est aligné sur le haut de la vue :

d’ancrage de début Capture d’écran d’une liste verticale CollectionView avec des points d’ancrage de début, sur iOS et Android

Center

Le SnapPointsAlignment.Center membre indique que les points d’ancrage sont alignés sur le centre des éléments. L’exemple XAML suivant montre comment définir ce membre d’énumération :

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

Le code C# équivalent est :

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

Lorsqu’un utilisateur effectue un mouvement de balayage pour lancer un défilement, l’élément supérieur est aligné au centre en haut de la vue :

Capture d’écran d’une liste verticale CollectionView avec des points d’ancrage centraux, sur iOS et Android

End

Le SnapPointsAlignment.End membre indique que les points d’ancrage sont alignés sur le bord de fin des éléments. L’exemple XAML suivant montre comment définir ce membre d’énumération :

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

Le code C# équivalent est :

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

Lorsqu’un utilisateur effectue un mouvement de balayage pour lancer un défilement, l’élément inférieur est aligné sur le bas de la vue :

Capture d’écran d’une liste verticale CollectionView avec des points d’alignement de fin, sur iOS et Android