Améliorer les expériences ScrollViewer existantes

  • Article

Cet article explique comment utiliser un ScrollViewer xaml et ExpressionAnimations pour créer des expériences de mouvement dynamiques pilotées par l’entrée.

Prérequis

Ici, nous partons du principe que vous êtes familiarisé avec les concepts abordés dans ces articles :

Pourquoi créer sur ScrollViewer ?

En règle générale, vous utilisez le code XAML ScrollViewer existant pour créer une surface avec défilement et zoomable pour le contenu de votre application. Avec l’introduction du langage Fluent Design, vous devez maintenant vous concentrer sur la façon d’utiliser le défilement ou le zoom d’une surface pour piloter d’autres expériences de mouvement. Par exemple, utilisez le défilement pour générer une animation floue d’un arrière-plan ou la position d’un « en-tête collant ».

Dans ces scénarios, vous tirez parti des expériences de comportement ou de manipulation telles que le défilement et le zoom pour rendre d’autres parties de votre application plus dynamiques. Ceux-ci à leur tour permettent à l’application de se sentir plus cohérente, ce qui rend les expériences plus mémorables aux yeux des utilisateurs finaux. En rendant l’interface utilisateur de l’application plus mémorable, les utilisateurs finaux s’engagent avec l’application plus fréquemment et pendant des périodes plus longues.

Que pouvez-vous créer par-dessus ScrollViewer ?

Vous pouvez tirer parti de la position d’un ScrollViewer pour créer un certain nombre d’expériences dynamiques :

  • Parallaxe : utilisez la position d’un ScrollViewer pour déplacer le contenu d’arrière-plan ou de premier plan à une vitesse relative vers la position de défilement.
  • StickyHeaders : utilisez la position d’un ScrollViewer pour animer et « coller » un en-tête à une position
  • Input-Driven Effets : utilisez la position d’un scrollviewer pour animer un effet de composition tel que Flou.

En général, en référençant la position d’un ScrollViewer avec une ExpressionAnimation, vous pouvez créer une animation qui change dynamiquement la quantité de défilement.

Affichage liste avec parallaxe

Un en-tête timide

Utilisation de ScrollViewerManipulationPropertySet

Pour créer ces expériences dynamiques à l’aide d’un ScrollViewer XAML, vous devez être en mesure de référencer la position de défilement dans une animation. Pour ce faire, accédez à un Objet CompositionPropertySet hors de XAML ScrollViewer appelé ScrollViewerManipulationPropertySet. Le ScrollViewerManipulationPropertySet contient une seule propriété Vector3 appelée Translation qui permet d’accéder à la position de défilement du ScrollViewer. Vous pouvez ensuite référencer cela comme n’importe quel autre CompositionPropertySet dans votre ExpressionAnimation.

Étapes générales pour commencer :

  1. Accédez à ScrollViewerManipulationPropertySet via ElementCompositionPreview.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. Créez une ExpressionAnimation qui référence la propriété Translation à partir du PropertySet.
    • N’oubliez pas de définir le paramètre de référence !
  3. Ciblez la propriété d’un Objet CompositionObject avec expressionAnimation.

Notes

Il est recommandé d’affecter le PropertySet retourné par la méthode GetScrollViewerManipulationPropertySet à une variable de classe. Cela garantit que le jeu de propriétés n’est pas nettoyé par garbage collection et n’a donc aucun effet sur l’ExpressionAnimation dans laquelle il est référencé. ExpressionAnimations ne conserve pas de référence forte à l’un des objets utilisés dans l’équation.

Exemple

Jetons un coup d’œil à la façon dont l’exemple Parallaxe ci-dessus est mis en place. Pour référence, tout le code source de l’application se trouve dans le dépôt Windows UI Dev Labs sur GitHub.

La première chose à faire est d’obtenir une référence à ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

L’étape suivante consiste à créer l’ExpressionAnimation qui définit une équation qui utilise la position de défilement du ScrollViewer.

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

Notes

Vous pouvez également utiliser les classes d’assistance ExpressionBuilder pour construire cette même expression sans avoir besoin de chaînes :

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

Enfin, vous prenez cette ExpressionAnimation et ciblez le visuel que vous souhaitez parallaxe. Dans ce cas, il s’agit de l’image de chacun des éléments de la liste.

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);