使用x：在UWP中的GridView的ItemTemplate布局用户控件内绑定 [英] Using x:Bind inside the GridView's ItemTemplate layout User Control in UWP

问题描述

在通用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 =FeaturedItemsGrid.Row =0> 
< GridView.ItemTemplate> 
< DataTemplate x：DataType =data：NewsItem> 
< Grid Name =mainPanelHorizo​​ntalAlignment =StretchWidth =500> 
 < TextBlock Text ={x：Bind Headline}/> 
< / Grid> 
< / DataTemplate> 
< /GridView.ItemTemplate> 
< / GridView> 
 $ b $ ... 
  

图片和标题绑定很好尽管他们没有被正确地设计）。但是，相反，我认为我需要绑定到用户控件以获得我想要的样式选项，控制调整esp。当使用Visual State Triggers并简化XAML（至少，这是我建议的技术）。

所以，我添加了一个新的用户控件项目（FeaturedItemControl.xaml），并复制到DataTemplate的子Grid中：

 < UserControl ...> 
< Grid Name =mainPanelHorizo​​ntalAlignment =StretchWidth =500> 
 < TextBlock Text ={x：Bind Headline}/> 
< / Grid> 
< / UserControl> 
  

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

 < GridView Name =FeaturedItemsGrid.Row =0> 
< GridView.ItemTemplate> 
< DataTemplate x：DataType =data：NewsItem> 
< local：FeaturedItemControl Horizo​​ntalAlignment =StretchVerticalAlignment =Stretch/> 
< / DataTemplate> 
< /GridView.ItemTemplate> 
< / GridView> 
  

但是，我得到Image和Headline属性的错误消息：无效的绑定路径'标题'： Property'Headline'在类型'FeaturedItemControl'上找不到。

我尝试了一些东西，但是我只是在不知情的情况下抛出代码正在做。任何帮助将不胜感激。

感谢您的关注。

解决方案

那么可以在用户控件中使用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 files。

希望这会有所帮助。

In the Universal Windows Platform API, how do I use x:Bind inside of a User Control (intended to be the layout for a GridView's ItemTemplate) to bind to instance properties of a GridView's ItemSource?

Background

I'm trying to re-create the layout found in Windows 10 stock apps like Sports, News, Money, etc.

I'm using a two GridViews for the main area of the app; one for "featured articles" (2 large photos w/ headlines) and one for all the other articles (smaller photos w/ headlines).

I'm able to bind to a data source that I supply in the code behind (a List where NewsItem is a POCO with a Image and Headline property) Here's the pertinent parts of the 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>

....

The Image and Headline bind just fine (even though they've not been styled correctly). However, instead I think I need to bind to a User Control to get the styling options I want, control over resizing esp. when using Visual State Triggers and to simplify the XAML in general (at least, this was the technique suggested to me.)

So, I added a new User Control to the project (FeaturedItemControl.xaml), and copied in the DataTemplate's child Grid:

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

And then back in the MainPage.xaml, I change the DataTemplate to reference the new FeaturedItemControl:

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

However, I get the error message for both Image and Headline properties: Invalid binding path 'Headline': Property 'Headline' can't be found on type 'FeaturedItemControl'.

I've tried a few things but am flailing just throwing code at the problem without understanding what I'm doing. Any help would be greatly appreciated.

Thank you for your kind attention.

解决方案

Well it's possible to use x:Bind in user controls, but you'll need to add some extra code behind. I encountered the same problem in my project, you can see the result here : https://github.com/AppCreativity/Kliva/tree/master/src/Kliva/Controls

So what you need to do is, create a property in the code behind of your user control that points to the correct DataContext. If you do that, you can use properties of that DataContext in the xaml of your control: for example: Do note that in the constructor of your control you do need to add: DataContextChanged += (sender, args) => this.Bindings.Update(); because the datacontext will change depending on the page where your control is used!

Then on the page where you are placing this control, you'll also need to do the same to enable the x:bind to work. You'll see this in my example on the MainPage.DeviceFamily-Mobile.xaml and MainPage.xaml.cs files.

Hope this helps.

这篇关于使用x：在UWP中的GridView的ItemTemplate布局用户控件内绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！