Question

https://docs.microsoft.com/en-us/windows/uwp/design/motion/parallax 这是使用paralax的microsoft指令，他们使用ListView来演示效果但我的数据存储在Grid.View中，所以任何人都可以告诉我如何实现它？微软表示我们可以将它与包含scrollviewer的任何元素一起使用

Answer 1

    <GridView Grid.Row="1" ItemsSource="{x:Bind Icons}" IsItemClickEnabled="True" ItemClick="Grid_Clicked">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Icon">
                <StackPanel>
                    <Image Width="200" Height="200" HorizontalAlignment="Center" Source="{x:Bind ImageCover}"/>
                    <TextBlock FontSize="16" VerticalAlignment="Center" Text="{x:Bind Title}"/>
                    <TextBlock FontSize="10" VerticalAlignment="Center" Text="{x:Bind Room}"/>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

这是存储数据的地方这是视差

<ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> 

    <!-- Background element --> 
    <Image x:Name="BackgroundImage" Source="Assets/turntable.png"
           Stretch="UniformToFill"/>
</ParallaxView>

Answer 2

ParallaxView适用于GridView。 ParallaxView的Source属性用于设置或者包含控制视差操作的ScrollViewer的元素。在您的代码段中，它将ForegroundElement绑定到Source属性，但没有这样的元素。您需要将GridView命名为ForegroundElement。

<GridView
   x:Name="ForegroundElement"       
   IsItemClickEnabled="True"
   ItemClick="Grid_Clicked"
   ItemsSource="{x:Bind Icons}">
...
</GridView>

除此之外，代码段应该运行良好。如果你仍然看不到效果，那可能是物品数量不足造成的。仅当主机控件的布局空间受限制小于扩展内容大小时，才会显示ScrollViewer或GridView内的ListView，详情请参阅ScrollViewer in a control template。您可以尝试添加更多项目来检查效果。

此外，编辑问题以添加更多详细信息，并避免将其作为答案。

将视差效果应用于GridView

2 个答案: