win10 uwp 视差效果

本文翻译：http://jamescroft.co.uk/blog/uwp/playing-with-scrolling-parallax-effects-on-ui-elements-in-windows-apps/

我们觉得使用原来的微软ScrollView效果实在不好，我们需要一个好看的效果。如果你不知道我上面说的是什么，那么我应该来说我马上要做的，其实我们可以看到我们有很多层图片，在我们向下拉，他们下降不一样，给我们看来好像我们移动的是在一个有Z。这里说的Z是三维，因为三维XYZ。我们通过这个让我们的滚动看起来不是那么差。

其实我们可以看：http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 大神的解释很好

我们可以使用大神做的https://github.com/clarkezone/UWPCompositionDemos他用的很简单，我们需要滚动条，图片。他这个需要我们改多，所以我们做个可以添加到滚动条的控件，有滚动条的GridView，ListView，他们移动会让后面图片比前面下降少，如果我们滚动向下。

public class UIElementParallaxEffectBehavior : DependencyObject, IBehavior
{
        public static readonly DependencyProperty ParallaxElementProperty =
            DependencyProperty.Register(
                "ParallaxElement",
                typeof(UIElement),
                typeof(UIElementParallaxEffectBehavior),
                new PropertyMetadata(null, OnParallaxElementChanged));

        public static readonly DependencyProperty ParallaxMultiplierProperty =
            DependencyProperty.Register(
                "ParallaxMultiplier",
                typeof(double),
                typeof(UIElementParallaxEffectBehavior),
                new PropertyMetadata(0.3));

        public double ParallaxMultiplier
        {
            get
            {
                return (double)GetValue(ParallaxMultiplierProperty);
            }
            set
            {
                SetValue(ParallaxMultiplierProperty, value);
            }
        }

        private static void OnParallaxElementChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var behavior = d as UIElementParallaxEffectBehavior;
            behavior?.AttachParallaxEffect();
        }

        private void AttachParallaxEffect()
        {
            if (this.ParallaxElement != null && this.AssociatedObject != null)
            {
                var scrollViewer = this.AssociatedObject as ScrollViewer;
                if (scrollViewer == null)
                {
                    // Attempt to see if this is attached to a scroll-based control like a ListView or GridView.
                    scrollViewer = this.AssociatedObject.FindChildElementOfType<ScrollViewer>();

                    if (scrollViewer == null)
                    {
                        throw new InvalidOperationException("The associated object or one of it's child elements must be of type ScrollViewer.");
                    }
                }

                var compositionPropertySet =
                    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);

                var compositor = compositionPropertySet.Compositor;

                var animationExpression =
                    compositor.CreateExpressionAnimation("ScrollViewer.Translation.Y * Multiplier");

                animationExpression.SetScalarParameter("Multiplier", (float)this.ParallaxMultiplier);
                animationExpression.SetReferenceParameter("ScrollViewer", compositionPropertySet);

                var visual = ElementCompositionPreview.GetElementVisual(this.ParallaxElement);
                visual.StartAnimation("Offset.Y", animationExpression);
            }
        }

        public UIElement ParallaxElement
        {
            get
            {
                return (UIElement)this.GetValue(ParallaxElementProperty);
            }
            set
            {
                this.SetValue(ParallaxElementProperty, value);
            }
        }

        public void Attach(DependencyObject associatedObject)
        {
            if (this.AssociatedObject != null)
            {
                throw new InvalidOperationException("Cannot assign to the same behavior twice.");
            }

            this.AssociatedObject = associatedObject;

            this.AttachParallaxEffect();
        }

        public void Detach()
        {
            this.AssociatedObject = null;
        }

        public DependencyObject AssociatedObject { get; private set; }
}

如果觉得我做的好复杂，也没有注释，那么我就想骂下垃圾微软，因为我做到这我的神器没法使用，我们来弄个简单，因为刚才我翻译的那个他做SDK，我们不是需要在背景弄一个图片，我们可以使用一个可以显示的。

当然我们需要在Nuget下载：https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Uwp.Managed/

源码：https://github.com/Microsoft/XamlBehaviors

我们将会修改微软的

public class ParallaxBehavior : Behavior<FrameworkElement>
{

    public UIElement ParallaxContent
    {
        get { return (UIElement)GetValue(ParallaxContentProperty); }
        set { SetValue(ParallaxContentProperty, value); }
    }

    public static readonly DependencyProperty ParallaxContentProperty = DependencyProperty.Register(
        "ParallaxContent",
        typeof(UIElement),
        typeof(ParallaxBehavior),
        new PropertyMetadata(null, OnParallaxContentChanged));

    public double ParallaxMultiplier
    {
        get { return (double)GetValue(ParallaxMultiplierProperty); }
        set { SetValue(ParallaxMultiplierProperty, value); }
    }

    public static readonly DependencyProperty ParallaxMultiplierProperty = DependencyProperty.Register(
        "ParallaxMultiplier",
        typeof(double),
        typeof(ParallaxBehavior),
        new PropertyMetadata(0.3d));

    protected override void OnAttached()
    {
        base.OnAttached();
        AssignParallax();
    }

    private void AssignParallax()
    {
        if (ParallaxContent == null) return;
        if (AssociatedObject == null) return;

        var scroller = AssociatedObject as ScrollViewer;
        if (scroller == null)
        {
            scroller = AssociatedObject.GetChildOfType<ScrollViewer>();
        }
        if (scroller == null) return;

        CompositionPropertySet scrollerViewerManipulation = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scroller);

        Compositor compositor = scrollerViewerManipulation.Compositor;

        ExpressionAnimation expression = compositor.CreateExpressionAnimation("ScrollManipululation.Translation.Y * ParallaxMultiplier");

        expression.SetScalarParameter("ParallaxMultiplier", (float)ParallaxMultiplier);
        expression.SetReferenceParameter("ScrollManipululation", scrollerViewerManipulation);

        Visual textVisual = ElementCompositionPreview.GetElementVisual(ParallaxContent);
        textVisual.StartAnimation("Offset.Y", expression);
    }

    private static void OnParallaxContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var b = d as ParallaxBehavior;
        b.AssignParallax();
    }
 }

我们可以在Xaml

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Image x:Name="ParallaxImage" Source="ms-appx:///Assets/Guadeloupe.jpg" Stretch="Fill"/>
    <ScrollViewer>
        <TextBlock HorizontalAlignment="Stretch" TextWrapping="WrapWholeWords" FontSize="30" Foreground="Black">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc fringilla ultrices est eu ornare.
                Suspendisse purus massa, iaculis in finibus dictum, gravida vel purus.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        </TextBlock>
        <interactivity:Interaction.Behaviors>
            <behaviors:ParallaxBehavior ParallaxContent="{Binding ElementName=ParallaxImage}" />
        </interactivity:Interaction.Behaviors>
    </ScrollViewer>
</Grid>

上面代码是http://visuallylocated.com/post/2015/12/10/Easy-Parallax-effect-in-Windows-10.aspx修改，因为我现在没法使用神器，不知道他说的是不是对的。

好久没写，因为最近忙，要考试，所以现在也没有多少去查，如果看到不对的，希望大神能在我博客说。

我们刚才使用就是在有ScrollView的ListView可以使用，现在我们使用改的代码

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView>
        <ListView.Header>
            <Image x:Name="ParallaxImage" Source="ms-appx:///Assets/Guadeloupe.jpg" Stretch="UniformToFill"/>
        </ListView.Header>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Background" Value="White"/>
            </Style>
        </ListView.ItemContainerStyle>
        <x:String>Lorem ipsum dolor sit amet, consectetur adipiscing.</x:String>
        <x:String>Nunc fringilla ultrices est eu ornare.</x:String>
        <x:String>Suspendisse purus massa, iaculis in finibus dictum, gravida vel purus.</x:String>
        <interactivity:Interaction.Behaviors>
            <behaviors:ParallaxBehavior ParallaxContent="{Binding ElementName=ParallaxImage}" ParallaxMultiplier="-0.2"/>
        </interactivity:Interaction.Behaviors>
    </ListView>
</Grid>

我很少文章是自己原创，但是翻译也写不好

晚上1429081529在群里：地图是否可以离线使用，于是我就开了地图，在这时我们在说，pivot控件，是滑动到哪个页面，哪个页面才会开始加载的吗？经过LI大神的细心断点，发现只要已进入这个page，不管哪个pivotItem都会加载，但是里面的子控件只有滑到哪个页面时才会加载。

https://blogs.windows.com/buildingapps/2015/12/08/awaken-your-creativity-with-the-new-windows-ui-composition/