将视差效果应用于 GridView

Question

https://docs.microsoft.com/en-us/windows/uwp/design/motion/parallax 这是使用视差的微软指令，他们使用 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>

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

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

将视差效果应用于 GridView

Apply Parallax effect into GridView

xaml

effect

parallax

uwp