WPF Image растягивается, чтобы заполнить, не простирается до границ его родителей

Question

Вот мой XAML и его видграница.

Почему он этого не делает?

Answer 1

Проблема в том, что у вас есть изображения на холсте.По сути, всякий раз, когда вы помещаете элемент на панель Canvas, вы игнорируете всю систему макетов.Элементы внутри холста вообще не участвуют в макете.То, что вы хотите сделать, это заменить элемент Canvas простым элементом Grid (вам не нужно определять строки или столбцы, по умолчанию он будет содержать одну строку / столбец.)

EDIT

И, на самом деле, если присмотреться более внимательно к тому, что вы пытаетесь сделать, вам нужно сделать несколько небольших изменений.Попробуйте это.

<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>

Answer 2

ваша проблема здесь

<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>

у вас есть атрибут BorderThickness, который помещает черную рамку вокруг изображения, просто удалите его или установите 0, и это решит проблему.

твой код будет

<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>

или

<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>