Question

Bellow is the code behind and the Xaml for a demo app to review databing and wpf.
The problem is binding Store.ImagePath property to the person node is not working. That is the image is not showing.

<Image Source="{Binding Path=Store.ImagePath, RelativeSource={RelativeSource AncestorType={x:Type local:Store}}}" />

Here is the code-behind

namespace TreeViewDemo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Customers customers = new Customers();
        customers.Users = new List<Person> 
        { 
            new Person { Name = "John"},
            new Person { Name = "Adam"}, 
            new Person { Name = "Smith"}
        };

        Store store = new Store();
        store.AllCustomers.Add(customers);
        this.DataContext = store;
    }
}

public class Store : INotifyPropertyChanged
{
    string imagePath = "imageone.png";

    public Store()
    {
        AllCustomers = new ObservableCollection<Customers>();
    }

    public string StoreName
    {
        get
        {
            return "ABC Store";
        }
    }
    public ObservableCollection<Customers> AllCustomers
    {
        get;
        set;
    }
    public string ImagePath
    {
        get
        {
            return imagePath;
        }
        set
        {
            if (value == imagePath) return;
            imagePath = value;

            this.OnPropertyChanged("ImagePath");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
} 
public class Customers
{
    public string Label
    {
        get
        {
            return string.Format("People({0})", Users.Count());
        }
    }
    public List<Person> Users
    {
        get;
        set;
    } 
}
public class Person : INotifyPropertyChanged
{
    public string Name
    {
        get;
        set;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
}

and here is the Xaml.

<Window x:Class="TreeViewDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TreeViewDemo"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources >
   <DataTemplate DataType="{x:Type local:Person}" x:Key="personKey" >
        <StackPanel Orientation="Horizontal" >
            <Image Source="{Binding Path=Store.ImagePath, RelativeSource={RelativeSource AncestorType={x:Type local:Store}}}" />
            <TextBlock Text="{Binding Name}" />
        </StackPanel>
    </DataTemplate>
    <HierarchicalDataTemplate x:Key="customerKey" ItemsSource="{Binding Users}" ItemTemplate="{StaticResource personKey }" >
        <TextBlock Text="{Binding Label}" FontWeight="Bold"/>
    </HierarchicalDataTemplate>
</Window.Resources>
<Grid>
    <Canvas>
        <Button HorizontalAlignment="Left" DockPanel.Dock="Top" Height="29" Width="112" Canvas.Left="123" Canvas.Top="5">Image one</Button>  <Button HorizontalAlignment="Left" VerticalAlignment="Top" DockPanel.Dock="Top" Height="28" Width="119" Canvas.Left="249" Canvas.Top="7">Image two</Button>
        <TreeView  HorizontalAlignment="Stretch"  Name="treeView1" VerticalAlignment="Stretch" 
               ItemsSource="{Binding .}"  Height="260" Width="363" Canvas.Left="81" Canvas.Top="45">
            <TreeViewItem ItemsSource="{Binding AllCustomers}" ItemTemplate="{StaticResource customerKey}" Header="{Binding StoreName}"></TreeViewItem>
        </TreeView>
    </Canvas>
</Grid>
</Window>

All files are in the same directory.

Thanks

Answer 1

A relative source is used to look up an object in the visual tree. You’re asking it to find the nearest Store in the visual tree. Since a Store cannot even be in the visual tree, the lookup will fail and yield null. What you actually want is the DataContext of the root Window, since that is where your Store is held:

<Image Source="{Binding DataContext.ImagePath, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />