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

Question

I'm trying to bind a property that was defined in Page code-behind to a ListView.DataContext property in XAML, but for some reason it's not working in the way that I thought, when I run the app the ListView.DataContext is not being set and remains null, can someone please help me with that?

I looked for some similar questions but most of them solve the problem by setting the DataContext manually in the code-behind, but I'd like to do that from 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

{RelativeSource Mode=Self} refers to the current element, in this case ListView , so it's not what you want. The easiest way is to give a name to the root element (the Page ), for instance "root" , and specify ElementName=root in your binding.

Answer 2

You have to bind to the page, so you have to do that at the very top of your XAML:

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

Then you should be able to hook into that like this:

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

Now just switch the lines in your constructor so that your elements are already there before the page is built:

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;

You should consider using Viewmodel classes later on.