Migliorare le esperienze ScrollViewer esistenti

Questo articolo illustra come usare un controllo ScrollViewer e ExpressionAnimation XAML per creare esperienze di movimento basate su input dinamico.

Prerequisiti

In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:

• Animazioni basate su input
• Animazioni basate sulle relazioni

Perché eseguire la compilazione su ScrollViewer?

In genere, si usa il controllo ScrollViewer XAML esistente per creare una superficie scorrevole e zoomabile per il contenuto dell'app. Con l'introduzione del linguaggio Fluent Design, è diventato necessario concentrarsi anche su come usare l'azione di scorrimento o zoom di una superficie per guidare altre esperienze di movimento. Ad esempio, usando lo scorrimento per guidare un'animazione sfocatura di uno sfondo o guidare la posizione di una "intestazione fissa".

In questi scenari, si sfrutta il comportamento o le esperienze di manipolazione, ad esempio lo scorrimento e lo zoom per rendere altre parti dell'app più dinamiche. Questo a sua volta consente all'app di apparire più coesa e rende le esperienze più memorabili agli occhi degli utenti finali. Rendendo più memorabile l'interfaccia utente, gli utenti finali possono interagire con l'app più frequentemente e più a lungo.

Cosa è possibile creare sopra ScrollViewer?

È possibile sfruttare la posizione di ScrollViewer per creare una serie di esperienze dinamiche:

• Parallasse: usare la posizione di ScrollViewer per spostare lo sfondo o il contenuto in primo piano a una velocità relativa alla posizione di scorrimento.
• StickyHeaders: usare la posizione di ScrollViewer per animare e "rendere fissa" un'intestazione in una posizione
• Effetti basati su input: usare la posizione di un controllo Scrollviewer per animare un effetto di composizione, ad esempio una sfocatura.

In generale, facendo riferimento alla posizione di ScrollViewer con ExpressionAnimation, è possibile creare un'animazione che cambia dinamicamente rispetto alla quantità di scorrimento.

Uso di ScrollViewerManipulationPropertySet

Per creare queste esperienze dinamiche usando un controllo ScrollViewer XAML, bisogna fare riferimento alla posizione di scorrimento in un'animazione. A tale scopo, accedere a CompositionPropertySet off di ScrollViewer XAML denominato ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet contiene una singola proprietà Vector3 denominata Translation che consente di accedere alla posizione di scorrimento di ScrollViewer. È quindi possibile fare riferimento a questo come a qualsiasi altro CompositionPropertySet in ExpressionAnimation.

Passaggi generali per iniziare:

1. Accedere a ScrollViewerManipulationPropertySet tramite ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Creare un oggetto ExpressionAnimation che fa riferimento alla proprietà Translation da PropertySet.
   • Non dimenticare di impostare il parametro di riferimento.
3. Impostare come destinazione la proprietà di compositionObject con ExpressionAnimation.

Esempio

Si esaminerà ora il modo in cui viene messo insieme l'esempio di parallasse illustrato in precedenza. Per riferimento, tutto il codice sorgente per l'app è disponibile nel repository Windows UI Dev Labs su GitHub.

Per prima cosa è necessario ottenere un riferimento a ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Il passaggio successivo consiste nel creare ExpressionAnimation che definisce un'equazione che utilizza la posizione di scorrimento di 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))";

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

Infine, si prende questa ExpressionAnimation e si fa riferimento all'oggetto visivo che si desidera sottoporre a parallasse. In questo caso, l'immagine per ogni elemento nell'elenco.

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