18.Jun.15

Vladimir Milev

Vladimir Milev

WPF Text Rendering Quirks with ScaleTransform

Good text rendering has always been one of the cornerstones of good usable UI . This is even more important today with minimalistic trends in UI design such as Metro and Material design. It comes as no surprise then that Microsoft has paid special attention to text rendering in WPF. I have been happily using WPF for many years and haven't run into any serious problems/quirks with text rendering so far. This changed recently when I was helping a customer of ours debug some text rendering problems in their application. I had to spend some good time tracking things down, but it ultimately helped me to better understand text rendering in WPF. I will try to share what I have learned in this article. One of the improvements which the text stack update in WPF4 brought was the TextOptions.TextFormattingMode attached property. There is an excellent in-depth read on this topic in this MSDN blog post. If you are curious as well about the other improvements you can read even more here. Back to our client's project. They were using Telerik's RadDiagram component and ModernUI library. They reported having numerous issues with text disappearing and looking very blurry when changing the zoom level on the diagram component (which basically just applied a ScaleTransform render transformation). After investigating the issue the culprit turned out to be the combination of TextFormattingMode="Display" and ScaleTransform. It turns out that the ModernUI library resets the TextBlock's TextFormatting option to "Display" instead of the framework default of "Ideal". Apply a relatively brave ScaleTransform on text with that TextFormatting setting and you have yourselves some problems:

Randomly Disappearing Text

Consider the following simple XAML code which will allow you to observe the issue: We have a TextBlock element with a large font-size say 120pt. I have applied a ScaleTransform to this text using the Slider control. Trying to zoom out the text (i.e. apply a ScaleTransform in order to shrink the size of the container Grid) will cause it to disappear at one point:
text_render_3

Excessively Blurry Text

Consider almost the same XAML fragment with a small modification: Here we have reduced the font size to 12pt and will be doing zooming in (using the ScaleTransform in order to increase the size of the container Grid). This is the result of zooming operation:
text_render_6-1024x326

Solution

The solution as you may have already guessed is very simple - set TextOptions.TextFormattingMode="Ideal" on the TextBlock element. This is the WPF framework default and you usually will not be seeing these issues unless a parent container overrides it (such as ModernUI). Please, don't take this as a rant against that framework or it's author. It is an excellent framework and contribution to the WPF community. He probably did it with a good reason - as we have seen from this article it is sometimes recommended to use the "Display" mode - especially with small text. The nature of this mode is to try to snap the text rendering to the device screen pixels which is most likely the reason for the above quirks. Hopefully you now know the solution if you ever run into these quirks! Thank you for reading and as always - Happy Coding!

If you found this article useful, could you hit any of the share buttons below, so that others can benefit from it, too? Thanks!

Need consulting on this topic?

Yes No