UWP Parallax mit Offset

Question

Ich entwickle UWP-Anwendung mit Listview von Bildern mit übersetzten Elementen Hintergrund wie auf Windows Phone Startbildschirm (z. B. https://www.windowscentral.com/sites/wpcentral.com/files/styles/larger/public/field/image/2014/04/Clean_vs_Busy.jpg?itok=58NioLgB). Ich entschied mich, meine Lösung auf UWP Community toolkit parallax service zu basieren. Zuerst nahm ich links oben Punkt Artikel:

var p = parallaxElement.TransformToVisual(scroller).TransformPoint(new Point(0, 0)); 

Wo soll ich hinzufügen, das in der Animation Ausdruck versetzt? Auch dafür habe ich keine vollständige Dokumentation gefunden.

Mit anderen Worten, ich möchte Wirkung "durch die Elemente auf geteilten großen Bild"; Gegenstände sind Löcher in Leinwand.

Answer 1

Um alle Bilder Ihrer Liste zu animieren, können Sie dem sample from the Windows Composition team folgen.

Hier ist die tl/dr Version:

die Animation erstellen. Tun Sie dies, wenn die Seite geladen wird:

private void SetupAnimation() 
{ 
    // available with SDK version 15063 
    Compositor compositor = Window.Current.Compositor; 
    // available with previous SDK version 
    //Compositor compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 

    // Get scrollviewer using UWP Community Toolkit extension method 
    ScrollViewer myScrollViewer = ImageList.FindDescendant<ScrollViewer>(); 
    _scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer); 

    // Setup the expression 
    var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>(); 
    var startOffset = ExpressionValues.Constant.CreateConstantScalar("startOffset", 0.0f); 
    var parallaxValue = 0.5f; 
    var parallax = (scrollPropSet.Translation.Y + startOffset); 
    _parallaxExpression = parallax * parallaxValue - parallax; 
} 

Animate jedes Bild in der Liste, wenn die Behälter Änderungen (HINWEIS: abonnieren Sie den ContainerContentChanging Veranstaltung Ihrer Listview)

private void ImageList_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args) 
{ 
    // Find the image element to animate 
    Image image = args.ItemContainer.ContentTemplateRoot.GetFirstDescendantOfType<Image>(); 

    Visual visual = ElementCompositionPreview.GetElementVisual(image); 
    // You'll want to use the right size for your images 
    visual.Size = new Vector2(960f, 960f); 

    if (_parallaxExpression != null) 
    { 
     _parallaxExpression.SetScalarParameter("StartOffset", (float)args.ItemIndex * visual.Size.Y/4.0f); 
    visual.StartAnimation("Offset.Y", _parallaxExpression); 
    } 
} 

Dieses Beispiel arbeitet mit ein ListView oder GridView.