wake-up-neo.com

Bild in WPF verschwommen

Ich entwickle eine Anwendung in WPF mit C #. Ich füge Bilder in ein WrapPanel ein und zeige mit einem weiteren Rahmen in einem Raster und verwende auch Bilder in Buttons. Problem ist, dass meine Bildkontrolle an Qualität verliert. Ich kann mein Bild hier nicht posten, ich beschreibe es hier einfach.

Ich habe SnapsToDevicePixels="True" für die Bilder verwendet, aber es sieht immer noch verschwommen aus.

Aktualisierte:

Hier habe ich das Bild unten geteilt: enter image description here

38
Turtleneck

Ich denke, was Markus gesagt hat, ist der eine Weg, um Ihr Problem zu lösen. Versuchen Sie, indem Sie eine weitere Eigenschaft hinzufügen RenderOptions.EdgeMode="Aliased" für jedes Bild, das ich meine:

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

wenn Sie das Problem immer noch nicht beheben können, können Sie diese http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx verwenden, um eine benutzerdefinierte Bitmap zu erstellen klassifizieren und auf alle Bilder anwenden, die Probleme verursachen.

Sie können auch diese Stack Overflow-Frage sehen.

71
SharpUrBrain

SnapsToDevicePixels scheint für Bitmaps nicht zu funktionieren.

Die NearestNeighbor-Optionen konvertieren die Bitmap tatsächlich und enden mit einer anderen als der ursprünglichen Bitmap. 

In WPF 4 wird eine Eigenschaft " UseLayoutRounding " für das FrameworkElement eingeführt, um dieses Problem zu lösen.

Wenn Sie diese Eigenschaft für Ihr Stammelement auf "True" setzen, werden beispielsweise untergeordnete Elemente an den Rändern von Pixeln ausgerichtet.

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

Das funktioniert für mich

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

Legen Sie RenderOptions.BitmapScalingMode = "NearestNeighbor" für jedes Bild fest. Alternativ sehen Sie diese Frage hier auf StackOverflow.

Bearbeiten:
Hier ist mein Beispielcode

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

Und das ist mein Ergebnis:
...and this is my result

15
Markus

Verwenden Sie die Eigenschaft UseLayoutRounding = "True" für das übergeordnete Element, wenn image als Inhalt verwendet wird. In Ihrem Fall ist es der Button.

7
suheeb

Ich hatte ein Problem mit der Bildunschärfe, das durch Skalierung hervorgerufen wurde, und die Lösung war viel einfacher als Sie vielleicht denken. Während ich mich zuerst fragte, ob es auf eine Zweierpotenz-Texturgröße skaliert werden sollte, entsprach die Skalierung tatsächlich dem Verhältnis von System DPI (96): Image DPI (72, was für viele Editoren die Standardeinstellung ist). Wenn Sie das Bild auf 96 DPI einstellen, sollte es mit den Standardeinstellungen von Windows pixelgenau angezeigt werden.

BEARBEITEN: Es wurde ein Bild mit einem hohen Detailkontrast getestet, und es wird etwas abgeschwächt. 

3
Bernard

Ich hatte das gleiche Problem, aber in meinem Fall habe ich Icons heruntergeladen und festgestellt, dass sie alle falsche DPI-Werte hatten ... 110,56 und 116, xx und 95,99 usw.

Als ich die DPI für alle auf 96 änderte, war alles in Ordnung!

1
Jessica Bendler

WPF verwendet keine konkreten Pixelwerte für Größe und Positionierung, sodass es mit DPI gut skaliert werden kann.

Dies kann zu einem Problem führen, bei dem versucht wird, eine Position zu verwenden, die keinem diskreten Pixel auf dem Bildschirm entspricht. Einige der Bildpixel werden über mehrere Pixel auf dem Bildschirm gerendert, die wir als unscharf betrachten.

UseLayoutRendering = true mit SnapToDevicePixels = false sollte dieses Problem beheben. Sie müssen es auch auf der Hauptfensterebene einstellen, damit die Berechnungen auf die Bildebene herunterfallen.

Sie können dies ausprobieren, indem Sie eine einfache WPF-Anwendung mit einem Fenster und Ihren Bildern erstellen. Wenn Sie den Bildrand etwas dumm einstellen (10.452, 0.736, 0, 0), wird das Bild unscharf. Dies geht weg mit UseLayoutRendering = true im Bild.

Wenn Sie dann den Rand im Konstruktor Ihres Fensters nach InitializeComponent () erneut festlegen, ist er unabhängig davon, ob Sie UseLayoutRendering = true für das Bild festgelegt haben, unscharf, da die Berechnungen anhand der Pixel auf dem Bildschirm ausgerichtet wurden, bevor Sie das Bild anschließend verschoben haben zu einem Ort, der nicht mit diesen übereinstimmt.

Ich bin nicht ganz sicher, was der Unterschied zwischen UseLayoutRendering und SnapToDevicePixels ist - ich denke, es ist nur der Zeitpunkt, an dem die Berechnungen gemacht werden. UseLayoutRendering scheint für Bilder vorzuziehen.

Wenn Sie ein Bild von seiner ursprünglichen Größe aus dehnen/zusammenziehen, kann dies ebenfalls zu Unschärfen führen.

0
RickySpanish