Problema de fuentes borrosas de WPF: soluciones


153

El problema se describe y se demuestra en los siguientes enlaces:

Explicación: Claridad del texto en WPF . Este enlace tiene comparación de fuentes.

Me gustaría recopilar todas las soluciones posibles para este problema. Microsoft Expression Blend usa WPF pero las fuentes parecen legibles.

  • Fondo oscuro como en Microsoft Expression Blend
  • Aumentar el tamaño de fuente y cambiar la fuente (Calibri ...) [enlace]
  • Incrustar formularios de Windows [enlace]
  • Utilice GDI + y / o la clase TextRenderer de Windows Forms para representar el texto en un mapa de bits y luego renderice ese mapa de bits como un control WPF. [enlace]

¿Hay más soluciones?

Esto se solucionará en VS2010 (y WPF4) beta 2

¡PARECE QUE SE HA RESUELTO FINALMENTE!

ComputerZen.com de Scott Hanselman: WPF y borrosidad del texto, ahora con total claridad


VS2010RC es totalmente inutilizable para mí mpdreamz.nl/vs2010RC-blur.png
Martijn Laarman

VS2010RC en mi máquina se ve mucho mejor que en su imagen, en realidad con fondo blanco es muy bueno pero todavía apesta con fondo oscuro.
Robert Vuković

¿Encontró alguna solución para este problema? En realidad, tengo el mismo problema aquí en mi solicitud y estoy usando WPF 3.5 con
VS2010

Los últimos 3 enlaces están muertos.
SHIN JaeGuk

Respuestas:


107

Experiencia técnica

Hay un artículo detallado sobre la representación de texto de WPF de uno de los administradores de programas de texto de WPF en windowsclient.net: Claridad de texto en WPF .

El problema se reduce a WPF que necesita un renderizador de fuentes de escala lineal para animaciones fluidas. Pure ClearType, por otro lado, requiere bastante libertad con la fuente para empujar los tallos verticales al siguiente píxel.

La diferencia es obvia si uno compara el patrón clásico de "cascada". WinForms en la parte inferior izquierda, WPF en la parte superior derecha:

Si bien tampoco soy fanático de las idiosincrasias de representación de fuentes de WPF, puedo imaginar el clamor si las animaciones saltaran como lo hacen en la cascada Winforms.

Jugando con el registro

De especial interés para mí fue el enlace al artículo de MSDN " Configuración de registro ClearType ", que explica los posibles ajustes del lado del usuario en el registro:

  • Nivel ClearType: cantidad de sugerencias de subpíxeles
  • Nivel gamma
  • Estructura de píxeles: cómo se organizan las franjas de color en un píxel de visualización
  • Nivel de contraste del texto: ajusta el ancho de los glifos para hacer que la fuente sea más pesada

Jugar con estas configuraciones realmente no mejoró el problema subyacente, pero puede ayudar al reducir el efecto de sangrado del color para usuarios sensibles.

Otro enfoque

El mejor consejo que dio el artículo de Text Clarity fue aumentar el tamaño de la fuente y cambiarla. Calibri funciona para mí mejor que la interfaz de usuario estándar de Segoe. Debido a su popularidad como fuente web, también probé Verdana, pero tiene un salto de peso desagradable entre 14pt y 15pt, que es muy visible al animar el tamaño de fuente.

WPF 4.0

WPF 4 tendrá un soporte mejorado para influir en la representación de las fuentes. Hay un artículo en el blog de texto de WPF que explica los cambios. Lo más destacado, ahora hay (al menos) tres tipos diferentes de representación de texto:

comparación de representación de texto

<grumble> Eso debería ser suficiente cuerda para cada diseñador. </grumble>


11
excelente explicación, +1. Probablemente explica por qué Flash también tiene una representación de fuente tan horrible.
Jeff Atwood

1
Si. Esa es una buena explicación, pero aún desearía que hubiera una forma de activar las sugerencias de fuentes para una buena apariencia cuando sabes que no vas a animar. Supongo que esto implicaría una escala dada para la que está optimizando la sugerencia. Este tipo de cosas hace que WPF me parezca todavía una versión beta.
PeterAllenWebb

No es que la variante "escalable" no use sugerencias de fuente, es solo que WPF no se optimiza para golpear la cuadrícula de píxeles, como ClearType lo hace. Podría decirse que SnapToDevicePixels debería funcionar para texto, pero esto siempre tendría que heredarse porque un control no puede saber si se puede ajustar o no.
David Schmitt

2
Especialmente relevante es la propiedad adjunta TextOptions.TextFormattingMode ( msdn.microsoft.com/en-us/library/ee169597.aspx ). WPF4 y Silverlight también tienen las propiedades UseLayoutRounding ( msdn.microsoft.com/en-us/library/dd783605.aspx ) y SnapsToDevicePixels ( msdn.microsoft.com/en-us/library/… ).
Pat

@Todo: no puedo encontrar una manera de deshabilitar el suavizado de texto en WPF3.5 y, como resultado, el texto de la etiqueta o el botón se ve realmente mal. Idealmente, me gustaría deshabilitar el suavizado global para las fuentes. ¿Cómo puedo lograr esto?
SharpUrBrain

128

.NET 4 finalmente tiene una solución para la pobre calidad de representación de texto de WPF, pero está bien oculto. Establezca lo siguiente para cada ventana:

TextOptions.TextFormattingMode="Display"

El valor predeterminado es "Ideal", que no es lo que implica el nombre.

Hay otras dos opciones en TextOptions, a saber, TextHintingMode y TextRenderingMode, pero ambas tienen valores predeterminados razonables.


Todas. Gracias. Eso me ayuda a resolver el problema, pero solo necesitas definir eso una vez en el contenedor como <grid>
Peter Du

Sí, y si lo configura en una ventana, es válido para todo lo que contenga esa ventana.
Helge Klein

Pasé mucho tiempo buscando esto, en toneladas de sitios y blogs, que siguen y siguen sobre cuánto mejor es el formato de texto en VS2010 RTM / .Net 4 (¡estoy de acuerdo, lo es!). Pero a ninguno de ellos le importó mencionar cómo podría hacer que las aplicaciones WPF que construye con él, se vean tan bien también. ¿Por qué está esa propiedad tan bien escondida? Muchas gracias.
M-Peror

55
Todo lo que quiero es esto! Realmente no me importa cuán sofisticado sea el renderizado de WPF, las fuentes son inaceptables para cualquiera.
Jerry Liang

1
"Ideal" funciona para mí, en lugar de "Mostrar". El proyecto está en .NET 4.6.2. Tal vez arreglaron el nombre confuso.
Joe

40

Me encontré con un problema el otro día cuando utilicé un borde que tenía un efecto DropShadowEffect aplicado. El resultado fue que todo el texto dentro de ese borde era extremadamente borroso. No importa si el texto estaba dentro de otros paneles o directamente debajo del borde: cualquier bloque de texto que sea hijo del padre y que tenga un efecto aplicado parece verse afectado.

La solución a este caso particular fue no poner cosas dentro del borde que tengan efectos, sino usar una cuadrícula (o cualquier otra cosa que permita poner contenido uno encima del otro) y colocar un rectángulo en la misma celda que el texto (es decir como un hermano en el árbol visual) y poner los efectos en eso.

Al igual que:

<!-- don't do this --->
<Border>
     <Border.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Border.Effect>
     <TextBlock Text="This Text Will Be Blurry" />
</Border>

<!-- Do this instead -->
<Grid>
  <Rectangle>
     <Rectangle.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Rectangle.Effect>
  </Rectangle>
  <TextBlock Text="This Text Will Be Crisp and Clear" />
</Grid>

Esto hizo el truco muy bien. Un poco hack, pero mejor que perder el tiempo con la configuración, etc. Buena. Gracias. Sin embargo, una cosa que tenía que hacer era establecer el relleno del rectángulo en algo. Tal vez esto fue solo mi configuración sin embargo.
HAdes

Sí, tienes razón ... el rectángulo es por defecto transparente, lo que hace que la sombra parezca extraña.
Isak Savo

esto no está sucediendo en mi aplicación de muestra, estoy usando WPF 3.5
SharpUrBrain

@SharpUrBrain: ¿qué no está pasando? ¿Sigue siendo borroso incluso después de usar mi segundo ejemplo?
Isak Savo

Sí, todavía está borroso después de usar su segundo ejemplo también
SharpUrBrain


6

SnapToDevicePixels solo se aplica a formas WPF (líneas, etc.), no al renderizador de texto.

No hay una solución conocida para este problema. Según Microsoft, el comportamiento es "por diseño".

También vea este hilo en los foros de Microsoft que discute los problemas: ha recibido algunas respuestas de muchachos de MS que aclaran su posición sobre el tema.


Se corrigió en WPF 4 utilizando la propiedad adjunta TextOptions.TextFormattingMode ( msdn.microsoft.com/en-us/library/ee169597.aspx ).
Pat

1
El nombre de la propiedad es "SnapsToDevicePixels" y no "SnapToDevicePixels" como está escrito.
Nir Kornfeld

6

Desde el punto de vista de un desarrollador, la única "solución" conocida hasta la fecha es usar GDI + y / o la clase TextRenderer de Windows Forms para representar el texto en un mapa de bits y luego representar ese mapa de bits como un control WPF. Aparte de las obvias implicaciones de rendimiento, esto no alivia el problema para las aplicaciones existentes.

Ahora he creado un ticket de Microsoft Connect para este problema (para mi sorpresa, a pesar de toda la negatividad, no hubo un informe de error real en el rastreador designado).

Dado que ese es uno de los canales oficiales para comunicar solicitudes y preguntas a Microsoft, también recomendaría que lo revise para obtener una respuesta más rápida. Al menos, si desea que el problema se aborde de una forma u otra, votar por ese ticket allí y / o validar el problema ayudará a llamar la atención de los PM e ingenieros de Microsoft sobre este problema, y ​​posiblemente elevará su prioridad percibida.


6

No lo veo como un error, pero la configuración predeterminada es realmente muy molesta. Aquí hay una comparación de todas las combinaciones de

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixels no hace ninguna diferencia en la representación de texto.

http://i.stack.imgur.com/cS3S2.png

Yo prefiero:

TextOptions.TextRenderingMode="Auto"
TextOptions.TextFormattingMode="Ideal"
RenderOptions.ClearTypeHint="Auto"

donde las líneas verticales nunca son borrosas.

La fuente utilizada es Open Sans Light, que puede ser realmente hermosa si se usa bien, como en el último TeamViewer.

Para aquellos que usan Mahapps.Metro, el problema es TransitioningContentControl https://github.com/MahApps/MahApps.Metro/issues/889


4

Acabo de probar VS2010 beta, que se hace todo en WPF, y sufre MALO por el problema de la fuente borrosa. Particularmente en la información sobre herramientas.

Eso parece dar alguna evidencia de que WPF4 de hecho no resolverá el problema (en todo caso, se ve peor)


3
Estoy presentando errores contra VS2010B1 para cada lugar en la interfaz de usuario, el texto está borroso. Las sugerencias sobre herramientas son casi cómicamente malas, estoy de acuerdo. Dado lo explícitamente que se ha dicho que esto se solucionaría en WPF4, solo puedo esperar que no haya sido suficiente para esta versión beta.
Will Dean

4

Wow, no puedo creer que finalmente haya podido leer mis fuentes WPF. Y tampoco puedo creer que no haya un cuadro de diálogo de opción para facilitar estos cambios, mientras que los valores predeterminados son horribles en mi pantalla.

Esta configuración de registro (en decimal) funcionó para mí y se acerca más a mi fuente normal de cleartype:

  • ClearTypeLevel: 10 (principalmente alias en escala de grises)
  • GammaLevel: 1300 (una gamma más alta hizo que la fuente fuera demasiado delgada y estaba viendo los colores en el alias)

3

Dicen que "SnapToDevicePixels = true" funciona, pero nunca he visto ningún buen resultado.

Combato el texto borroso cambiando a una fuente diferente.

Obviamente, esta no es una solución al problema, sin embargo, así es como he trabajado para solucionarlo.


Acabo de comparar un TextBlock con SnapToDevicePixels = "true" con uno sin y no hubo diferencia con la fuente Segoe UI en 12duis. ¿Puedo preguntar qué fuentes usas?
David Schmitt

También mejoramos la situación cambiando nuestra fuente. La fuente que elegimos fue Avenir (no creo que esté instalada por defecto, al menos no en Windows XP).
Cplotts

0

Si prefiere usar una clase base de C # para personalizar ventanas para su aplicación (o ahora tiene una razón para hacerlo), así es como puede configurar el formato de texto para usar el atractivo modo de visualización:

public class SnappyWindow : Window
{
    public SnappyWindow()
    {
        SetValue(TextOptions.TextFormattingModeProperty, TextFormattingMode.Display);
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.