Image control in WPF Stretches Image When Stretch Set to None - wpf

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.

Answer 2

I find I often have to explicitly specify the Width and Height of Image controls to get them to appear correctly:
<Image
Name="imgIcon"
Source="/ChatControls;component/Images/NormalUser.png"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="16"
Height="16"
/>

Answer 3

First of all, your XAML definition of your 171* is a bit odd. Your best approach is to do this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
You need to look into XAML layout passes in order to understand what this is doing.
Secondly, because you're using a dynamic image source (loaded as a URI), it will be streamed so the width during the first layout pass will be 24, but after the image has been streamed, the control will resize dynamically. If you want to enforce sizing, your best bet is to use a border around the image as a 0 width container. Like this
<Border Grid.Column="0" Grid.Row="0" BorderThickness="0" BorderBrush="Black">
<!-- UniformToFill: Scale to completely fill output area.
Aspect ratio is preserved. Cropping may occur.-->
<Image
Source="sampleImages/gecko.jpg"
Stretch="UniformToFill" />
</Border>
Enforcing a width and a height around an image is a shorthanded way of doing this. The other thing you may want to do is to explicitly define the way the source image is loaded like this:
<Image Width="200">
<Image.Source>
<BitmapImage DecodePixelWidth="200"
UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
</Image.Source>
</Image>
Which will not load the full image but will resize before load as opposed to dynamically. For further reference review http://msdn.microsoft.com/en-us/library/ms748873.aspx
I agree with the accepted answer, but I don't think it explains why, it just explains that it works.

Answer 4

It happens because of the image pixels that is dependent on the screen resolution, it should be device independent so that to remains same on any screen resolution
So use this to do so.
<Image Width = "24" Height = "24" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" Stretch = "None"/>
replace Width and Height with the original size of the image
This'll help you