将代码隐藏定义的属性绑定到 XAML 中的 DataContext 属性？

Question

我正在尝试将页面代码隐藏中定义的属性绑定到 XAML 中的 ListView.DataContext 属性，但由于某种原因，当我运行应用程序 ListView 时，它并没有按照我想象的方式工作。 DataContext 没有被设置并且保持为空，有人可以帮我吗？

我寻找了一些类似的问题，但其中大多数通过在代码隐藏中手动设置 DataContext 来解决问题，但我想从 XAML 中做到这一点。

MainPage.xaml

<Page
    x:Class="CustomControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel>
        <ListView
            DataContext="{Binding Path=MyMarket, RelativeSource={RelativeSource Mode=Self}}"
            ItemsSource="{Binding Path=Products}"
            Header="{Binding Path=Name}">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Id}"/>
                        <TextBlock Text="{Binding Path=Description}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace CustomControls
{
    public sealed partial class MainPage : Page
    {
        public Market MyMarket { get; private set; }

        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;

            this.MyMarket = new Market
            {
                Name = "My Market",
                Products = new ObservableCollection<Product>
                {
                    new Product { Id = 123, Description = "qwerty" },
                    new Product { Id = 234, Description = "wertyu" }
                }
            };
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Description { get; set; }
    }

    public class Market
    {
        public string Name { get; set; }
        public ObservableCollection<Product> Products { get; set; }
    }
}

Answer 1

您必须绑定到页面，因此您必须在 XAML 的最顶部执行此操作：

<Page
[..]
DataContext="{Binding MyMarket, RelativeSource={RelativeSource Self}}">

那么你应该可以像这样挂钩：

<ListView
    ItemsSource="{Binding Path=Products}"
    Header="{Binding Path=Name}">
[..]

现在只需切换构造函数中的行，以便您的元素在页面构建之前就已经存在：

this.MyMarket = new Market
{
    Name = "My Market",
    Products = new ObservableCollection<Product>
    {
        new Product { Id = 123, Description = "qwerty" },
        new Product { Id = 234, Description = "wertyu" }
    }
};
this.InitializeComponent();

this.NavigationCacheMode = NavigationCacheMode.Required;

您应该考虑稍后使用 Viewmodel 类。

Answer 2

{RelativeSource Mode=Self} 指的是当前元素，在本例中为ListView，所以它不是你想要的。最简单的方法是给根元素命名（Page），例如"root"，并在绑定中指定ElementName=root。