Image control in WPF Stretches Image When Stretch Set to None

Question

I have an image control inside a grid displaying a 16x16 icon. But for some reason even though I set the properties so it would remain 16x16 it looks stretched.

Code :

<UserControl x:Class="ChatControls.UserListItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" d:DesignHeight="28" d:DesignWidth="132">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="24" MinWidth="24" MaxWidth="24" />
            <ColumnDefinition Width="171*" />
        </Grid.ColumnDefinitions>
        <Image Name="imgIcon" Source="/ChatControls;component/Images/NormalUser.png" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" />
        <Label Content="Muhammad[A]" Grid.Column="1" Name="lblNick" VerticalContentAlignment="Center" Padding="8,5,5,5" />
    </Grid>
</UserControl>

Is there any reason for this?

UPDATE 1:

Yes at runtime also :(

Many thanks in advance.

Answer 1

Actually, I've seen that regularly with PNG images. It seems that the default resolution for PNG is 72dpi, while the default screen resolution in WPF is 96dpi. WPF tries to take this into account by rendering png bitmaps scaled to 133% of their pixel size, which is technically correct but normally not what the user wants. You can either use a gif or jpg instead, or you can combine the image with a LayoutTransform scaling it to 0.75 of its size, or just stick with setting the size of the image control explicitly.