2011-04-30 16 views
5

[imgur imagen eliminada]¿Cómo hacer que la imagen no se estire?

El icono de la izquierda es el resultado de este código:

<Button Height="23" HorizontalAlignment="Left" Margin="12,276,0,0" Name="button1" VerticalAlignment="Top" Width="75"> 
     <StackPanel Orientation="Horizontal"> 
      <Image Source="Resources/add.png" Stretch="None" /> 
      <TextBlock Margin="5,0,0,0" Text="Add" /> 
     </StackPanel> 
    </Button> 

El de la derecha es la imagen original colocado junto a él usando Photoshop. Parece que el que se agrega mediante el código se estira con un píxel y causa cierta distorsión. ¿Cómo lo evito?

+0

¿Qué ocurre si establece explícitamente las propiedades Ancho y Alto en xaml? – Eugen

+0

@Eugen: Intenté eso también. No cambia nada Si lo configuro un píxel menos, se convierte en el tamaño correcto, pero sigue estando borroso debido a la escala. – mpen

+0

La imagen está rota ... – itsho

Respuesta

0

que esto esté arreglado para mí:

En su elemento raíz (es decir, la ventana principal) añadir esta propiedad: UseLayoutRounding="True".

credit

8

Stretch="None" debería hacer exactamente eso. Si hay una diferencia en la forma en que se muestra la imagen, esto puede deberse a que los píxeles terminan "en el borde".

Puede intentar configurar SnapsToDevicePixels="True" para evitar esto.

+0

No ... eso tampoco lo hizo. – mpen

+0

¿Qué hay de la configuración de la propiedad adjunta: 'RenderOptions.BitmapScalingMode =" HighQuality "' (o algún otro valor para el caso)? –

+0

@HB: no debería estar escalando en absoluto, pero sin embargo, lo intentó, todavía se ve igual. – mpen

3

Realmente no puedo ver lo que sucede en su ejemplo, pero una causa muy común de este tipo de problema con WPF es el valor DPI en el archivo PNG que es distinto de 96 (a menudo 72 si proviene de algo con un legado de Mac).

+0

Bueno, ¿cómo puedo verificar cuál es el valor de DPI, y cómo lo soluciono? Es un icono no editado del conjunto de iconos de seda de famfamfam. – mpen

+1

@Mark, en Photoshop, use "Imagen/Cambiar tamaño ..." y primero desmarque "Volver a muestrear". Luego ingrese el nuevo valor de píxeles/pulgadas y presione 'Aceptar'. Las dimensiones en píxeles de su imagen no se modificarán, pero los nuevos metadatos se escribirán cuando vuelva a guardar el archivo PNG. De hecho, tener ppp no ​​igual a 96 significa que WPF no usará el tamaño de píxel nativo cuando Image.Stretch = "None". Muchas gracias a Will por esta increíble solución. –

+0

Si alguien necesita una herramienta para la corrección de DPI: puede usar [Paint.NET] (http://www.getpaint.net), que es gratis y fácil de usar para este propósito. – Beauty

1

En realidad, NearestNeighbor va a permitir que el motor para saltar sobre píxeles en la imagen de origen al escalar. Si hay una opción para Linear, eso puede funcionar mejor, ya que significa escalar la lectura píxel por píxel desde la imagen de origen.

+0

Tiene toda la razón, y si lee los comentarios que dejé debajo de la respuesta aceptada, verá que eso también descubrí. Marqué que era correcto porque su sugerencia de 'UseLayoutRounding' lo corrige. – mpen

1

que sólo han logrado resolver esto estableciendo explícitamente la anchura o la altura. Así que si usted sabe la imagen es de 48 píxeles de altura hacen de esta manera:

<Image Source="myImage.png" Height="48" UseLayoutRounding="True"/> 
1

Adición de estiramiento = Ninguno kepts la imagen de rezising

<ImageBrush ImageSource="rtgEnhanced.png" AlignmentX="Left" AlignmentY="Bottom" Stretch="None"></ImageBrush> 
1

imágenes PNG puede tener algo que se llama un trozo Phys almacenada en ellos. Este fragmento define el DPI en el que se pretende mostrar la imagen. Si el DPI de la imagen no coincide con el DPI del monitor, WPF lo estirará para que aparezca en el tamaño "deseado". Esto generalmente (al menos para mí) NO es para nada lo que pretendía y causa mucha frustración.

Para eliminar el estiramiento "previsto", una opción es eliminar el fragmento de pHYs del archivo PNG.

Puede usar una herramienta como TweakPNG para inspeccionar y eliminar pHYs.

O bien, simplemente puede guardar sus imágenes con el DPI correcto codificado en ellas, o ninguna en absoluto, suponiendo que su software de edición de imágenes lo admite.

Cuestiones relacionadas