win10 uwp 视差效果

lindexi-gd

浏览: 140104 次

最近访客更多访客>>

jasonrush2012

hbclub

monkey_yao

2868466192

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

我们觉得使用原来的微软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>