CODEWITHSUNDEEP
wpfimagestretch
sprocket12
sprocket12

Reputation: 5488

Image control in WPF Stretches Image When Stretch Set to None

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.

enter image description here

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

enter image description here

Many thanks in advance.

Upvotes: 4

Views: 14695

Answers (4)

Rahul Saksule
Rahul Saksule

Reputation: 417

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

Upvotes: 1

hbarck
hbarck

Reputation: 2944

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.

Upvotes: 20

Nate Noonen
Nate Noonen

Reputation: 1371

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.

Upvotes: 4

Ross
Ross

Reputation: 4568

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

Upvotes: 4

Related Questions