Image doesn't bind to the resource. How to use Relativesource for Binding

Question

I am using Binding to fill the contents of a ListView and also an Image. However for some reason the Image doesn't get it's value through binding. If I go like

<Image Source="/Images/LedGreen.png"/>

The image shows up where it should be, however using binding with just substituting the Relative address with a binding argument and handing him the value using a PackUri in the constructor doesn't.

The code is:

<Window.Resources>
    <CollectionViewSource
        x:Key="DeviceList"
        Source="{Binding Path=DiscoveredDevicesList}">

    </CollectionViewSource>
</Window.Resources>
.
.
.
    <ListView
    Grid.Row="1" 
    Width="500"
    HorizontalAlignment="Left"
    Margin="10"
    Grid.Column="1"
    DataContext="{StaticResource DeviceList}"
    ItemsSource="{Binding}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Device name" DisplayMemberBinding="{Binding Path=DeviceName}"/>
                <GridViewColumn Header="Rssi" DisplayMemberBinding="{Binding Path=Rssi}"/>
                <GridViewColumn>
                    <GridViewColumnHeader Content="GPS" />
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image Source="{Binding Path=ImagePath}"/>
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

and the relative property and instructors are:

   public Uri ImagePath { get; set; }

   public MainWindowViewModel()
    {
        ImagePath = new Uri("pack://application:,,,/Images/LedRed.png");
    }

I am guessing since I am using Window.Resources I am facing this problem. However I want to make sure it's not a silly mistake before I scrub it off and do it the other way.

Thanks.

Answer 1

Property ImagePath seems to be located in window's DataContext i.e. MainWindowViewModel. So, you need to traverse to window's DataContext for binding to work.

Use RelativeSource to get the window's DataContext:

<Image Source="{Binding Path=DataContext.ImagePath,
      RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>

Answer 2

Here Image data context is DeviceList, because you are setting DeviceList as date context of list view. But ImagePath Is in MainWindowViewModel. Since MainWindowViewModel is data context in Window you need to refer that data context.

<Image Source="{Binding ImagePath, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>