'Images Misplacing/Streching in WPF Xaml

I have a small issue with WPF and XAML

Upon adding a Image, It seems to look normal using the Build Action: Resource / And Copy Output Directory: Copy if newer, Running the program reveals the image shows fine however it is sometimes misplaced and streched.

Here is my Code:

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Image Source="/img/1-1920x1080-1d35c774c327a15fe78e88e697e14091.png" Stretch="Fill"/>
        <Image Margin="0,0,689,326" Source="/img/7Reverse.png" Stretch="Fill"/>

    </Grid>
</Window> ```
c++sharpwpfimagexaml


Solution 1:[1]

Quoting @Clemens:

Stretch=Fill on the Images means that they are not uniformly filling the available space i.e. not keeping the aspect ratio of their Source bitmaps. Set Stretch to Uniform or UniformToFill. The Margin on the second Image is pointless. Set HorizontalAlignment to Left and VerticalAlignment to Top. An assembly resource file with Build Action Resource does not need to be copied to the Output Directory.

Quoting the OP:

You can group it into grid and it displays properly.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions