xaml - 使用 x :Bind inside the GridView's ItemTemplate layout User Control in UWP

Question

在通用 Windows 平台 API 中，如何在用户控件(旨在作为 GridView 的 ItemTemplate 的布局)内部使用 x:Bind 来绑定(bind)到 GridView 的 ItemSource 的实例属性？

背景

我正在尝试重新创建 Windows 10 库存应用(例如体育、新闻、财经等)中的布局。

我使用两个 GridView 作为应用程序的主要区域；一篇用于“特色文章”(2 张带标题的大照片)，一篇用于所有其他文章(带标题的较小照片)。

我能够绑定(bind)到我在后面的代码中提供的数据源(一个列表，其中 NewsItem 是具有图像和标题属性的 POCO)以下是 MainPage.xaml 的相关部分:

<Page ...
   xmlns:data="using:NewsApp.Models" />

.... 

<GridView Name="FeaturedItems" Grid.Row="0">
  <GridView.ItemTemplate>
    <DataTemplate x:DataType="data:NewsItem">
      <Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
        <Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
        <TextBlock Text="{x:Bind Headline}" />
      </Grid>
    </DataTemplate>
  </GridView.ItemTemplate>
</GridView>

....

图像和标题绑定(bind)得很好(即使它们的样式不正确)。然而，我认为我需要绑定(bind)到用户控件来获取我想要的样式选项，特别是控制大小调整。使用 Visual State Triggers 并总体上简化 XAML(至少，这是向我建议的技术。)

因此，我向项目添加了一个新的用户控件 (FeaturedItemControl.xaml)，并复制到 DataTemplate 的子网格中:

<UserControl ... >
  <Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
    <Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
    <TextBlock Text="{x:Bind Headline}" />
  </Grid>
</UserControl>

然后回到 MainPage.xaml，我更改 DataTemplate 以引用新的 FeaturedItemControl:

<GridView Name="FeaturedItems" Grid.Row="0">
  <GridView.ItemTemplate>
    <DataTemplate x:DataType="data:NewsItem">
      <local:FeaturedItemControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </DataTemplate>
  </GridView.ItemTemplate>
</GridView>

但是，我收到图像和标题属性的错误消息:绑定(bind)路径“标题”无效:在“FeaturedItemControl”类型上找不到属性“标题”。

我已经尝试了一些方法，但只是在问题上抛出代码而不理解我在做什么。任何帮助将不胜感激。

感谢您的关注。

Answer 1

根据 Depechie 的回答，我为后代制定了这个小作弊:

请注意，您必须使用此技术来将 VisualStateManager 与数据绑定(bind)控件(GridView、ListView)数据模板内的项目结合使用。

1) 创建用户控件。

2) 剪切页面中 DataTemplate 的内容并将其粘贴到用户控件中，替换模板的网格。

3) 从数据模板内部引用用户控件:

4) 修改用户控件的内容，更改 x:Bind 语句以利用 object.property 表示法:

<UserControl>
  <StackPanel>
    <Image Source="{x:Bind NewsItem.LeadPhoto}" />
    <TextBlock Text="{x:Bind NewsItem.Headline}" />
    <TextBlock Text="{x:Bind NewsItem.Subhead}" />
  </StackPanel>
</UserControl>

5)将其添加到用户控件的代码隐藏中:

public Models.NewsItem NewsItem { get { return this.DataContext as Models.NewsItem; } }

public ContactTemplate()
{
  this.InitializeComponent();
  this.DataContextChanged += (s, e) => Bindings.Update();
}