WPF binding to Ancestor Source

Question

I'm trying to show a ToolTip with the hovered image but with different dimensions.

I tried this:

<Image Source="c:\Pictures\Airplane.jpg" Width="50" Height="50">
    <Image.ToolTip>
        <Image Width="300" Height="300" 
               Source="{Binding Path=Source, RelativeSource={RelativeSource AncestorType=Image, AncestorLevel=1}}
    </Image.ToolTip>
</Image>

The above makes a bigger image on hover but the image content is blank, probably the binding didn't work.

After hours I think I need help... what am I missing?

_{I don't want other solutions to the problem like this answer as I'm only trying to practice my binding skills, thanks.}

Answer 1

Ok i got it to work, my initial thought was correct: RelativeSource won't work because the tooltip is not part of the visual tree. I thought ElementName would work, but it seems WPF creates a new name namescope of some sort (not sure). So the only way to get it to work, was to use the DataContext as "proxy" between the two visual trees. You could also use a viewmodel with the proper informations.

<Image x:Name="myImage" Source="c:\Pictures\Airplane.jpg" DataContext="{Binding RelativeSource={RelativeSource Self}}" Width="50" Height="50">
    <Image.ToolTip>
        <Image Width="300" Height="300" Source="{Binding Path=Source}"/>
    </Image.ToolTip>
</Image>