¡Mis imágenes son borrosas! ¿Por qué no funciona SnapsToDevicePixels de WPF?

Estoy usando algunas imágenes en mi aplicación WPF.

XAML:

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       SnapsToDevicePixels="True"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

Pero, parecen difusos.

¿Por qué esa SnapsToDevicePixels="True"línea no previene este problema?

Es posible que desee considerar probar una nueva propiedad disponible ahora en WPF4 . Dejar el RenderOptions.BitmapScalingModeque La alta calidad o simplemente no declararlo.

NearestNeighbor funcionó para mí, excepto que condujo a mapas de bits irregulares al hacer zoom en la aplicación. Tampoco parecía corregir ningún problema técnico en el que los íconos se dimensionaban de manera extraña.

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

Una propiedad que antes solo estaba disponible en Silverlight ahora ha solucionado todos los problemas de tamaño de Bitmap. :)

En lugar de usar SnapsToDevicePixels, en lugar de eso lo usé RenderOptions.BitmapScalingModey ahora son agradables y crujientes.

XAML:

<Image Name="ImageOrderedList"
       Source="images/OrderedList.png"
       ToolTip="Ordered List"
       Margin="0,0,5,5"
       Width="20"
       Height="20"
       RenderOptions.BitmapScalingMode="NearestNeighbor"
       MouseUp="Image_MouseUp"
       MouseEnter="Image_MouseEnter"
       MouseLeave="Image_MouseLeave" />

+1 para Zack Peterson

Estoy usando .Net 3.5 sp1 y parece la solución más simple para una gran cantidad de imágenes borrosas. No es un gran problema especificar RenderOptions en el lugar, pero para los componentes de terceros tiene sentido un estilo en los recursos de nivel de aplicación:

 <Style TargetType="{x:Type Image}">
    <Setter
        Property="RenderOptions.BitmapScalingMode"
        Value="NearestNeighbor" />
 </Style>

Funcionó bien cuando AvalonDock comenzó a representar iconos borrosos.

El uso UseLayoutRounding="True"de la ventana en la raíz funciona en muchos casos, pero encontré un problema al usar el control WPF Ribbon . Mi aplicación se basa en las fichas contextuales que aparecen de acuerdo a lo que el usuario está haciendo y cuando me puse la UseLayoutRoundinga True, la ficha contextual no se presentaba y la imagen del RibbonButton ninguno. Además, la aplicación se congela durante muchos segundos y el ventilador de la CPU comienza a cantar.

El uso RenderOptions.BitmapScalingMode="NearestNeighbor"en mi imagen corrigió los problemas de representación de la imagen (imagen borrosa y recortada) y es totalmente compatible con el uso de las pestañas contextuales de la cinta de opciones.

RenderOptions.BitmapScalingMode = "NearestNeighbor" funciona bien la mayor parte del tiempo. Sin embargo, ocasionalmente obtendrá fallas gráficas (en mi caso, 4 de 5 imágenes aparecieron bien, pero la quinta tenía una ligera distorsión en el borde derecho). Lo arreglé aumentando mi margen derecho del control de imagen en 1.

Si eso aún no lo soluciona, pruebe el control de clase de mapa de bits anterior que EugeneZ menciona. Es un reemplazo para el control de imagen y hasta ahora me ha funcionado bastante bien. Ver http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Asegúrese de guardar la imagen en el mismo DPI que su aplicación WPF está trabajando, algunos formatos de imagen tienen esta información almacenada como metadatos. No sé si esto resuelve el problema, pero he tenido algunos problemas debido a esto, donde las imágenes redimensionadas al 100% se hicieron más grandes o más pequeñas de lo esperado.

Podría ser algo similar.

use UseLayoutRounding = True para el elemento más alto en su aplicación

Creo que esto es un error (o al menos lo fue). Consulte esta página de intercambio de correo electrónico de soporte de Microsoft para obtener algunas ideas para solucionarlo.

He encontrado que RenderOptions.BitmapScalingMode = "NearestNeighbor" no funciona para mí. Estoy usando Windows XP x32 con DirectX 9.0c. Como el renderizado real para WPF se realiza con DirectX, esto podría tener un efecto. Tengo activado el suavizado para XP con las siguientes entradas de registro:

[HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ Avalon.Graphics] "MaxMultisampleType" = dword: 00000004 "EnableDebugControl" = dword: 00000001

Sin embargo, desactivar aa con estos ajustes no tiene efecto en las imágenes. Creo que esto solo afecta a las vistas 3D.

Finalmente, descubrí que el desenfoque ocurre con el texto de TextBlocks, así como con las imágenes. Y el desenfoque solo ocurre para algunos bloques de texto e imágenes, no para todos.

He descubierto que ninguna combinación de las soluciones sugeridas curaría mi problema de imagen borrosa aparentemente aleatorio. Me gusta que muchos otros no puedan actualizar a .net 4 para usar la UseLayoutRenderingpropiedad.

Lo que he encontrado que funciona:

• Asegúrese de que las dimensiones de su imagen [original] sean múltiplos de 2. Esto parece evitar algunos de los problemas de escalamiento de la imagen funky.
• A veces también descubrí que ajustar los márgenes de las imágenes en un píxel o 2 puede evitar el problema.

Mi primer pensamiento, al leer la pregunta, fue que estaba explotando demasiado la imagen, pero ese no parece ser el caso al mirar la imagen que tiene de la aplicación.

El segundo pensamiento es la paleta de colores, pero con el negro como uno de los colores que no se procesa correctamente, esto no es tan probable.

Si puede descartar por completo los dos anteriores, actualmente estoy perplejo.

Como experimento, puede probar otros formatos gráficos, pero PNG debería estar bien. Tendré que pensarlo un poco más para encontrar una mejor respuesta.

Intenté usar RenderOptions.BitmapScalingMode = HighQuality, parece que causa algunos problemas en Windows 8.1, así que lo que hice fue ejecutarlos a través de la herramienta llamada PngOut.exe

http://advsys.net/ken/utils.htm

Lo que reduce el encabezado de png y también reduce el tamaño, pero sin cambiar la calidad de la imagen.

¡Y ahora todas mis imágenes son perfectas! :-)