2

Has anyone seen this specific kind of distortion with their xaml text rendering?

Field labels

More field labels

Text on gradient background

This usually happens when the page first renders but when the browser is re-sized bigger or smaller it will then render correctly.

I have tried different text-rendering settings and also made sure I am not setting any height or width constraints that could be impacting the text.

This also happens to the text of custom buttons that I created. Does it have to do with effects-rendering? The buttons and groupboxes do have dropshadows, but would that also affect the plain text on a white background?

Thanks! Jeff

JDL
  • 143
  • 1
  • 1
  • 6
  • I won't claim this is an answer, but I've seen this in WPF when it's misaligned by some fraction of a pixel, so the renderer's having trouble making a good match to the pixel grid. WPF 4+ (I think) has a property which forces things onto the pixel grid which can be useful. Drop shadows can definitely cause this, although not sure why it'd cause it on the other controls. The fix for drop shadows is usually to layer the text on top of (in z-order) the control with the shadow, not within it (in visual tree terms). – Matthew Walton Mar 24 '14 at 13:41
  • post your current XAML. – Federico Berasategui Mar 24 '14 at 14:01

1 Answers1

0

Does it have to do with effects-rendering? The buttons and groupboxes do have dropshadows, but would that also affect the plain text on a white background?

Yes. Setting Effect, BitmapEffect, or CacheMode on an element causes that element to be rasterized, i.e., it is converted from scalable vector form to bitmapped form. This can create visual artifacts like jagged edges (aliasing) when the element gets positioned across device pixels or scaled in size, and text elements tend to suffer the most.

I would avoid using such effects when possible. You may be able to mitigate the problems by setting UseLayoutRounding (WPF 4+) or SnapsToDevicePixels (WPF 3.5+) on an ancestor element to True. Better still, you can follow @MatthewWalton's advice and place your content in front of whichever elements have effects applied instead of within.

Mike Strobel
  • 25,075
  • 57
  • 69