Mes images sont floues! Pourquoi les SnapsToDevicePixels de WPF ne fonctionnent-ils pas?

J'utilise des images dans mon 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" />

Mais, ils semblent flous.

Pourquoi cette SnapsToDevicePixels="True"ligne n'empêche- t-elle pas ce problème?

Vous voudrez peut-être envisager d'essayer une nouvelle propriété disponible maintenant dans WPF4 . Laissez le RenderOptions.BitmapScalingModeà HighQuality ou ne le déclarez tout simplement pas.

NearestNequart a fonctionné pour moi, sauf que cela a conduit à des bitmaps irréguliers lors du zoom sur l'application. Cela ne semblait pas non plus résoudre les problèmes de taille des icônes de manière étrange.

Sur votre élément racine (votre fenêtre principale) ajouter cette propriété: UseLayoutRounding="True".

Une propriété auparavant disponible uniquement dans Silverlight a maintenant résolu tous les problèmes de dimensionnement Bitmap. :)

Plutôt que d'utiliser SnapsToDevicePixels, j'ai plutôt utilisé RenderOptions.BitmapScalingModeet ils sont maintenant beaux et nets!

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 pour Zack Peterson

J'utilise .Net 3.5 sp1 et cela ressemble à la solution la plus simple pour un grand nombre d'images floues. Ce n'est pas un gros problème de spécifier RenderOptions sur place, mais pour les composants tiers, un style dans une ressource au niveau de l'application a du sens:

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

A bien fonctionné quand AvalonDock a commencé à rendre des icônes floues.

L'utilisation UseLayoutRounding="True"de la fenêtre à la racine fonctionne dans de nombreux cas, mais j'ai rencontré un problème lors de l'utilisation du contrôle du ruban WPF . Mon application repose sur des onglets contextuels qui apparaissent en fonction de ce que fait l'utilisateur et lorsque je définis le UseLayoutRoundingsur True, l'onglet contextuel n'apparaît pas et l'image du RibbonButton non plus. En outre, l'application se fige pendant plusieurs secondes et le ventilateur du processeur commence à chanter.

L'utilisation RenderOptions.BitmapScalingMode="NearestNeighbor"sur mon image a corrigé les problèmes de rendu de l'image (image floue et recadrée) et est entièrement compatible avec l'utilisation des onglets contextuels du ruban.

RenderOptions.BitmapScalingMode = "NearestNeighbors" fonctionne bien la plupart du temps. Cependant, vous aurez parfois des problèmes graphiques (dans mon cas, 4 images sur 5 se sont bien présentées, mais la cinquième avait une légère distorsion sur le bord droit). Je l'ai corrigé en augmentant la marge droite du contrôle Image de 1.

Si cela ne résout toujours pas le problème, essayez le contrôle de classe Bitmap ci-dessus mentionné par EugeneZ. C'est un remplacement du contrôle Image et jusqu'à présent, cela a plutôt bien fonctionné pour moi. Voir http://blogs.msdn.com/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx

Assurez-vous que vous enregistrez l'image dans le même DPI que votre application WPF fonctionne, certains formats d'image ont ces informations stockées sous forme de métadonnées. Je ne sais pas si cela résout le problème mais j'ai quelques problèmes à cause de cela où les images redimensionnées à 100% sont devenues plus grandes ou plus petites que prévu.

Peut-être quelque chose de similaire.

use UseLayoutRounding = True pour l'élément le plus haut de votre application

Je crois que c'est un bug (ou du moins c'était). Consultez cette page d' échange de courrier électronique du support Microsoft pour obtenir des idées pour résoudre ce problème.

J'ai trouvé que le RenderOptions.BitmapScalingMode = "NearestNeighbors" ne fonctionne pas pour moi. J'utilise Windows XP x32 avec DirectX 9.0c. Comme le rendu réel pour WPF est effectué avec DirectX, cela peut avoir un effet. L'anti-aliasing est activé pour XP avec les entrées de registre suivantes:

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

Cependant, désactiver aa avec ces paramètres n'a aucun effet sur les images. Je pense que cela affecte uniquement les fenêtres 3D.

Enfin, j'ai trouvé que le flou se produit avec le texte de TextBlocks ainsi qu'avec les images. Et le flou ne se produit que pour certains blocs de texte et images, pas tous.

J'ai trouvé qu'aucune combinaison des solutions de contournement suggérées ne résoudrait mon problème d'image floue apparemment aléatoire. J'aime beaucoup d'autres ne peuvent pas passer à .net 4 afin d'utiliser la UseLayoutRenderingpropriété.

Ce que j'ai trouvé pour fonctionner:

• Assurez-vous que les dimensions de votre image [d'origine] sont des multiples de 2. Cela semble éviter certains des problèmes de mise à l'échelle de l'image.
• Parfois, j'ai également constaté que l'ajustement des marges sur les images par un pixel ou 2 peut éviter le problème.

Ma première pensée, en lisant la question, était que vous faisiez trop exploser l'image, mais cela ne semble pas être le cas en regardant l'image que vous avez de l'application.

La deuxième pensée est la palette de couleurs, mais avec le noir comme l'une des couleurs qui ne sont pas rendues correctement, ce n'est pas aussi probable.

Si vous pouvez complètement exclure les deux ci-dessus, je suis actuellement perplexe.

À titre expérimental, vous pouvez essayer d'autres formats graphiques, mais PNG devrait convenir. Je vais devoir réfléchir davantage pour trouver une meilleure réponse.

J'ai essayé d'utiliser RenderOptions.BitmapScalingMode = HighQuality, semble causer des problèmes dans Windows 8.1, alors ce que j'ai fait, c'est de les exécuter via l'outil appelé PngOut.exe

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

Ce qui réduit l'en-tête du png, et réduit également la taille, mais sans changer la qualité de l'image.

Et maintenant toutes mes images sont parfaites! :-)