web-dev-qa-db-fra.com

L'image dans WPF devient floue

Je développe une application dans WPF en utilisant C #. Je mets des images dans un WrapPanel et les affiche dans une grille avec une bordure supplémentaire et utilise également des images dans les boutons. Le problème est que mon contrôle d’image perd sa qualité. Je ne suis pas en mesure de publier mon image ici, je la décris simplement ici.

J'ai utilisé SnapsToDevicePixels="True" pour les images mais ça a toujours l'air flou.

Mis à jour:

Ici, j'ai partagé l'image ci-dessous: enter image description here

c#wpfimagexamlimage-processing
38
Turtleneck

Je pense que ce que Markus a dit est le seul moyen de résoudre votre problème et d'essayer en ajoutant une propriété supplémentaire dans celui-ci RenderOptions.EdgeMode="Aliased" pour chaque image, je veux dire:

<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
       RenderOptions.BitmapScalingMode="NearestNeighbor"
       RenderOptions.EdgeMode="Aliased"/>

si vous ne parvenez toujours pas à résoudre votre problème, vous pouvez vous référer à http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx pour créer un bitmap personnalisé classe et appliquer sur toutes les images qui créent des problèmes pour vous.

Vous pouvez également voir ceci Stack Overflow Question

71
SharpUrBrain

SnapsToDevicePixels semble ne pas fonctionner pour les bitmaps.

Les options NearestNeighbor convertissent réellement le bitmap et aboutissent avec un autre au bitmap d'origine. 

Dans WPF 4, une propriété " UseLayoutRounding " sur le FrameworkElement est introduite pour résoudre ce problème.

En définissant cette propriété sur True sur votre élément racine, par exemple, Window alignera les éléments enfants sur les bords des pixels.

<Window UseLayoutRounding="True">...</Window>
25
Recle

Ça marche pour moi

<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
       RenderOptions.BitmapScalingMode="NearestNeighbor"</Image>

Définissez RenderOptions.BitmapScalingMode = "NearestNeighbor" pour chaque image. Vous pouvez également consulter cette question ici sur StackOverflow.

Modifier:
Voici mon exemple de code

<Window x:Class="MainWindow"
    xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="661">
    <WrapPanel>
        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/icoChip32x32.ico"
               RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>
        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/icoChip32x32.ico"
                   RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>

        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/Presentation-Edit.png"
               RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>
        <Button VerticalAlignment="Center">
            <Image Source="/WpfApplication1;component/Presentation-Edit.png"
                   RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
        </Button>
    </WrapPanel>
</Window>

Et voici mon résultat:
...and this is my result

15
Markus

Utilisez la propriété UseLayoutRounding = "True" sur l'élément parent si l'image est utilisée en tant que contenu. Dans votre cas, c'est le bouton.

7
suheeb

J'ai rencontré un problème de flou lié à la mise à l'échelle des arrière-plans d'image, et la solution était beaucoup plus simple que vous ne le pensez. Au début, je me demandais si elle était mise à l'échelle jusqu'à une taille de texture deux fois plus grande, mais la mise à l'échelle correspondait au rapport System DPI (96): Image DPI (72, valeur par défaut de nombreux éditeurs). Si vous ajustez l’image à 96 ppp, elle devrait afficher une résolution parfaite avec les paramètres Windows par défaut.

EDIT: Essayé une image avec un contraste de détail élevé et il est légèrement adouci. 

3
Bernard

J'ai eu le même problème, mais dans mon cas, j'ai téléchargé des icônes et découvert qu'elles avaient toutes une erreur DPI aussi ... 110,56 et 116, xx et 95,99, etc.

Quand j'ai changé le DPI à 96 pour tout, tout allait bien!

1
Jessica Bendler

WPF n'utilise pas de valeurs de pixels concrètes pour la taille et le positionnement, ce qui lui permet de s'adapter correctement à la résolution DPI.

Cela peut entraîner un problème d'utilisation d'une position qui ne correspond pas à un pixel discret à l'écran. certains des pixels de l'image sont rendus sur plusieurs pixels à l'écran que nous considérons comme flous.

UseLayoutRendering = true avec SnapToDevicePixels = false devrait résoudre ce problème. Vous devez également le définir au niveau de la fenêtre principale afin que les calculs se répercutent jusqu'au niveau de l'image.

Vous pouvez essayer ceci en créant une application WPF simple avec une fenêtre et vos images. Régler la marge de l’image sur une valeur idiote (10.452, 0.736, 0, 0) entraînera un flou. Cela disparaît avec UseLayoutRendering = true sur l'image.

Si vous définissez ensuite à nouveau la marge dans le constructeur de votre fenêtre après InitializeComponent (), elle est floue, que vous définissiez ou non UseLayoutRendering = true sur l'image, car les calculs à aligner avec les pixels à l'écran ont été effectués avant de déplacer ensuite l'image. à un endroit qui ne correspond pas à ceux-ci.

Je ne suis pas tout à fait sûr de la différence entre UseLayoutRendering et SnapToDevicePixels - Je pense que c'est juste le moment où les calculs sont faits. UseLayoutRendering semble être préférable pour les images.

Si vous étirez/réduisez une image par rapport à sa taille d'origine, des problèmes de flou apparaissent également.

0
RickySpanish