web-dev-qa-db-ja.com

WPFの画像がぼやける

C＃を使用してWPFでアプリケーションを開発しています。 WrapPanelに画像を配置し、もう1つのBorderを持つグリッド内に表示し、ボタンでも画像を使用しています。問題は、画像コントロールの品質が低下していることです。ここに画像を投稿することはできませんので、ここで簡単に説明します。

画像にSnapsToDevicePixels="True"を使用しましたが、まだぼやけています。

更新しました：

ここで、以下の画像を共有しました： enter image description here

c#wpfimagexamlimage-processing
38
user701677

Markusが言ったことは、問題を解決し、その中にもう1つのプロパティを追加することで試してみる1つの方法だと思いますRenderOptions.EdgeMode="Aliased"私が意味する各画像について：

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

それでも問題を解決できない場合は、これを参照してください http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx を作成するカスタムビットマップクラスを作成し、トラブルを引き起こしているすべての画像に適用します。

これも見ることができます Stack Overflow Question

72
SharpUrBrain

SnapsToDevicePixelsはビットマップでは機能していないようです。

NearestNeighborオプションは実際にビットマップを変換し、元のビットマップとは異なるものになります。

WPF 4では、FrameworkElementのプロパティ "seLayoutRounding"がこの問題を解決するために導入されました。

Windowなどのルート要素でこのプロパティをTrueに設定すると、ピクセルの端に子要素が配置されます。

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

これは私のために働く

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

各画像にRenderOptions.BitmapScalingMode = "NearestNeighbor"を設定します。または、StackOverflowのこちらの question をご覧ください。

編集：
こちらが私のサンプルコードです

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

そして、これは私の結果です：
...and this is my result

14
Markus

画像がコンテンツとして使用される場合、親要素でUseLayoutRounding = "True"プロパティを使用します。あなたの場合、それはボタンです。

7
suheeb

スケーリングによって画像の背景がぼやける問題に遭遇しましたが、このソリューションは想像よりもはるかに簡単でした。最初は、2のべき乗のテクスチャサイズにスケールアップされているのではないかと思っていましたが、実際にスケーリングはSystem DPI（96）：Image DPI（72、多くのエディターのデフォルト）の比率に一致しました。画像を96 DPIに調整すると、デフォルトのWindows設定でピクセル単位で表示されるはずです。

編集：細部のコントラストが高い画像を試してみたが、わずかに柔らかくなった。

3
Bernard

私は同じ問題を抱えていましたが、私の場合、アイコンをダウンロードし、それらもすべて間違ったDPIを持っていることがわかりました... 110、56と116、xxと95、99など...

DPIをすべて96に変更したとき、すべてがうまくいきました！

1
Jessica Bendler

WPFは、サイズと配置に具体的なピクセル値を使用しないため、DPIで適切にスケーリングできます。

これは、個別の画面上のピクセルに対応しない位置を使用しようとする問題につながる可能性があります。一部の画像ピクセルは、ぼかしとして表示される複数の画面上のピクセルにレンダリングされます。

UseLayoutRendering = trueでSnapToDevicePixels = falseを使用すると、この問題を解決できます。また、メインウィンドウレベルでも設定する必要があるため、計算は画像レベルまでカスケードされます。

これを試すには、1つのウィンドウと画像を使用した簡単なWPFアプリケーションを作成します。画像の余白を（10.452、0.736、0、0）のような馬鹿げたものに設定すると、不鮮明になります。これは、画像のUseLayoutRendering = trueでなくなります。

その後、InitializeComponent（）の後にウィンドウのコンストラクターで再度マージンを設定すると、画像にUseLayoutRendering = trueを設定するかどうかに関係なくぼやけます。これは、画像を移動する前に画面上のピクセルと並ぶ計算が行われるためですこれらと一致しない場所に。

UseLayoutRenderingとSnapToDevicePixelsの違いはまったくわかりません-計算が行われるのはその時だと思います。 UseLayoutRenderingは画像に適しているようです。

画像を元のサイズから引き伸ばしたりつぶしたりすると、ぼかしの問題が発生する可能性があります。

0
RickySpanish