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

问题描述

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

但是，我遇到了数据绑定数据上下文问题。我看到的所有例子都是为了做整个GridView或ListView视差的背景。一个工作示例如下（与此处的 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>

我遇到的问题是尝试将ParallaxViewINSIDEDataTemplate放在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和）。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. 有没有办法改变DataContextfor ParallaxView？

标签： xamldata-bindinguwpparallax

<ParallaxView Name="GridViewParallaxView" Grid.Row="0" Source="{Binding ElementName=MyGridView}" VerticalShift="100">  <Image Source="{x:Bind MySource}"></Image> </ParallaxView>

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

问题描述

解决方案

推荐阅读