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

Question

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

但是，我遇到了数据绑定数据上下文问题。我所看到的所有示例都是以整个GridView或ListView视差为背景的。一个有效的示例如下（非常类似于找到的here的XAML Controls Gallery Sample）：

    <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>

我遇到的问题是试图将ParallaxView的{​​{1}}的内侧放在DataTemplate的{​​{1}}中。

ItemTemplate

请注意，为简洁起见，一些属性（例如GridView和<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

这不起作用，因为将“ ParallaxView”放置在“ DataTemplate”的内部会更改“ DataContext”。 Margin不再可以那样直接绑定。那我该如何绑定呢？

此外，我读到public class MyPage : Page { public ObservableCollection<MyDataType> MyDataList { get; set; } } public class MyDataType { public string Title { get; set; } public ImageSource MySource { get; set; } } 属性是XAML树中的子级继承的。我需要MyGridView数据绑定与DataContext处于同一上下文中。有没有办法只将Image更改为DataTemplate？

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>