Transition douce entre les changements de disposition

Article
10/11/2017

Les propriétés de disposition sont généralement définies sur des valeurs discrètes (telles que des numéros de ligne ou de colonne) ou sur des valeurs automatiques (comme la largeur et la hauteur). Pour créer une transition fluide entre les changements apportés à ce type de propriétés, utilisez la Disposition fluide. Par exemple, si un objet apparaît dans la cellule inférieure gauche d'un panneau de disposition Grid dans un état, mais qu'il apparaît dans la cellule inférieure droite de ce même panneau de disposition dans un autre état, la transition entre ces deux états entraîne un changement automatique, sauf si vous activez la Disposition fluide pour le groupe d'états et augmentez la durée de la transition.

Remarque :
La disposition fluide affecte uniquement les propriétés de disposition.

Effectuer une transition fluide entre les changements de disposition

Dans un document ouvert, disposez vos objets. Par exemple, vous pouvez disposer d'un objet Grid comprenant trois colonnes et trois lignes, avec des objets différents dans quatre des cellules.
Dans le panneau États, définissez différents états visuels et modifiez les propriétés de disposition de vos objets dans les états. Par exemple, pour chacun de vos objets, définissez un état qui affichera l'objet dans l'angle inférieur droit, couvrant deux lignes et deux colonnes.

Pour plus d’informations sur la création des états, voir Définir différents états visuels et durées de transition pour un contrôle utilisateur.
Dans le panneau États, définissez la durée de Transition par défaut pour votre groupe d'états sur 1 seconde.
Vous pouvez aussi cliquer sur EasingFunction pour sélectionner une fonction d'accélération à appliquer à la transition. Les fonctions d'accélération créent une animation plus réaliste. Par exemple, la fonction d'accélération Bounce crée un effet de rebond.
Pour activer le changement entre les états, ouvrez le panneau Composants, sélectionnez la catégorie Comportements et faites glisser le comportement GoToStateAction sur l'objet situé dans l'angle inférieur gauche.
Dans le panneau Propriétés, modifiez la propriété StateName de GoToStateAction en la remplaçant par le nom de l'état qui déplace l'objet inférieur gauche. Par exemple, modifiez la propriété StateName en la remplaçant par Show1.

Pour plus d’informations sur les comportements, voir Ajout de comportements aux objets.
Maintenant que la transition entre les états fonctionne, testez votre application en appuyant sur F5 et en cliquant sur l'objet de l'angle inférieur gauche de la grille. Il se déplace immédiatement vers l'angle inférieur droit, bien que la durée de transition soit 1 seconde.
Dans le panneau États, cliquez sur Activer FluidLayout pour votre groupe d'états.
Testez à nouveau votre application en appuyant sur F5 et en cliquant sur l'objet dans l'angle inférieur gauche de la grille. Il se déplace de manière fluide vers l'angle inférieur droit en 1 seconde.