Bind the scale of a Button to an image - wpf

Question

I have a simple window with an image and a button. When the user resizes the window, I would like the button to be resized with the image in the exact same proportions. Below is an example of the desired behaviour I would like to have. The button around the head of the dog just extends and translates with the image.
I managed to have the above behaviour with a "Path" (above in blue), but I didn't manage to get the same behaviour with a button. I would like to perform some actions when the user clicks on the button.
Here is the xaml code I used for the working "Path" senario:
<Grid>
<Canvas x:Name="polylineCanvas" Grid.Row="1">
<Image x:Name="imgTraining"
Width="{Binding ActualWidth, ElementName=polylineCanvas, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=polylineCanvas, Mode=OneWay}"
Stretch="Uniform"
HorizontalAlignment="Left"
VerticalAlignment="Top">
</Image>
<Path Stroke="Blue" StrokeThickness="3">
<Path.Data>
<PathGeometry x:Name="polyline">
<PathGeometry.Transform>
<ScaleTransform
ScaleX="{Binding ActualWidth, ElementName=imgTraining}"
ScaleY="{Binding ActualHeight, ElementName=imgTraining}"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</Grid>
I tried to apply the same logic by adding a button instead of a Path. In this case, the button streches to the size of the window (but not to the size of the image):
Here is the xaml code I added for the button:
<Button x:Name="buttSelection" Opacity="0.5" Background="#FF000CFF">
<Button.LayoutTransform>
<ScaleTransform
ScaleX="{Binding ActualWidth, ElementName=imgTraining}"
ScaleY="{Binding ActualHeight, ElementName=imgTraining}"/>
</Button.LayoutTransform>
</Button>
Questions:
How could I scale my button in the same proportion as the image?
How could I set the size and position of this button to only be a part of the image (and not to be as big as the image itself)?
Thanks a lot for the support!
PS: I am very new to wpf/xaml, so there is a big chance that I am not doing things in the "intended way" or that there is a completely different solution.

Answer 1

You should put both the Image and the Button in a common Viewbox, which would automatically scale them together. There is usually no need to bind the size of an element to the actual size of another. This is done by using appropriate layout panels.
Inside the Viewbox, there would be a Grid as common parent, and a Canvas to position the Button. The Button Template would contain a Border around a ContentPresenter that could optionally show the Button's Content.
<Grid>
<Viewbox>
<Grid>
<Image x:Name="imageTraining"/>
<Canvas>
<Button x:Name="buttonSelection" Width="200" Height="200"
Canvas.Left="200" Canvas.Top="200">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderThickness="10"
BorderBrush="Blue"
Background="Transparent">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Canvas>
</Grid>
</Viewbox>
</Grid>