Problema WPF Blurry fonts- Soluzioni

Il problema è descritto e dimostrato sui seguenti collegamenti:

• Paul Stovell WPF: Rendering sfocato del testo
• Forum www.gamedev.net
• Microsoft Connect: il renderizzatore di testo WPF produce testo molto sfocato su caratteri di piccole dimensioni

Spiegazione: Chiarezza del testo in WPF . Questo collegamento ha un confronto dei caratteri.

Vorrei raccogliere tutte le possibili soluzioni a questo problema. Microsoft Expression Blend utilizza WPF ma i caratteri sembrano leggibili.

• Sfondo scuro come in Microsoft Expression Blend
• Aumento della dimensione del carattere e modifica del carattere (Calibri ...) [collegamento]
• Incorpora moduli Windows [collegamento]
• Utilizzare la classe TextRenderer di GDI + e / o Windows Form per eseguire il rendering del testo in una bitmap e quindi renderizzare quella bitmap come controllo WPF. [link]

Ci sono altre soluzioni?

Questo problema verrà risolto in VS2010 (e WPF4) beta 2

Sembra che sia stato completamente risolto!

ComputerZen.com di Scott Hanselman: WPF e Text Blurriness, ora con la massima chiarezza

Background tecnico

C'è un articolo approfondito sul rendering del testo WPF da uno dei gestori del programma di testo WPF su windowsclient.net: Chiarezza del testo in WPF .

Il problema si riduce a WPF che necessita di un renderizzatore di caratteri in scala lineare per animazioni fluide. Pure ClearType d'altra parte richiede un po 'di libertà con il font per inserire gli steli verticali nel pixel successivo.

La differenza è evidente se si confronta il classico modello "a cascata". WinForms in basso a sinistra, WPF in alto a destra:

Anche se non sono un fan delle idiosincrasie di rendering dei caratteri di WPF, posso immaginare il clamore se le animazioni salteranno come fanno nella cascata di Winforms.

Giocare con il registro

Di particolare interesse per me è stato il collegamento all'articolo MSDN " ClearType Registry Settings ", che spiega le possibili regolazioni sul lato utente nel registro:

• Livello ClearType: quantità di suggerimenti subpixel
• Livello di gamma
• Struttura dei pixel: come sono disposte le strisce di colore in un pixel di visualizzazione
• Livello di contrasto del testo: regola la larghezza degli stemmi dei glifi per rendere più pesante il carattere

Giocare con queste impostazioni non ha davvero migliorato il problema di fondo, ma può aiutare riducendo l'effetto di sfocatura del colore per gli utenti sensibili.

Un altro approccio

Il miglior consiglio fornito dall'articolo di Text Clarity è stato quello di aumentare la dimensione del carattere e cambiarlo. Calibri funziona per me meglio dell'interfaccia utente standard di Segoe. Grazie alla sua popolarità come font web, ho provato anche Verdana, ma ha un brutto salto di peso tra 14pt e 15pt che è molto visibile quando si animano le dimensioni del font.

WPF 4.0

WPF 4 avrà un supporto migliorato per influenzare il rendering dei caratteri. C'è un articolo sul Blog di testo WPF che spiega le modifiche. Soprattutto, ora ci sono (almeno) tre diversi tipi di rendering del testo:

_{<grumble> Dovrebbe essere una corda sufficiente per ogni designer. </grumble>}

.NET 4 ha finalmente una soluzione per la scarsa qualità di rendering del testo di WPF, ma è ben nascosto. Impostare quanto segue per ogni finestra:

TextOptions.TextFormattingMode="Display"

Il valore predefinito è "Ideale" che non è affatto ciò che implica il nome.

Esistono altre due opzioni in TextOptions, vale a dire TextHintingMode e TextRenderingMode, ma entrambe hanno impostazioni predefinite ragionevoli.

Ho riscontrato un problema l'altro giorno quando ho usato un bordo a cui era applicato un DropShadowEffect . Il risultato fu che tutto il testo all'interno di quel bordo era estremamente sfocato. Non importa se il testo era all'interno di altri pannelli o direttamente sotto il bordo - qualsiasi blocco di testo che è figlio del genitore che ha un effetto applicato sembra essere interessato.

La soluzione a questo caso particolare è stata quella di non inserire elementi all'interno del bordo che abbiano effetti, ma invece di utilizzare una griglia (o qualsiasi altra cosa che supporti il ​​posizionamento uno sopra l'altro) e posizionare un rettangolo nella stessa cella del testo (ad es. come un fratello nella struttura ad albero visivo) e mettere gli effetti su quello.

Così:

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

Questo problema verrà risolto in VS2010 (e WPF4) beta 2:

SnapToDevicePixels si applica solo alle forme WPF (linee ecc.), Non al renderizzatore di testo.

Non esiste una soluzione alternativa a questo problema. Secondo Microsoft, il comportamento è "in base alla progettazione".

Vedi anche questa discussione sui forum di Microsoft che discute dei problemi - ha ricevuto alcune risposte dai ragazzi di MS che chiariscono la loro posizione sulla questione.

Dal punto di vista di uno sviluppatore, l'unica "soluzione" nota finora è utilizzare la classe TextRenderer di GDI + e / o Windows Forms per eseguire il rendering del testo in una bitmap e quindi renderla come controllo WPF. A parte ovvie implicazioni sulle prestazioni, ciò non allevia il problema per le applicazioni esistenti.

Ora ho creato un ticket Microsoft Connect per questo problema (con mia grande sorpresa, nonostante tutta la negatività, nel tracker designato non vi era alcuna segnalazione di bug effettiva).

Poiché questo è uno dei canali ufficiali di comunicazione di richieste e domande a Microsoft, consiglierei di esaminarlo anche per una risposta più rapida. Almeno, se si desidera che il problema venga risolto in un modo o nell'altro, votare lì per quel biglietto e / o convalidare il problema aiuterà ad attirare l'attenzione dei PM e degli ingegneri Microsoft su questo problema, e possibilmente aumentare la sua priorità percepita.

Non lo vedo come un bug, ma la configurazione predefinita è davvero molto fastidiosa. Ecco un confronto di tutte le combinazioni di

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixels non fa alcuna differenza nel rendering del testo.

Preferisco:

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

dove le linee verticali non sono mai sfocate.

Il font utilizzato è Open Sans Light, che può essere davvero bello se ben utilizzato, come nell'ultimo TeamViewer.

Per coloro che usano Mahapps.Metro, il problema è TransitioningContentControl https://github.com/MahApps/MahApps.Metro/issues/889

Ho appena provato VS2010 beta, che è tutto fatto in WPF e soffre BADLY del problema dei caratteri sfocati. Soprattutto sui suggerimenti.

Ciò sembra fornire alcune prove del fatto che WPF4 non risolverà effettivamente il problema (semmai sembra peggiore)

Wow, non posso credere di aver finalmente potuto leggere i miei caratteri WPF. E non posso nemmeno credere che non ci sia una finestra di dialogo per rendere facili queste modifiche mentre i valori di default sono orribili sul mio display.

Queste impostazioni del registro (in decimali) hanno funzionato per me e si avvicinano al mio normale carattere cleartype:

• ClearTypeLevel: 10 (aliasing prevalentemente in scala di grigi)
• GammaLevel: 1300 (una gamma più alta rendeva il carattere troppo sottile e stavo vedendo i colori nell'aliasing)

Dicono che "SnapToDevicePixels = true" funziona, ma non ho mai visto buoni risultati.

Combatto il testo sfocato passando a un carattere diverso.

Ovviamente questa non è una soluzione al problema, tuttavia è così che ho risolto il problema.

Se preferisci utilizzare una classe base C # per personalizzare Windows per la tua app (o ora hai un motivo), ecco come impostare puoi impostare la formattazione del testo per utilizzare la modalità di visualizzazione accattivante:

public class SnappyWindow : Window
{
    public SnappyWindow()
    {
        SetValue(TextOptions.TextFormattingModeProperty, TextFormattingMode.Display);
    }
}