WPF Image stretch to fill doesn't stretch to the bounds of it's parents

Question

Here\'s my XAML and how it looks like:

Answer 1

your problem is here

<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
    <Canvas Grid.Row="0" Grid.Column="0" >
        <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
        <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
    </Canvas>                           
</Border>

you have a BorderThickness Attribute which puts the black border around the image, just remove it or set it to 0 and this will solve the problem.

so your code will be

<Border BorderBrush="#202020" CornerRadius="4" Panel.ZIndex="0">
    <Canvas Grid.Row="0" Grid.Column="0" >
        <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
        <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
    </Canvas>                           
</Border>

or

<Border BorderBrush="#202020" BorderThickness="0" CornerRadius="4" Panel.ZIndex="0">
    <Canvas Grid.Row="0" Grid.Column="0" >
        <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
        <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
    </Canvas>                           
</Border>

Answer 2

The problem is that you have the images within a canvas. Basically, any time you put an element in a Canvas panel, you are disregarding the entire layout system. Elements within a canvas do not participate in layout at all. What you want to do is replace the Canvas element with a plain Grid element (you don't need to define rows or columns, it will default to a single row/column.)

EDIT

And actually looking more closely at what you are trying to do, you'll need to make some slight tweaks. Try this.

<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4">
    <Grid>
        <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
        <Image Source="Image/youtube.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="20" Width="20" />
    </Grid>                           
</Border>