Ajouter des modules de reconnaissance des mouvements de glisser-déplacer

Article
04/14/2021

Un mouvement de glisser-déplacer permet aux éléments et à leurs packages de données associés d’être déplacés d’un emplacement à l’écran vers un autre emplacement à l’aide d’un mouvement continu. Le glisser-déplacer peut se produire dans une application unique, ou il peut démarrer dans une application et se terminer par un autre.

Important

La reconnaissance des mouvements de glisser-déplacer est prise en charge sur iOS, Android et le plateforme Windows universelle (UWP). Toutefois, sur iOS, une plateforme minimale d’iOS 11 est requise.

La source de glissement, qui est l’élément sur lequel le mouvement de glisser est lancé, peut fournir des données à transférer en remplissant un objet de package de données. Lorsque la source de glissement est libérée, la suppression se produit. Cible de déplacement, qui est l’élément sous la source de glisser, puis traite le package de données.

Le processus d’activation du glisser-déplacer dans une application est le suivant :

Activez le glisser sur un élément en ajoutant un DragGestureRecognizer objet à sa GestureRecognizers collection. Pour plus d’informations, consultez Activer le glisser.
[facultatif] Générez un package de données. Xamarin.Forms remplit automatiquement le package de données pour les contrôles image et texte, mais pour d’autres contenus, vous devez construire votre propre package de données. Pour plus d’informations, consultez Générer un package de données.
Activez la suppression sur un élément en ajoutant une collection d’objets DropGestureRecognizerGestureRecognizers . Pour plus d’informations, consultez Activer la suppression.
[facultatif] Gérez l’événement DropGestureRecognizer.DragOver pour indiquer le type d’opération autorisé par la cible de suppression. Pour plus d’informations, consultez Gérer l’événement DragOver.
[facultatif] Traitez le package de données pour recevoir le contenu supprimé. Xamarin.Forms récupère automatiquement les données d’image et de texte du package de données, mais pour d’autres contenus, vous devez traiter le package de données. Pour plus d’informations, consultez Traiter le package de données.

Remarque

Le fait de faire glisser des éléments vers et depuis un élément CollectionView n’est actuellement pas pris en charge.

Activer le glisser

Dans Xamarin.Forms, la reconnaissance des mouvements de glisser est fournie par la DragGestureRecognizer classe. Cette classe définit les propriétés suivantes :

CanDrag, de type bool, qui indique si l’élément auquel le module de reconnaissance de mouvement est attaché peut être une source de glissement. La valeur par défaut de cette propriété est true.
DragStartingCommand, de type ICommand, qui est exécuté lorsqu’un mouvement de glisser est reconnu pour la première fois.
DragStartingCommandParameter, de type object : paramètre passé à la commande DragStartingCommand.
DropCompletedCommand, de type ICommand, qui est exécuté lorsque la source de glisser est supprimée.
DropCompletedCommandParameter, de type object : paramètre passé à la commande DropCompletedCommand.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

La DragGestureRecognizer classe définit DragStarting également et DropCompleted les événements qui se déclenchent à condition que la CanDrag propriété soit true. Lorsqu’un objet détecte un DragGestureRecognizer mouvement de glissement, il exécute l’événement DragStartingCommand et appelle l’événement DragStarting . Ensuite, lorsque l’objet DragGestureRecognizer détecte l’achèvement d’un mouvement de suppression, il exécute l’événement DropCompletedCommand et appelle l’événement DropCompleted .

L’objet DragStartingEventArgs qui accompagne l’événement DragStarting définit les propriétés suivantes :

Handled, de type bool, indique si le gestionnaire d’événements a géré l’événement ou s’il Xamarin.Forms doit continuer son propre traitement.
Cancel, de type bool, indique si l’événement doit être annulé.
Data, de type DataPackage, indique le package de données qui accompagne la source de glissement. Il s’agit d’une propriété en lecture seule.

L’exemple XAML suivant montre un DragGestureRecognizer élément attaché à un Image:

<Image Source="monkeyface.png">
    <Image.GestureRecognizers>
        <DragGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

Dans cet exemple, un mouvement de glisser peut être lancé sur le Image.

Conseil

Sur iOS, Android et UWP, un mouvement de glisser est lancé avec une longue pression suivie d’un glisser.

Créer un package de données

Xamarin.Forms génère automatiquement un package de données pour vous, lorsqu’un glisser-déplacer est lancé, pour les contrôles suivants :

Contrôles de texte. Les valeurs de texte peuvent être déplacées à partir de CheckBox, , EntryEditorDatePicker, Label, , RadioButton, et SwitchTimePicker objets.
Contrôles d’image. Les images peuvent être déplacées depuis Button, Imageet ImageButton les contrôles.

Le tableau suivant présente les propriétés lues et toute conversion tentée lorsqu’un glisser est lancé sur un contrôle de texte :

Control	Propriété	Conversion
`CheckBox`	`IsChecked`	`bool` converti en `string`.
`DatePicker`	`Date`	`DateTime` converti en `string`.
`Editor`	`Text`
`Entry`	`Text`
`Label`	`Text`
`RadioButton`	`IsChecked`	`bool` converti en `string`.
`Switch`	`IsToggled`	`bool` converti en `string`.
`TimePicker`	`Time`	`TimeSpan` converti en `string`.

Pour le contenu autre que du texte et des images, vous devez créer vous-même un package de données.

Les packages de données sont représentés par la DataPackage classe, qui définit les propriétés suivantes :

Properties, de type DataPackagePropertySet, qui est une collection de propriétés qui composent les données contenues dans le DataPackage. Cette propriété est une propriété en lecture seule.
Image, de type ImageSource, qui est l’image contenue dans le DataPackage.
Text, de type string, qui est le texte contenu dans le DataPackage.
View, de type DataPackageView, qui est une version en lecture seule du DataPackage.

La DataPackagePropertySet classe représente un conteneur de propriétés stocké en tant que Dictionary<string,object>. Pour plus d’informations sur la DataPackageView classe, consultez Traiter le package de données.

Stocker des données d’image ou de texte

Les données d’image ou de texte peuvent être associées à une source de glissement en stockant les données dans la ou DataPackage.Text la DataPackage.Image propriété. Cette opération peut être effectuée dans le gestionnaire de l’événement DragStarting .

L’exemple XAML suivant montre un DragGestureRecognizer gestionnaire qui inscrit un gestionnaire pour l’événement DragStarting :

<Path Stroke="Black"
      StrokeThickness="4">
    <Path.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Path.GestureRecognizers>
    <Path.Data>
        <!-- PathGeometry goes here -->
    </Path.Data>
</Path>

Dans cet exemple, l’objet DragGestureRecognizer est attaché à un Path objet. L’événement DragStarting est déclenché lorsqu’un mouvement de glisser est détecté sur le Path, qui exécute le OnDragStarting gestionnaire d’événements :

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    e.Data.Text = "My text data goes here";
}

L’objet DragStartingEventArgs qui accompagne l’événement DragStarting a une Data propriété, de type DataPackage. Dans cet exemple, la Text propriété de l’objet DataPackage est définie sur un string. Vous DataPackage pouvez ensuite accéder à la liste déroulante pour récupérer le string.

Stocker des données dans le conteneur de propriétés

Toutes les données, y compris les images et le texte, peuvent être associées à une source de glissement en stockant les données dans la DataPackage.Properties collection. Cette opération peut être effectuée dans le gestionnaire de l’événement DragStarting .

L’exemple XAML suivant montre un DragGestureRecognizer gestionnaire qui inscrit un gestionnaire pour l’événement DragStarting :

<Rectangle Stroke="Red"
           Fill="DarkBlue"
           StrokeThickness="4"
           HeightRequest="200"
           WidthRequest="200">
    <Rectangle.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Rectangle.GestureRecognizers>
</Rectangle>

Dans cet exemple, l’objet DragGestureRecognizer est attaché à un Rectangle objet. L’événement DragStarting est déclenché lorsqu’un mouvement de glisser est détecté sur le Rectangle, qui exécute le OnDragStarting gestionnaire d’événements :

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    Shape shape = (sender as Element).Parent as Shape;
    e.Data.Properties.Add("Square", new Square(shape.Width, shape.Height));
}

L’objet DragStartingEventArgs qui accompagne l’événement DragStarting a une Data propriété, de type DataPackage. La Properties collection de l’objet DataPackage , qui est une Dictionary<string, object> collection, peut être modifiée pour stocker les données requises. Dans cet exemple, le Properties dictionnaire est modifié pour stocker un Square objet, qui représente la taille du Rectangle, par rapport à une clé « Carré ».

Activer la suppression

Dans Xamarin.Forms, la reconnaissance des mouvements de suppression est fournie par la DropGestureRecognizer classe. Cette classe définit les propriétés suivantes :

AllowDrop, de type bool, qui indique si l’élément auquel le module de reconnaissance de mouvement est attaché peut être une cible de suppression. La valeur par défaut de cette propriété est true.
DragOverCommand, de type ICommand, qui est exécuté lorsque la source de glissement est déplacée sur la cible de déplacement.
DragOverCommandParameter, de type object : paramètre passé à la commande DragOverCommand.
DragLeaveCommand, de type ICommand, qui est exécuté lorsque la source de glissement est déplacée hors de la cible de dépôt.
DragLeaveCommandParameter, de type object : paramètre passé à la commande DragLeaveCommand.
DropCommand, de type ICommand, qui est exécuté lorsque la source de glissement est supprimée sur la cible de déplacement.
DropCommandParameter, de type object : paramètre passé à la commande DropCommand.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

La DropGestureRecognizer classe définit DragOverégalement , DragLeaveet Drop les événements qui se déclenchent à condition que la AllowDrop propriété soit true. Lorsqu’une DropGestureRecognizer source de glissement est reconnu sur la cible de déplacement, elle exécute l’événement DragOverCommand et appelle l’événement DragOver . Ensuite, si la source de glissement est déplacée hors de la cible de dépôt, elle DropGestureRecognizer exécute l’événement DragLeaveCommand et appelle l’événement DragLeave . Enfin, lorsque le DropGestureRecognizer mouvement de suppression reconnaît un mouvement de déplacement sur la cible de suppression, il exécute l’événement DropCommand et appelle l’événement Drop .

La DragEventArgs classe, qui accompagne les événements et DragLeave les DragOver événements, définit les propriétés suivantes :

Data, de type DataPackage, qui contient les données associées à la source de glisser. Cette propriété est en lecture seule.
AcceptedOperation, de type DataPackageOperation, qui spécifie les opérations autorisées par la cible de suppression.

Pour plus d’informations sur l’énumération DataPackageOperation , consultez Gérer l’événement DragOver.

La DropEventArgs classe qui accompagne l’événement Drop définit les propriétés suivantes :

Data, de type DataPackageView, qui est une version en lecture seule du package de données.
Handled, de type bool, indique si le gestionnaire d’événements a géré l’événement ou s’il Xamarin.Forms doit continuer son propre traitement.

L’exemple XAML suivant montre un DropGestureRecognizer élément attaché à un Image:

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

Dans cet exemple, lorsqu’une source de glissement est supprimée sur la Image cible de déplacement, la source de glissement est copiée vers la cible de déplacement, à condition que la source de glissement soit une ImageSource. Cela se produit, car Xamarin.Forms copie automatiquement les images déplacées et le texte vers des cibles de suppression compatibles.

Gérer l’événement DragOver

L’événement DropGestureRecognizer.DragOver peut éventuellement être géré pour indiquer le type d’opérations autorisé par la cible de suppression. Pour ce faire, définissez la AcceptedOperation propriété, de type DataPackageOperation, de l’objet DragEventArgs qui accompagne l’événement DragOver .

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

None, indique qu’aucune action n’est effectuée.
Copy, indique que le contenu source glisser sera copié dans la cible de déplacement.

Important

Lorsqu’un DragEventArgs objet est créé, la AcceptedOperation propriété est par défaut DataPackageOperation.Copy.

L’exemple XAML suivant montre un DropGestureRecognizer gestionnaire qui inscrit un gestionnaire pour l’événement DragOver :

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer DragOver="OnDragOver" />
    </Image.GestureRecognizers>
</Image>

Dans cet exemple, l’objet DropGestureRecognizer est attaché à un Image objet. L’événement DragOver est déclenché lorsqu’une source de glissement est déplacée sur la cible de déplacement, mais n’a pas été supprimée, qui exécute le OnDragOver gestionnaire d’événements :

void OnDragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.None;
}

Dans cet exemple, la AcceptedOperation propriété de l’objet DragEventArgs est définie sur DataPackageOperation.None. Cela garantit qu’aucune action n’est effectuée lorsqu’une source de glisser-déplacer est supprimée sur la cible de déplacement.

Traiter le package de données

L’événement Drop est déclenché lorsqu’une source de glissement est libérée sur une cible de déplacement. Lorsque cela se produit, Xamarin.Forms tente automatiquement de récupérer des données à partir du package de données, lorsqu’une source de glissement est supprimée sur les contrôles suivants :

Contrôles de texte. Les valeurs de texte peuvent être supprimées sur CheckBox, , DatePickerEditor, LabelEntry, RadioButton, , Switchet TimePicker objets.
Contrôles d’image. Les images peuvent être supprimées sur Button, Imageet ImageButton les contrôles.

Le tableau suivant montre les propriétés définies et toute conversion tentée, lorsqu’une source de glisser texte est supprimée sur un contrôle de texte :

Control	Propriété	Conversion
`CheckBox`	`IsChecked`	`string` est converti en `bool`.
`DatePicker`	`Date`	`string` est converti en `DateTime`.
`Editor`	`Text`
`Entry`	`Text`
`Label`	`Text`
`RadioButton`	`IsChecked`	`string` est converti en `bool`.
`Switch`	`IsToggled`	`string` est converti en `bool`.
`TimePicker`	`Time`	`string` est converti en `TimeSpan`.

Pour le contenu autre que le texte et les images, vous devez traiter vous-même le package de données.

La DropEventArgs classe qui accompagne l’événement Drop définit une Data propriété, de type DataPackageView. Cette propriété représente une version en lecture seule du package de données.

Récupérer des données d’image ou de texte

Les données d’image ou de texte peuvent être récupérées à partir d’un package de données dans le gestionnaire de l’événement Drop , à l’aide de méthodes définies dans la DataPackageView classe.

La DataPackageView classe inclut et GetTextAsync les GetImageAsync méthodes. La GetImageAsync méthode récupère une image du package de données, qui a été stockée dans la DataPackage.Image propriété et retourne Task<ImageSource>. De même, la GetTextAsync méthode récupère du texte à partir du package de données, qui a été stocké dans la DataPackage.Text propriété et retourne Task<string>.

L’exemple suivant montre un gestionnaire d’événements Drop qui récupère du texte à partir du package de données pour un Path:

async void OnDrop(object sender, DropEventArgs e)
{
    string text = await e.Data.GetTextAsync();

    // Perform logic to take action based on the text value.
}

Dans cet exemple, les données de texte sont récupérées à partir du package de données à l’aide de la GetTextAsync méthode. Une action basée sur la valeur de texte peut ensuite être effectuée.

Récupérer des données du conteneur de propriétés

Toutes les données peuvent être récupérées à partir d’un package de données dans le gestionnaire de l’événement Drop , en accédant à la Properties collection du package de données.

La DataPackageView classe définit une Properties propriété, de type DataPackagePropertySetView. La DataPackagePropertySetView classe représente un conteneur de propriétés en lecture seule stocké en tant que Dictionary<string, object>.

L’exemple suivant montre un gestionnaire d’événements Drop qui récupère les données du conteneur de propriétés d’un package de données pour un Rectangle:

void OnDrop(object sender, DropEventArgs e)
{
    Square square = (Square)e.Data.Properties["Square"];

    // Perform logic to take action based on retrieved value.
}

Dans cet exemple, l’objet Square est récupéré à partir du conteneur de propriétés du package de données, en spécifiant la clé de dictionnaire « Carré ». Une action basée sur la valeur récupérée peut ensuite être effectuée.

Partager via