使用x:在UWP中的GridView的ItemTemplate布局用户控件中绑定

Question

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

背景

我正在尝试重新创建Windows 10股票应用程序中的布局,如体育,新闻,金钱等.

我正在使用两个GridViews作为应用程序的主要区域; 一个用于"特色文章"(2张带有标题的大照片)和一张用于所有其他文章(带有标题的较小照片).

我能够绑定到我在后面的代码中提供的数据源(一个List,其中NewsItem是一个带有Image和Headline属性的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>

....

图像和标题绑定得很好(即使它们没有正确设置样式).但是,相反我认为我需要绑定到用户控件以获取我想要的样式选项,控制调整大小esp.当使用视觉状态触发器并简化XAML时(至少,这是我建议的技术).

所以,我在项目中添加了一个新的用户控件(FeaturedItemControl.xaml),并复制到DataTemplate的子Grid中:

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

但是,我收到了Image和Headline属性的错误消息:无效的绑定路径'Headline':在'FeaturedItemControl'类型上找不到属性'Headline'.

我已经尝试了一些东西,但是在我不知道自己在做什么的情况下只是抛出代码来解决问题.任何帮助将不胜感激.

谢谢你的关注.

Answer 1

使用Depechie的答案,我为后人制定了这个小作弊:

请注意,您必须使用此技术将VisualStateManager与数据绑定控件(GridView,ListView)数据模板中的项目一起使用.

1)创建用户控件.

2)在页面中剪切DataTemplate的内容并将其粘贴到用户控件中,替换模板的Grid.

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();
}

Answer 2

好吧，可以在用户控件中使用 x:Bind，但是您需要在后面添加一些额外的代码。我在我的项目中遇到了同样的问题，你可以在这里看到结果：https : //github.com/AppCreativity/Kliva/tree/master/src/Kliva/Controls

所以您需要做的是，在您的用户控件背后的代码中创建一个指向正确 DataContext 的属性。如果这样做，则可以在控件的 xaml 中使用该 DataContext 的属性：例如：请注意，在控件的构造函数中，您确实需要添加：DataContextChanged += (sender, args) => this.Bindings.Update();因为 datacontext 将根据控件所在的页面而变化用过的！

然后在放置此控件的页面上，您还需要执行相同的操作以使 x:bind 起作用。您将在我关于MainPage.DeviceFamily-Mobile.xaml和MainPage.xaml.cs文件的示例中看到这一点。

希望这可以帮助。