如何在 GridView DataTemplate 中绑定视差视图？

Question

我正在尝试使用 ParallaxView 在滚动 GridView 时在 GridViewItem 视差内制作图像。预期效果与 PC 上 Xbox UWP 应用程序中的新闻源相同；滚动时列表视图项目上的图像存在视差。下图直观地显示了这一点：

但是，我运行遇到了数据绑定数据上下文问题。我看到的所有例子都是让整个GridView或ListView视差的背景。一个工作示例如下（非常类似于 here 找到的 XAML 控件库示例）：

    <Grid>
        <ParallaxView Name="GridViewParallaxView"
                      Source="{x:Bind MyGridView}"
                      VerticalShift="100">
            <!-- This is the background image that parallaxes. -->
            <Image></Image>
        </ParallaxView>

        <GridView Name="MyGridView">
            <!-- GridView Content Here... -->
        </GridView>
    </Grid>

我运行遇到的问题是当试图将 DataTemplate 的 ParallaxView 放在 GridView 的 ItemTemplate 中时。

<GridView Name="MyGridView"
          ItemsSource="{x:Bind MyDataList}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="models:MyDataType">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>

                    <ParallaxView Name="GridViewParallaxView"
                                  Grid.Row="0"
                                  Source="{x:Bind MyGridView}"
                                  VerticalShift="100">
                        <!-- This is the image  ON EACH GRIDVIEW ITEM that parallaxes. -->
                        <Image Source="{x:Bind MySource}"></Image>
                    </ParallaxView>

                    <TextBlock Name="ItemTitleTextBlock"
                               Grid.Row="1"
                               Text="{x:Bind Title}"></TextBlock>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
</GridView>

请注意，为简洁起见，省略了一些属性（如 MinWidth 和 Margin）。

背后的代码（不完全相关，但为某些绑定添加上下文）：

public class MyPage : Page
{
    public ObservableCollection<MyDataType> MyDataList { get; set; }
}

public class MyDataType
{
    public string Title { get; set; }
    public ImageSource MySource { get; set; }
}

这不起作用，因为将 'ParallaxView' 放在 'DataTemplate' 内会更改 'DataContext'。 MyGridView 不能再像那样直接绑定。那么如何绑定呢？

此外，我读到 DataContext 属性由 XAML 树中的子代继承。我需要 Image 数据绑定与 DataTemplate 处于相同的上下文中。有没有办法只更改 ParallaxView 的 DataContext？

Answer 1

您可以使用绑定，而不是 x:Bind。

<ParallaxView Name="GridViewParallaxView"
                              Grid.Row="0"
                              Source="{Binding ElementName=MyGridView}"
                              VerticalShift="100">
                        <!-- This is the image  ON EACH GRIDVIEW ITEM that parallaxes. -->
                        <Image Source="{x:Bind MySource}"></Image>
</ParallaxView>

如何在 GridView DataTemplate 中绑定视差视图？

How to Bind Parallax View within GridView DataTemplate?

data-binding

xaml

parallax

uwp