Vylepšení stávajících prostředí ScrollVieweru

Tento článek vysvětluje, jak pomocí Xaml ScrollVieweru a ExpressionAnimations vytvářet dynamické prostředí pohybu řízené vstupy.

Požadavky

Tady předpokládáme, že znáte koncepty, které jsou popsány v těchto článcích:

• animace řízené vstupem
• animace založené na relacích

Proč stavět na ScrollVieweru?

Pomocí stávajícího XAML prvku ScrollViewer obvykle vytvoříte posouvatelný a přibližitelný povrch pro obsah vaší aplikace. Se zavedením Fluent Design stylu byste se teď také měli zaměřit na to, jak používat posouvání nebo přiblížení povrchu k řízení jiných pohybových zážitků. Například pomocí posouvání můžete řídit animaci rozostření pozadí nebo řídit pozici "lepivého záhlaví".

V těchto scénářích využíváte chování nebo manipulace, jako je scrollování a zoomování, abyste činili další části aplikace dynamičtějšími. Díky těmto možnostem aplikace působí více soudržně, což dělá zážitky koncových uživatelů zapamatovatelnějšími. Díky lepšímu zapamatovatelnému uživatelskému rozhraní aplikace budou koncoví uživatelé pracovat s aplikací častěji a po delší dobu.

Co můžete vytvořit nad ScrollViewerem?

Umístění scrollVieweru můžete využít k vytvoření řady dynamických prostředí:

• Parallax – pomocí pozice ScrollVieweru lze posunout pozadí nebo obsah popředí relativní rychlostí vůči scrolovací pozici.
• StickyHeaders – použití pozice ScrollViewer k animaci a připnutí záhlaví na dané místo
• Input-Driven Efekty – k animaci kompozičního efektu, jako je Rozostření, použijte pozici Scrollvieweru.

Obecně platí, že odkazováním na pozici ScrollVieweru pomocí ExpressionAnimation můžete vytvořit animaci, která dynamicky mění relativní velikost posouvání.

Použití ScrollViewerManipulationPropertySet

Pokud chcete vytvořit tato dynamická prostředí pomocí xaml ScrollVieweru, musíte být schopni odkazovat na pozici posouvání v animaci. To se provádí přístupem k CompositionPropertySet z XAML ScrollViewer s názvem ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet obsahuje jednu Vektor3 vlastnost s názvem Translation, která poskytuje přístup k pozici posuvníku ScrollViewer. Pak na to můžete odkazovat stejně jako na jakoukoli jinou vlastnost CompositionPropertySet v ExpressionAnimation.

Obecné kroky, jak začít:

1. Přejděte k ScrollViewerManipulationPropertySet prostřednictvím ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Vytvořte ExpressionAnimation, která odkazuje na vlastnost Translation z PropertySet.
   • Nezapomeňte nastavit referenční parametr.
3. Zaměřte se na vlastnost objektu CompositionObject pomocí ExpressionAnimation.

Poznámka:

Doporučuje se přiřadit PropertySet vrácené z GetScrollViewerManipulationPropertySet metody do proměnné třídy. Tím se zajistí, že sada vlastností nebude vyčištěna uvolňováním paměti a tím pádem nebude mít žádný vliv na ExpressionAnimation, na kterou se odkazuje. ExpressionAnimations neudržují silný odkaz na žádný z objektů použitých v rovnici.

Příklad

Pojďme se podívat, jak se vytvoří výše uvedený vzor paralaxu. Pro referenci najdete veškerý zdrojový kód aplikace v úložišti Window UI Dev Labs na GitHubu.

První věc je získat odkaz na ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Dalším krokem je vytvoření ExpressionAnimation, která definuje rovnici, která využívá pozici posouvání scrollVieweru.

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

Poznámka:

Můžete také využít pomocné třídy ExpressionBuilder k vytvoření tohoto stejného výrazu bez nutnosti řetězců:

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

Nakonec vezmete tuto animaci výrazu a zacílíte na vizuální prvek, který chcete uplatnit pro paralaxu. V tomto případě se jedná o obrázek pro každou položku v seznamu.

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