Geek asks and answers

Image Management in WPF Stretches an image when the Stretch Set is None

I have an image control inside a grid displaying a 16x16 icon. But for some reason, although I set the properties so that it remains 16x16, it looks stretched.

enter image description here

The 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 a reason for this?

UPDATE 1:

Yes and at runtime: (

enter image description here

Thank you very much in advance.

+3
source share
4 answers

I often have to explicitly specify controls Widthand Heightelements Imageso that they display correctly:

<Image 
  Name="imgIcon" 
  Source="/ChatControls;component/Images/NormalUser.png" 
  VerticalAlignment="Center" 
  HorizontalAlignment="Center" 
  Width="16" 
  Height="16" 
/>
+3
source

, PNG. -, PNG 72dpi, WPF 96 . WPF , png, 133% , , , . gif jpg , LayoutTransform, 0,75 , .

+15

, XAML 171 * . - :

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="24" />
  <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

XAML layout, , .

-, ( URI), , 24, , , , , 0.

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

. , , - :

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

, , . http://msdn.microsoft.com/en-us/library/ms748873.aspx

I agree with the accepted answer, but I don't think this explains why it just explains that it works.

+4
source

This is due to the image pixel, which depends on the screen resolution, it must be independent of the device so that it remains the same at any screen resolution, so use this for this.

<Image Width = "24" Height = "24" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" Stretch = "None"/>

replace the width and height with the original image size This will help you

+1
source

More articles:


All Articles