WPF Text rendering problem

Question

I created a custom control similar to TabControl. It works nice, except that the text in header items gets blury when I resize the content. It can, for example look like this:

Not only the text, but the box around the text can also get non-vertical. See the blue border around the "General" item:

What is causing this problem? I have set SnapToDevicePixels = True. Thanks for any ideas!

EDIT:

I'm using .NET 4.0. TextOptions.TextFormattingMode is set to "Display".

The whole problem with fuzzy text and background occurs if I apply a DropShadowEffect effect in the style for ItemsControl which displays the buttons. This is the code for the Effect:

<Setter Property="Effect">
    <Setter.Value>
        <DropShadowEffect Direction="0" ShadowDepth="1" BlurRadius="10" Opacity="0.2" Color="Black" />
    </Setter.Value>
</Setter>

If this code is not enabled, the the text and the borders get displayed nicely.

Answer 1

I suspect you've said it yourself: SnapToDevicePixels will ruin text rendering if you've resized the text so it displays across pixels. You probably want to keep SnapToDevicePixels="True" on your borders/backgrounds, but turn it off for the text elements.

As for your border... can you post the xaml? I'm guessing that you're not using just a single element with rounded corners - are you drawing the edge of that tab as three separate lines?

Answer 2

There are 2 things to consider:

• are you using .NET 3.5 or .NET 4.0? reason why I'm asking is that the text rendering has been changed between the versions. In 4.0 it's a lot better.
• Sometime you have to wait a little while until the text get's sharper, so you scroll around, and then after a second the text becomes sharper. That could be as well a reason for you're issue.