How to bind an element property to a property of the ancestor page in UWP

Question

There are two pages: MainPage and AddQuotePage

MainPage.xaml, located in the project root folder has a Frame that loads AddQuotePage.xaml which is located in the Views folder.

MainPage contains the titlebar as a RelativePanel and a SplitView for displaying the hamburger menu and the content in a Frame.

MainPage works like a shell that loads in its Frame different app MainPage has a List<Icon> CategoryIcons property.

AddQuotePage contains a GridView for which I want to set ItemsSource="{Binding MainPage.CategoryIcons}" and set an ItemTemplate like this

<GridView ItemsSource="{Binding MainPage.CategoryIcons}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:Icon">
             <BitmapIcon UriSource="{x:Bind Uri}" />
        </DataTemplate>
    </GridView.ItemTemplate>
 </GridView>

This does not work. In WPF you would have {Binding Path=PathToProperty, RelativeSource={RelativeSource AncestorType={x:Type typeOfAncestor}}} but this doesn't exist in UWP or at least I didn't find it.

How do I reference the property from MainPage so that data binding is valid?

Possible duplicate of [How to do relativesource mode find ancestor (or equivalent) in UWP](http://stackoverflow.com/questions/32861612/how-to-do-relativesource-mode-find-ancestor-or-equivalent-in-uwp) — DotNetRussell, Jul 20 '16 at 03:44

score 0 · Accepted Answer · answered Jul 20 '16 at 06:21

I'm not sure what you want to achieve in AddQuotePage. For different purpose, the answer might be different. CategoryIcons property is related to the ViewModel and usually this shouldn't be in the "shell", but in the ViewModel of AddQuotePage. But if you are just wanting to show CategoryIcons in AddQuotePage, one simple way is that we can define a public static property in MainPage that represent the MainPage itself and then in other page we can use this property to access properties in MainPage. For example:

In MainPage.xaml.cs:

public sealed partial class MainPage : Page
{
    //define a public static property represent the MainPage itself
    public static MainPage Main { get; set; }

    public List<Icon> CategoryIcons { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        ///initialize Main property
        Main = this;
    }

    ...
}

Then in AddQuotePage.xaml.cs, we can set Page.DataContext to MainPage.Main

public AddQuotePage()
{
    this.InitializeComponent();
    this.DataContext = MainPage.Main;
}

And in GridView set Binding like:

<GridView ItemsSource="{Binding CategoryIcons}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:Icon">
             <BitmapIcon UriSource="{x:Bind Uri}" />
        </DataTemplate>
    </GridView.ItemTemplate>
 </GridView>

This is a quote management app. MainPage (which contains the splitview and titlebar) contains properties that hold the quotes items and data that needs to be accessed from app pages in Views folder. In AddQuotePage, I want to be able to change the icon of the category of the quote I want to add. But I want to display this icon whenever I need it in other pages, e.g. when I load Recent Quotes page or other page in Views folder. Sorry for not getting this right away, I am still learning. If you need any other info I will provide it for you. I'll test your solution and see how it goes. — Julien Shepherd, Jul 20 '16 at 11:43

How to bind an element property to a property of the ancestor page in UWP

1 Answers1