带有编译绑定的HubSection

时间:2015-08-14 03:42:33

标签: c# xaml windows-10 uwp compiled-bindings

我试图掌握新编译的绑定,但在开始时我被这个简单的问题所阻止。

Hub控制一个HubSection。此部分的内容是ItemsControl,需要绑定到视图模型'可观察的集合。我无法按照我的预期使这个绑定工作。

<Pivot x:Name="rootPivot" Style="{StaticResource TabsStylePivotStyle}">
    <PivotItem>
        <Hub>
            <HubSection Header="News">
                <DataTemplate x:DataType="local:HomePage">
                    <ItemsControl ItemsSource="{x:Bind ViewModel.NewsItems, Mode=OneWay}" />

ViewModel属性只是一个属性,在InitializeComponents()调用之前被实例化。 NewsItems是视图模型中的可观察集合,在页面加载后填充 - 异步(Web请求)。

我在这里做错了什么?

编辑:代码隐藏

HomePage.xaml.cs

/// <summary>
/// Home pag view.
/// </summary>
public sealed partial class HomePage : Page
{
    /// <summary>
    /// Initializes a new instance of the <see cref="HomePage"/> class.
    /// </summary>
    public HomePage()
    {
        // Retrieve view model
        this.ViewModel = ViewModelResolver.Home;

        // Trigger view model loaded on page loaded
        this.Loaded += (sender, args) => this.ViewModel.LoadedAsync();

        this.InitializeComponent();
    }

    /// <summary>
    /// Gets the view model.
    /// </summary>
    /// <value>
    /// The view model.
    /// </value>
    public IHomeViewModel ViewModel { get; }
}

HomePageViewModel.cs

/// <summary>
/// Home view model.
/// </summary>
public sealed class HomeViewModel : IHomeViewModel
{
    /// <summary>
    /// Occurs on page loaded.
    /// </summary>
    public async Task LoadedAsync()
    {
        // Retrieve news items
        var news = await new NewsService().GetNewsAsync();
        foreach (var newsItem in news)
            this.NewsItems.Add(newsItem);
    }

    /// <summary>
    /// Gets the news items.
    /// </summary>
    /// <value>
    /// The news items.
    /// </value>
    public ObservableCollection<IFeedItem> NewsItems { get; } = new ObservableCollection<IFeedItem>();
}

1 个答案:

答案 0 :(得分:4)

这确实是一个有趣的问题。我想问题是,与典型的DataTemplate不同,如下所示(请参阅其父ListView绑定到某些已知数据Model.Items

<ListView ItemsSource="{x:Bind Model.Items}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="model:Item">
            <Grid>
                <TextBlock Text="{x:Bind Name}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

您的顶级DataTemplate但是,不知道数据的来源。

因此,解决方法是告诉HubSection绑定正确的数据 - 在本例中为HomePage.xaml.cs实例。因此,请尝试将此添加到您的Hub

<Hub DataContext="{x:Bind}">

或者只需添加

this.InitializeComponent();
this.DataContext = this;

无论哪种方式都可以解决您的问题。