Le mie immagini sono sfocate! Perché non funzionano gli SnapsToDevicePixels di WPF?

Sto usando alcune immagini nella mia appLcation WPF.

XAML:

 

Ma appaiono sfocati:

Collegamento morto: immagini WPF sfocate

Ecco un confronto ravvicinato e affiancato. Un originale è a sinistra:

Collegamento morto: immagine WPF sfocata ingrandita

Perché SnapsToDevicePixels="True" impedisce questo problema?

Si consiglia di prendere in considerazione la possibilità di provare una nuova proprietà disponibile ora in WPF4 . Lasciare RenderOptions.BitmapScalingMode su HighQuality o semplicemente non dichiararlo.

NearestNeighbor più vicino ha funzionato per me, tranne che ha portato a bitmap jaggy quando si esegue lo zoom sull’applicazione. Inoltre, non sembrava risolvere i problemi tecnici in cui le icone erano dimensionate in modi strani.

UseLayoutRounding="True" radice (es. La finestra principale) aggiungi questa proprietà: UseLayoutRounding="True" .

Una proprietà precedentemente disponibile solo in Silverlight ha ora risolto tutti i problemi di dimensionamento di Bitmap. 🙂

Anziché utilizzare SnapsToDevicePixels , ho invece utilizzato RenderOptions.BitmapScalingMode e ora sono piacevoli e nitidi!

XAML:

  

Ecco come appare ora:

Immagini WPF nitide http://img13.imageshack.us/img13/9926/crispwpfimages.gif

+1 per Zack Peterson

Sto usando .Net 3.5 sp1 e sembra la soluzione più semplice per un gran numero di immagini fuzzy. Non è un grosso problema per specificare RenderOptions sul posto, ma per i componenti di terze parti uno stile nella risorsa a livello di app ha senso:

   

Ha funzionato bene quando AvalonDock ha iniziato a visualizzare icone sfocate.

Utilizzo di UseLayoutRounding="True" nella finestra di root funziona in molti casi, ma ho riscontrato un problema durante l’utilizzo del controllo barra multifunzione WPF . La mia applicazione si basa su tabs contestuali che appaiono in base a ciò che l’utente sta facendo e quando imposto UseLayoutRounding su True , la scheda contestuale non viene visualizzata e nemmeno l’immagine di RibbonButton. Inoltre, l’applicazione si blocca per molti secondi e la ventola della CPU inizia a cantare.

L’utilizzo di RenderOptions.BitmapScalingMode="NearestNeighbor" sulla mia immagine ha corretto i problemi di rendering delle immagini (immagine fuzzy e ritagliata) ed è completamente compatibile con l’utilizzo delle tabs contestuali della barra multifunzione.

RenderOptions.BitmapScalingMode = “NearestNeighbor” funziona bene la maggior parte del tempo. Tuttavia, occasionalmente si verificano problemi tecnici (nel mio caso, 4 immagini su 5 si sono rivelate buone, ma la quinta ha avuto una leggera distorsione sul lato destro). L’ho corretto aumentando il margine destro del controllo Image di 1.

Se ciò non risolve il problema, prova il controllo della class Bitmap sopra indicato da EugeneZ. È un sostituto per il controllo Image e finora ha funzionato abbastanza bene per me. Vedi http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Assicurati di salvare l’immagine nello stesso DPI utilizzato dall’applicazione WPF, alcuni formati di immagine hanno queste informazioni memorizzate come metadati. Non so se questo risolve il problema, ma ho alcuni problemi a causa di ciò in cui le immagini ridimensionate al 100% sono diventate più grandi o più piccole del previsto.

Potrebbe essere qualcosa di simile.

use UseLayoutRounding = True per la maggior parte degli elementi nella tua applicazione

Credo che questo sia un bug (o almeno lo era). Dai un’occhiata a questa pagina di scambio di e-mail di supporto Microsoft per alcune idee per risolverlo.

Ho trovato che RenderOptions.BitmapScalingMode = “NearestNeighbor” non funziona per me. Sto usando Windows XP x32 con DirectX 9.0c. Poiché il rendering effettivo per WPF viene eseguito con DirectX, ciò potrebbe avere un effetto. Ho anti-aliasing attivo per XP con le seguenti voci di registro:

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

Tuttavia, distriggersndo aa queste impostazioni non ha alcun effetto sulle immagini. Penso che questo abbia effetto solo sulle Viewport 3D.

Infine, ho scoperto che la sfocatura si verifica con il testo di TextBlock e anche con le immagini. E la sfocatura avviene solo per alcuni blocchi di testo e immagini, non per tutti.

Ho trovato che nessuna combinazione dei rimedi suggeriti avrebbe risolto il mio problema di immagine sfocata apparentemente casuale. Mi piace che molti altri non possano aggiornare a .net 4 per utilizzare la proprietà UseLayoutRendering .

Quello che ho trovato funziona:

  • Assicurati che le dimensioni dell’immagine [originale] siano multipli di 2. Ciò sembra prevenire alcuni dei problemi di ridimensionamento dell’immagine.
  • A volte ho anche scoperto che la regolazione dei margini delle immagini con un pixel o 2 può prevenire il problema.

Il mio primo pensiero, leggendo la domanda, è che stavi facendo esplodere l’immagine troppo, ma non sembra essere il caso di guardare l’immagine che hai dell’app.

Il secondo pensiero è la tavolozza dei colors, ma con il nero come uno dei colors che non viene visualizzato correttamente, non è così probabile.

Se riesci a escludere completamente i due precedenti, al momento sono perplesso.

Come esperimento, puoi provare altri formati grafici, ma PNG dovrebbe andare bene. Dovrò pensarci ancora un po ‘per trovare una risposta migliore.

Ho provato a utilizzare RenderOptions.BitmapScalingMode = HighQuality, sembra che causa alcuni problemi in Windows 8.1, quindi quello che ho fatto è stato quello di eseguirli attraverso lo strumento chiamato PngOut.exe

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

Che riduce l’intestazione del png e riduce anche le dimensioni, ma senza modificare la qualità dell’immagine.

E ora tutte le mie immagini sono perfette! 🙂