Why everything in WPF is blurry?

The reason for this is the anti-aliasing system which spreads the line over multiple pixels if it doesn't align with physical device pixels.

WPF is resoultion independent. This means you specify the size of an user interface element in inches, not in pixels. A logical unit in WPF is 1/96 of an inch. This scale is chosen, because most screens have a resolution of 96dpi. So in most cases 1 logical unit matches to 1 physical pixel. But if the screen resolution changes, this rule is no longer valid.

All WPF controls provide a property SnapsToDevicePixels. If set to true, the control ensures the all edges are drawn excactly on physical device pixels. But unfortunately this feature is only available on control level.

Source: Draw lines excactly on physical device pixels


Quick Fix:

Use these options on every Container from root to your blurry control

        UseLayoutRounding="True"
        RenderOptions.BitmapScalingMode="NearestNeighbor"
        SnapsToDevicePixels="True"
        RenderOptions.ClearTypeHint="Enabled"

Explanation:

UseLayoutRounding=true fixes subpixel layout problems. They often occur because e.g. Effects resize controls to be something between pixels.

RenderOptions.BitmapScalingMode=NearestNeighbor fixes blurry sampling of bitmaps. Bitmaps are used when effects or other techniques are used. When they are reapplied to the container or control they might end up inbetween pixels and therefore interpolate the pixels of the bitmap.

SnapsToDevicePixels="True" fixes vertical and horizontal polygons, lines and rectangles being rendered inbetween pixels

RenderOptions.ClearTypeHint="Enabled" reenables cleartype on text. It is disabled very easily by effects or whenever the renderer does not know the exact background of a text.

You should use it on every Container because sometimes, e.g. by data templates these options are defaulted again for the sub controls.


I spent a couple of hours trying to figure out the cause of the blurriness on custom panels. On these custom panels we are using a drop shadow border effect. The drop shadow was the culprit. It actually causes blurry text if the panels are placed side by side. I don't have a high enough reputation to make a comment so I am answering the question.

UseLayoutRounding="True"

was the fix for my problems as answered by ecreif. although I did not need the other lines of code in his answer, I added them anyways.

Tags:

Wpf

Clarity