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

Question

Sto utilizzando alcune immagini nella mia appLcation 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" /> 

Ma, essi appaiono sfocata:

Dead link - Blurry WPF Images

Ecco un, side-by-side zoom-in confronto. Un originale si trova sulla sinistra:

Dead link - Blurry WPF Image Zoomed

Perché non quella linea SnapsToDevicePixels="True" prevenire questo problema?

Answer 1

Si consiglia di provare a provare una nuova proprietà disponibile ora in WPF4. Lasciare il RenderOptions.BitmapScalingMode a HighQuality o semplicemente non dichiararlo.

NearestNeighbour 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.

Sul tuo elemento radice (ad esempio la tua finestra principale) aggiungi questa proprietà: UseLayoutRounding="True".

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

Answer 2

Il mio primo pensiero, leggendo la domanda, era che stavate facendo esplodere l'immagine troppo, ma non sembra essere il caso di guardare l'immagine che avete della app.

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

Se è possibile 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.

Answer 3

Credo che questo sia un bug (o almeno lo era). Dai un'occhiata a questa pagina Microsoft support e-mail exchange per alcune idee per risolverlo.

Answer 4

Invece di utilizzare SnapsToDevicePixels, ho invece utilizzato RenderOptions.BitmapScalingMode e ora sono piacevoli e nitidi!

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

Ecco come appare ora:

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

Answer 5

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 immagine di 1.

Se ciò non risolve il problema, prova il controllo della classe 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

Answer 6

Assicurati di salvare l'immagine nello stesso DPI utilizzato dall'applicazione WPF, alcuni formati di immagine contengono queste informazioni 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.

Answer 7

+1 per Zack Peterson

che sto utilizzando .Net 3.5 SP1 e sembra che la soluzione più semplice per un gran numero di immagini sfocate. Non è un grosso problema per specificare RenderOptions sul posto, ma per i componenti 3rd-party uno stile in risorsa a livello di app ha un senso:

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

Ha lavorato bene quando AvalonDock iniziato a rendere le icone sfocate.

Answer 8

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. Io ho l'antialiasing attivato per XP con le seguenti voci di registro:

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

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

Infine, ho trovato che la sfocatura si verifica con il testo di TextBlocks e immagini. E la sfocatura avviene solo per alcuni blocchi di testo e immagini, non per tutti.

Answer 9

L'utilizzo di UseLayoutRounding="True" nella finestra radice funziona in molti casi ma si è verificato un problema durante l'utilizzo del controllo del nastro WPF. La mia applicazione si basa su schede contestuali che vengono visualizzate in base a ciò che l'utente sta facendo e quando ho impostato lo 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 schede contestuali della barra multifunzione.

Answer 10

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 poter utilizzare la proprietà UseLayoutRendering.

Quello che ho trovato al lavoro:

• garantire la vostra [originale] dimensioni delle immagini sono multipli di 2. Ciò sembra impedire alcuni dei problemi di scala dell'immagine funky.
• A volte ho anche scoperto che la regolazione dei margini delle immagini con un pixel o 2 può impedire il problema.

Answer 11

Ho provato ad utilizzare il RenderOptions.BitmapScalingMode = HighQuality, sembra che non è in causa alcuni problemi in Windows 8.1, così quello che ho fatto è stato per farli funzionare tramite 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! :-)

Answer 12

uso UseLayoutRounding = True al più alto elemento nell'applicazione