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

Question

当GridView 滚动时，我正在尝试使用ParallaxView 在GridViewItem 视差内制作图像。预期效果与 PC 上 Xbox UWP 应用中的新闻源相同；当您滚动时，listview 项目上的图像会出现视差。如下图所示：

但是，我遇到了数据绑定数据上下文问题。我看到的所有例子都是为了让整个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 INSIDE 放在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 处于相同的上下文中。有没有办法将DataContext 更改为ParallaxView？

Answer 1

您可以使用 Binding，而不是 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>