UWP 오프셋이있는 시차 번호

Question

Windows 전화 시작 화면 (예 : https://www.windowscentral.com/sites/wpcentral.com/files/styles/larger/public/field/image/2014/04/Clean_vs_Busy.jpg?itok=58NioLgB)과 같이 반투명 항목 배경이있는 이미지의 목록보기로 UWP 응용 프로그램을 개발합니다. 내 솔루션을 UWP Community toolkit parallax service에 기반하기로 결정했습니다.

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

내가이 애니메이션 표현의 오프셋 (offset)에 추가해야합니다 : 우선은 항목의 왼쪽 상단 지점을했다? 또한 나는 이것에 대한 완전한 문서를 찾지 못했습니다.

ExpressionAnimation expression = compositor.CreateExpressionAnimation(
     "Matrix4x4.CreateFromTranslation(Vector3(HorizontalMultiplier * scroller.Translation.X, VerticalMultiplier * scroller.Translation.Y, 0.0f))"); 
    expression.SetReferenceParameter("scroller", scrollerViewerManipulation); 
    expression.SetScalarParameter("offsetX", (float)p.X); 
    expression.SetScalarParameter("offsetY", (float)p.Y); 

즉, "공유 큰 이미지의 항목을 살펴보고 싶습니다." 항목은 캔버스에서 전체입니다.

Answer 1

목록의 모든 이미지에 애니메이션을 적용하려면 sample from the Windows Composition team을 따르십시오.

여기에 tl/dr 버전이 있습니다.

애니메이션을 만듭니다. 페이지가로드 될 때이 작업을 수행합니다 :

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; 
} 

애니메이션 각각의 이미지를 목록에 컨테이너 변경 (참고 : 당신의 ListView의 ContainerContentChanging 이벤트에 가입) 할 때

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); 
    } 
} 

이 샘플이 작동 ListView 또는 GridView.