Problema nas fontes WPF Blurry - soluções


153

O problema é descrito e demonstrado nos seguintes links:

Explicação: Clareza do texto no WPF . Este link tem comparação de fontes.

Gostaria de coletar todas as soluções possíveis para esse problema. O Microsoft Expression Blend usa WPF, mas as fontes parecem legíveis.

  • Fundo escuro como no Microsoft Expression Blend
  • Aumentando o tamanho da fonte e alterando a fonte (Calibri ...) [link]
  • Incorporar formulários do Windows [link]
  • Use a classe GDI + e / ou Windows Forms TextRenderer para renderizar texto em um bitmap e, em seguida, renderize esse bitmap como um controle WPF. [ligação]

Existem mais soluções?

Isso será corrigido no VS2010 (e WPF4) beta 2

Parece que foi finalmente resolvido!

ComputerZen.com de Scott Hanselman: WPF e Text Blurriness, agora com total clareza


VS2010RC é totalmente inutilizável para mim mpdreamz.nl/vs2010RC-blur.png
Martijn Laarman

O VS2010RC na minha máquina parece muito melhor do que na sua foto, na verdade, com fundo branco é muito bom, mas ainda é péssimo com fundo escuro.
Robert Vuković 24/03

Será que quis encontrar uma solução para este problema, na verdade eu tenho o mesmo problema aqui no meu aplicativo e estou usando WPF 3.5 com VS2010
SharpUrBrain

Os últimos 3 links estão inoperantes.
SHIN JaeGuk 10/04/19

Respostas:


107

Formação técnica

Há um artigo detalhado sobre a renderização de texto WPF de um dos gerentes de programa de texto do WPF no windowsclient.net: Claridade de texto no WPF .

O problema se resume ao WPF que precisa de um renderizador de fonte de escala linear para animações suaves. O Pure ClearType, por outro lado, requer bastante liberdade com a fonte para inserir hastes verticais no próximo pixel.

A diferença é óbvia se compararmos o padrão clássico de "cascata". WinForms no lado inferior esquerdo, WPF no lado superior direito:

Embora eu também não seja fã das idiossincrasias de renderização de fontes do WPF, posso imaginar o clamor se as animações saltariam como na cascata Winforms.

Brincando com o registro

De especial interesse para mim, foi o link para o artigo do MSDN " Configurações do Registro ClearType ", que explica os possíveis ajustes do lado do usuário no registro:

  • Nível ClearType: quantidade de dicas de subpixel
  • Nível gama
  • Estrutura de pixel: como as faixas de cores em um pixel de exibição são organizadas
  • Nível de contraste do texto: ajusta a largura das hastes de glifos para tornar a fonte mais pesada

Brincar com essas configurações realmente não melhorou o problema subjacente, mas pode ajudar reduzindo o efeito de sangramento de cores para usuários sensíveis.

Outra abordagem

O melhor conselho que o artigo Text Clarity deu foi aumentar o tamanho da fonte e alterá-la. O Calibri funciona melhor para mim do que a interface do usuário padrão do Segoe. Devido à sua popularidade como fonte da web, tentei o Verdana também, mas ele tem um salto desagradável entre 14 e 15 pontos, o que é muito visível ao animar o tamanho da fonte.

WPF 4.0

O WPF 4 terá suporte aprimorado para influenciar a renderização de fontes. Há um artigo no Blog de texto do WPF explicando as alterações. Mais importante, agora existem (pelo menos) três tipos diferentes de renderização de texto:

comparação de renderização de texto

<grumble> Isso deve ser corda suficiente para todo designer. </grumble>


11
excelente explicação, +1. Provavelmente explica por que o Flash também tem uma renderização de fonte tão horrível.
Jeff Atwood

1
Sim. Essa é uma boa explicação, mas eu ainda gostaria que houvesse uma maneira de ativar as dicas de fontes para obter uma boa aparência quando você sabe que não vai animar. Suponho que isso implicaria uma dada escala para a qual você está otimizando a dica. Esse tipo de coisa faz o WPF ainda parecer uma versão beta para mim.
PeterAllenWebb

Não é como se a variante "escalável" não usasse dicas de fonte, mas o WPF não otimiza para atingir a grade de pixels, como o ClearType. Indiscutivelmente, o SnapToDevicePixels deve funcionar para texto, mas isso sempre deve ser herdado, porque um controle não pode saber se ele pode se encaixar ou não.
David Schmitt

2
Especialmente relevante é a propriedade anexada TextOptions.TextFormattingMode ( msdn.microsoft.com/en-us/library/ee169597.aspx ). O WPF4 e o Silverlight também têm as propriedades UseLayoutRounding ( msdn.microsoft.com/en-us/library/dd783605.aspx ) e SnapsToDevicePixels ( msdn.microsoft.com/en-us/library/… ).
Pat

@All: Não consigo encontrar uma maneira de desativar o anti-aliasing de texto no WPF3.5 e, como resultado, o texto do rótulo ou botão parece muito ruim. Idealmente, eu gostaria de desativar o anti-aliasing globalmente para fontes. Como posso fazer isso?
SharpUrBrain

128

Finalmente, o .NET 4 tem uma solução para a baixa qualidade de renderização de texto do WPF, mas está bem oculta. Defina o seguinte para cada janela:

TextOptions.TextFormattingMode="Display"

O valor padrão é "Ideal", que não é exatamente o que o nome indica.

Existem duas outras opções no TextOptions, a saber TextHintingMode e TextRenderingMode, mas ambas possuem padrões sensíveis.


Tudo. Obrigado. Isso me ajuda a resolver o problema, mas você só precisa definir isso uma vez no contêiner, como <grid> #
Peter Du

Sim, e se você configurá-lo em uma janela, é válido para tudo o que estiver dentro dessa janela.
precisa

Passei muito tempo procurando isso, em vários sites e blogs, sobre o quanto a formatação de texto é melhor no VS2010 RTM / .Net 4 (eu concordo, é!). Mas nenhum deles se importou em mencionar como você pode fazer com que os aplicativos WPF criados com ele pareçam tão bons assim. Por que essa propriedade está tão bem escondida? Muito obrigado.
precisa saber é o seguinte

5
Tudo o que eu quero é isso! Eu realmente não me importo com o quão sofisticada é a renderização WPF, as fontes são inaceitáveis ​​para qualquer pessoa.
Jerry Liang

1
"Ideal" funciona para mim, em vez de "Display". O projeto está no .NET 4.6.2. Talvez eles tenham corrigido o nome confuso.
joe

40

Encontrei um problema no outro dia quando usei uma borda que tinha um DropShadowEffect aplicado. O resultado foi que todo o texto dentro dessa borda estava extremamente embaçado. Não importa se o texto estava dentro de outros painéis ou diretamente abaixo da borda - qualquer bloco de texto filho do pai ou mãe que tenha um Efeito aplicado parece ser afetado.

A solução para esse caso específico foi não colocar coisas dentro da borda que produz efeitos, mas usar uma grade (ou qualquer outra coisa que suporte a colocação de conteúdo umas sobre as outras) e colocar um retângulo na mesma célula que o texto (por exemplo, como um irmão na árvore visual) e colocar os efeitos nisso.

Igual a:

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

Isso fez o truque bem. Um pouco de um hack, mas melhor do que mexer com as configurações etc. Nice. obrigado. Uma coisa que eu tinha que fazer, no entanto, era definir o preenchimento do retângulo como algo. Talvez essa fosse apenas a minha configuração.
HAdes

Sim, você está certo. O retângulo é transparente por padrão, o que faz com que a sombra pareça estranha.
Isak Savo

isso não está acontecendo no meu aplicativo de exemplo, estou usando WPF 3.5
SharpUrBrain

@ SharpUrBrain: o que não está acontecendo? Ainda está embaçado, mesmo depois de usar o meu segundo exemplo?
Isak Savo

Sim, Ele ainda está embaçada depois de usar o seu segundo exemplo também
SharpUrBrain


6

SnapToDevicePixels se aplica apenas a formas WPF (linhas, etc.), não a renderizador de texto.

Não há solução alternativa conhecida para esse problema. Segundo a Microsoft, o comportamento é "por design".

Veja também este tópico nos fóruns da Microsoft que discutem os problemas - ele recebeu algumas respostas dos funcionários da MS que esclarecem sua posição sobre o assunto.


Corrigido no WPF 4 usando a propriedade anexada TextOptions.TextFormattingMode ( msdn.microsoft.com/en-us/library/ee169597.aspx ).
Pat

1
O nome da propriedade é "SnapsToDevicePixels" e não "SnapToDevicePixels" conforme gravado.
Nir Kornfeld

6

Do ponto de vista de um desenvolvedor, a única "solução alternativa" conhecida até o momento é usar a classe GDI + e / ou Windows Forms TextRenderer para renderizar texto em um bitmap e, em seguida, processar esse bitmap como um controle WPF. Além das implicações óbvias de desempenho, isso não alivia o problema dos aplicativos existentes.

Agora criei um tíquete do Microsoft Connect para esse problema (para minha surpresa, apesar de toda a negatividade, não havia nenhum relatório de bug real no rastreador designado).

Como esse é um dos canais oficiais de comunicação de solicitações e perguntas para a Microsoft, eu recomendaria também analisá-lo para obter uma resposta mais rápida. Pelo menos, se você deseja que o problema seja resolvido de uma maneira ou de outra, votar nesse ticket e / ou validar o problema ajudará a chamar a atenção dos PMs e engenheiros da Microsoft para esse problema e, possivelmente, aumentará sua prioridade percebida.


6

Não o vejo como um bug, mas a configuração padrão é realmente muito irritante. Aqui está uma comparação de todas as combinações de

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixels não faz diferença na renderização do texto.

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

Eu prefiro:

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

onde as linhas verticais nunca ficam embaçadas.

A fonte usada é Open Sans Light, que pode ser realmente bonita se for bem usada, como no TeamViewer mais recente.

Para aqueles que usam o Mahapps.Metro, o problema é o TransitioningContentControl https://github.com/MahApps/MahApps.Metro/issues/889


4

Acabei de experimentar a versão beta do VS2010, que é feita no WPF, e sofre muito com o problema de fontes borradas. Particularmente nas dicas de ferramentas.

Isso parece dar alguma evidência de que o WPF4 na verdade não resolverá o problema (se parecer pior)


3
Estou arquivando bugs no VS2010B1 para cada local na interface do usuário com o texto embaçado. As dicas são quase comicamente ruins, eu concordo. Dado o quão explicitamente foi dito que isso deveria ser corrigido no WPF4, só espero que ele não tenha sido o melhor para esta versão beta.
Will Dean

4

Uau, não acredito que finalmente consegui ler minhas fontes WPF. E também não acredito que não exista uma caixa de diálogo para facilitar essas alterações, enquanto os valores padrão são horríveis no meu monitor.

Essas configurações do registro (em decimal) funcionaram para mim e se aproximam da minha fonte normal de tipo claro:

  • ClearTypeLevel: 10 (principalmente alias em escala de cinza)
  • GammaLevel: 1300 (gama mais alta tornou a fonte muito fina e eu estava vendo as cores no aliasing)

3

Eles dizem que "SnapToDevicePixels = true" funciona, mas nunca vi bons resultados.

Combato o texto desfocado mudando para uma fonte diferente.

Obviamente, isso não é uma solução para o problema, mas é assim que eu trabalhei em torno dele.


Acabei de comparar um TextBlock com SnapToDevicePixels = "true" com um sem e não houve diferença com a fonte Segoe UI na 12duis. Posso perguntar quais fontes você usa?
David Schmitt

Também melhoramos a situação trocando nossa fonte. A fonte que escolhemos foi o Avenir (não acho que esteja instalado por padrão, pelo menos não no Windows XP).
Cplotts

0

Se você preferir usar uma classe base C # para personalizar janelas para o seu aplicativo (ou agora tiver um motivo para), veja como você pode definir a formatação do texto para usar o atraente modo de exibição:

public class SnappyWindow : Window
{
    public SnappyWindow()
    {
        SetValue(TextOptions.TextFormattingModeProperty, TextFormattingMode.Display);
    }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.