2009-02-26 19 views
155

Estoy usando algunas imágenes en mi aplicación WPF.¡Mis imágenes son borrosas! ¿Por qué no funciona SnapsToDevicePixels de 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" /> 

embargo, que aparecen poco claros:

Dead link - Blurry WPF Images

Aquí hay una, lado a lado-zoom en la comparación. Un original es de la izquierda:

Dead link - Blurry WPF Image Zoomed

Por qué no esa línea SnapsToDevicePixels="True" a prevenir este problema?

+3

Sus enlaces de imágenes parecen haber roto. Si todavía tiene las imágenes originales, vuelva a cargarlas en stack.imgur. Gracias. –

+0

http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx – ezolotko

+0

Si ninguna de las sugerencias a continuación funciona de inmediato, intente también cambiar el tamaño de la imagen a un factor de 4 en ancho y alto Entonces, en lugar de 179 X 44, intente con 176 X 44. –

Respuesta

199

Es posible que desee considerar probar una nueva propiedad disponible ahora en WPF4. Deje RenderOptions.BitmapScalingMode en HighQuality o simplemente no lo declare.

NearestNeighbor funcionó para mí, excepto que dio lugar a mapas de bits dentados al acercar la aplicación. Tampoco pareció solucionar los fallos técnicos en los que los iconos se dimensionaban de maneras extrañas.

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

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

+3

Más información sobre esta nueva propiedad encontrada aquí: http://blogs.msdn.com/text /archive/2009/08/27/layout-rounding.aspx – Domokun

+4

UseLayoutRendering = "Verdadero" es lo que usé, esto es perfecto para resolver mis imágenes borrosas. ¡Gracias! –

+19

** ¡FINALMENTE! ** UseLayoutRounding debe configurarse de manera predeterminada. Las imágenes aparecen igual que el texto original e incluso en algunos lugares (como ContextMenus, al menos para mí) aparece más nítido que antes. Gracias, Domokun! – grant

0

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

Segundo pensamiento es la paleta de colores, pero con el negro como uno de los colores que no se está procesando correctamente, esto no es tan probable.

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

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

+0

+1 para rechazar los votos negativos injustificados, ya que creo que ofreció algunas sugerencias razonables y solo intentaba ayudar y, lo más importante, no había nada incorrecto en sus sugerencias. – jpierson

69

En lugar de utilizar SnapsToDevicePixels, en su lugar utilicé RenderOptions.BitmapScalingMode y ahora son bonitas y nítidas.

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

Así es como se ve ahora:

Crisp WPF Images http://img13.imageshack.us/img13/9926/crispwpfimages.gif

+0

Además, si su imagen tenía el tamaño exacto especificado en la etiqueta , entonces no tendría que escalarla y debería mostrarla nítidamente. – Bearddo

+0

No estoy seguro de que esto tenga el efecto deseado en un DPI diferente – Dave

+0

Beardo, tanto el gráfico de origen como el son ambos de 20 píxeles por 20 píxeles. Según entiendo, el problema proviene de WPF. Por lo tanto, quiere ignorar la cuadrícula de píxeles del monitor, por lo que su cuadrícula lógica no se alineará perfectamente con la cuadrícula física. –

5

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 el quinto tenía una ligera distorsión en el borde derecho). Lo arreglé aumentando el 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 mencionado por EugeneZ. Es un reemplazo para el control de imagen y hasta ahora me ha funcionado bastante bien. Consulte http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

4

Asegúrese de guardar la imagen en el mismo DPI en que está trabajando su aplicación WPF, 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 cambiaron de tamaño al 100%, se hicieron más grandes o más pequeñas de lo esperado.

Podría ser algo similar.

22

1 de Zack Peterson

estoy usando .Net 3.5 SP1 y parece que la solución más simple para un gran número de imágenes borrosas. No es un gran problema para especificar RenderOptions en el lugar, pero para los componentes 3 ª parte de un estilo de recursos a nivel de aplicación tiene sentido:

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

Trabajado muy bien cuando AvalonDock comenzó a prestar iconos borrosas.

+0

Supongo que te debo una cerveza o cinco ... – EricSchaefer

+0

AvalonDock también me está dando los mismos dolores de cabeza ... y todavía estoy con .Net 3.5 –

2

He encontrado que RenderOptions.BitmapScalingMode = "NearestNeighbor" no funciona para mí. Estoy usando Windows XP x32 con DirectX 9.0c. Como el procesamiento real de WPF se realiza con DirectX, esto podría tener un efecto. Sí tengo anti-aliasing activado 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 ningún efecto en las imágenes. Creo que esto solo afecta a 3D Viewports.

Finalmente, descubrí que el desenfoque se produce con el texto de TextBlocks y con las imágenes. Y la borrosidad solo ocurre en algunos bloques de texto e imágenes, no en todos.

7

El uso de UseLayoutRounding="True" en la ventana raíz funciona en muchos casos, pero encontré un problema al utilizar el control WPF Ribbon. Mi aplicación se basa en las pestañas contextuales que aparecen de acuerdo con lo que está haciendo el usuario y cuando establezco UseLayoutRounding en True, la pestaña contextual no aparece y tampoco la imagen de RibbonButton. Además, la aplicación se congela durante muchos segundos y el ventilador de la CPU comienza a cantar.

El uso de 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 Tabs Contextual Tabs.

+0

UseLayoutRounding = "Verdadero" funcionó para mí. Gracias. http://mikecroteau.wordpress.com/2013/01/20/wpf-net-xaml-blurry-images/ – mcroteau

2

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

Lo que he encontrado para trabajar:

  • asegurarse de que sus dimensiones originales de imagen [] son ​​múltiplos de 2. Esto parece evitar algunos de los problemas de imagen de escala cobardes.
  • A veces también he encontrado que ajustar los márgenes en las imágenes por un píxel o 2 puede evitar el problema.
0

he tratado de usar la RenderOptions.BitmapScalingMode = La alta calidad, parece que es causa algunos problemas en Windows 8.1, así que lo que hice fue correr a través de la herramienta llamada PngOut.exe

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

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

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

2

uso UseLayoutRounding = True a la cima elemento más en su aplicación

Cuestiones relacionadas