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

Sto usando alcune immagini nella mia applicazione 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 sembrano sfocati.

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

Puoi provare a provare una nuova proprietà disponibile ora in WPF4 . Lascia RenderOptions.BitmapScalingModea HighQuality o semplicemente non dichiararlo.

Il vicino più vicino ha funzionato per me tranne che ha portato a bitmap jaggy durante lo zoom sull'applicazione. Inoltre, non sembrava correggere alcun problema tecnico in cui le icone venivano ridimensionate in modi strani.

Sul vostro elemento radice (cioè la finestra principale) Aggiungi questa proprietà: UseLayoutRounding="True".

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

Invece di usare SnapsToDevicePixels, ho usato invece RenderOptions.BitmapScalingModee ora sono belli 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" />

+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 specificare RenderOptions sul posto, ma per i componenti di terze parti ha senso uno stile nelle risorse a livello di app:

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

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

L'uso della UseLayoutRounding="True"finestra di root funziona in molti casi, ma ho riscontrato un problema durante l'utilizzo del controllo Ribbon WPF . La mia applicazione si basa su schede contestuali che appaiono in base a ciò che l'utente sta facendo e quando imposto il UseLayoutRoundingto 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 RenderOptions.BitmapScalingMode="NearestNeighbor"sulla mia immagine ha corretto i problemi di rendering dell'immagine (immagine sfocata e ritagliata) ed è pienamente compatibile con l'utilizzo delle schede contestuali della barra multifunzione.

RenderOptions.BitmapScalingMode = "Il più vicino" funziona bene per la maggior parte del tempo. Tuttavia, a volte otterrai anomalie grafiche (nel mio caso, 4 immagini su 5 sono apparse bene, ma la quinta ha una leggera distorsione sul bordo destro). Ho risolto il problema aumentando di 1 il margine destro del controllo immagine.

Se il problema persiste, prova il controllo della classe Bitmap sopra menzionato da EugeneZ. È un sostituto del 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 in cui l'applicazione WPF sta funzionando, in alcuni formati di immagine queste informazioni sono memorizzate come metadati. Non so se questo risolva il problema, ma ho avuto 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 fino all'elemento più in alto nella tua applicazione

Credo che questo sia un bug (o almeno lo era). Dai un'occhiata a questa pagina di scambio di posta elettronica del supporto Microsoft per alcune idee per risolverlo.

Ho scoperto che RenderOptions.BitmapScalingMode = "Il più vicino" 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 attivato l'antialiasing per XP con le seguenti voci di registro:

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

Tuttavia, la disattivazione di aa con queste impostazioni non ha alcun effetto sulle immagini. Penso che questo abbia effetto solo sulle finestre 3D.

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

Ho scoperto che nessuna combinazione delle soluzioni alternative suggerite potrebbe curare il mio problema di immagine sfocata apparentemente casuale. Mi piace che molti altri non possano eseguire l'aggiornamento a .net 4 per utilizzare la UseLayoutRenderingproprietà.

Cosa ho scoperto di funzionare:

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

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

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

Se riesci a escludere completamente i due precedenti, sono attualmente sconcertato.

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

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

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

Ciò riduce l'intestazione del png e riduce anche le dimensioni, ma senza cambiare la qualità dell'immagine.

E ora tutte le mie immagini sono perfette! :-)