Stretch image inside canvas

Question

I would like to have an image inside the canvas and fit it to the window. When canvas is empty, it works fine (the size of the canvas changes within the window), however, when I add an image to it, the canvas is no longer suitable for the window, although I have Stretch = "Uniform" applied to the image. I will illustrate this behavior below. Unfortunately, using a canvas is a requirement because I draw shapes above it. Any ideas please?

Good

<Window x:Class="ImageCropper.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window3" Height="300" Width="300"> <Border BorderThickness="3" BorderBrush="Red"> <Canvas Background="Blue"> </Canvas> </Border> </Window> 

Bad

 <Window x:Class="ImageCropper.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window3" Height="300" Width="300"> <Border BorderThickness="3" BorderBrush="Red"> <Canvas Background="Blue"> <Image Source="asd.png" Stretch="Uniform" /> </Canvas> </Border> </Window> 

Answer 1

I don’t think stretch works great with canvas. See This Answer: fooobar.com/questions/1074590 / ...

However, I managed to get it to work with the following:

 <Border BorderThickness="3" BorderBrush="Red"> <Canvas Background="Blue" Name="canvas1"> <Image Source="asd.png" Width="{Binding Path=ActualWidth, ElementName=canvas1}" Height="{Binding Path=ActualHeight, ElementName=canvas1}" Stretch="Uniform"/> </Canvas> </Border>