Как связать представление Parallax в GridView DataTemplate? - PullRequest
Новая
       39

Как связать представление Parallax в GridView DataTemplate?

0 голосов
/ 21 апреля 2019

Я пытаюсь использовать ParallaxView для создания изображения в параллаксе GridViewItem при прокрутке GridView. Предполагаемый эффект такой же, как новостная лента в приложении Xbox UWP на ПК; На изображениях в списке предметов есть параллакс при прокрутке. Это визуально показано на следующем изображении:

Annotated Layout Screenshot

Однако я столкнулся с проблемой контекста данных, связанной с данными. Все примеры, которые я видел, являются фоном всего параллакса 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>

Проблема, с которой я сталкиваюсь, заключается в попытке поместить ParallaxView ВНУТРИ DataTemplate в 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. Есть ли способ просто изменить DataContext на ParallaxView?

1 Ответ

1 голос
/ 22 апреля 2019

Вы можете использовать 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>
...