Meglévő ScrollViewer-szolgáltatások továbbfejlesztése

Ez a cikk bemutatja, hogyan használható XAML ScrollViewer és ExpressionAnimations dinamikus bemeneti mozgásélmények létrehozásához.

Előfeltételek

Feltételezzük, hogy ismeri az alábbi cikkekben tárgyalt fogalmakat:

• Bemenetalapú animációk
• Kapcsolaton alapuló animációk

Miért érdemes a ScrollViewerre építeni?

A meglévő XAML ScrollViewerrel általában görgethető és nagyítható felületet hozhat létre az alkalmazás tartalmához. A Fluent Design nyelv bevezetésével most arra is koncentrálnia kell, hogyan használhatja a felület görgetését vagy nagyítását más mozgási élmények eléréséhez. Például görgetéssel elmosódott animációt hozhat létre egy háttérről, vagy megadhatja a "ragadós fejléc" pozícióját.

Ezekben a forgatókönyvekben olyan viselkedési vagy manipulációs funkciókat használ, mint a görgetés és a nagyítás, hogy dinamikusabbá tegye az alkalmazás más részeit. Ezek lehetővé teszik, hogy az alkalmazás egységesebbnek érezze magát, így a végfelhasználók szemében emlékezetesebbek lesznek az élmények. Az alkalmazás felhasználói felületének emlékezetesebbsé tételével a végfelhasználók gyakrabban és hosszabb ideig is kapcsolatba lépnek az alkalmazással.

Mit lehet építeni a ScrollViewer tetejére?

A ScrollViewer pozícióját kihasználva számos dinamikus élményt hozhat létre:

• Parallax – a ScrollViewer pozíciójával relatív sebességgel mozgathatja a háttér- vagy előtértartalmakat a görgetési pozícióba.
• StickyHeaders – a ScrollViewer pozícióját használva animálhatja, és "odaragaszthatja" a fejlécet egy adott helyre.
• Input-Driven Effektusok – a Scrollviewer pozíciójával animálhat egy kompozíciós effektust, például az Életlenítést.

Általánosságban elmondható, hogy ha egy ScrollViewer pozíciójára hivatkozik egy ExpressionAnimation használatával, létrehozhat egy animációt, amely dinamikusan változik a görgetési mennyiséghez képest.

A ScrollViewerManipulationPropertySet használata

Ha ezeket a dinamikus szolgáltatásokat XAML ScrollViewerrel szeretné létrehozni, képesnek kell lennie a görgetési pozícióra hivatkozni egy animációban. Ez a művelet a ScrollViewerManipulationPropertySet nevű XAML ScrollViewerből elérhető CompositionPropertySet segítségével történik. A ScrollViewerManipulationPropertySet egyetlen Translation nevű Vector3 tulajdonságot tartalmaz, amely hozzáférést biztosít a ScrollViewer görgetési pozíciójához. Ezután úgy hivatkozhat rá, mint bármely más CompositionPropertySet-re ExpressionAnimation-ban.

Az első lépések általános lépései:

1. A ScrollViewerManipulationPropertySet az ElementCompositionPreview-on keresztül érhető el.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Hozzon létre egy ExpressionAnimation tulajdonságot, amely a PropertySet Fordítás tulajdonságára hivatkozik.
   • Ne felejtse el beállítani a referenciaparamétert!
3. Egy CompositionObject tulajdonság megcélzása a ExpressionAnimation használatával.

Megjegyzés:

Javasoljuk, hogy a GetScrollViewerManipulationPropertySet metódusból visszaadott PropertySet tulajdonsághalmazt rendelje hozzá egy osztályváltozóhoz. Ez biztosítja, hogy a tulajdonságkészletet ne tisztítsa meg a Szemétgyűjtés, így nincs hatással a hivatkozott Kifejezésanimációra. Az ExpressionAnimations nem tart fenn erős hivatkozást az egyenletben használt objektumokra.

példa

Vessünk egy pillantást a fent látható Parallax-minta összeállítására. Referenciaként az alkalmazás összes forráskódja megtalálható a GitHubOn található Windows UI Dev Labs adattárban.

Az első dolog a ScrollViewerManipulationPropertySetre mutató hivatkozás lekérése.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

A következő lépés az ExpressionAnimation létrehozása, amely meghatároz egy egyenletet, amely a ScrollViewer görgetési pozícióját használja.

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

Megjegyzés:

Az ExpressionBuilder segédosztályait is használhatja ugyanahhoz a kifejezéshez sztringek nélkül:

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

Végül vegye ezt a ExpressionAnimation parancsot, és célozza meg azt a vizualizációt, amelyet parallaxként szeretne használni. Ebben az esetben a lista minden elemének képe.

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