2

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:

enter image description here

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

enter image description here

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.

Gregor Leban
  • 553
  • 4
  • 17
  • I am having exactly the same problem here. It only occurs when using a DropShadowEffect and TextFormattingMode=Display. Removing one of them fixes the problem, but either it does not have a shadow or the text looks blurred like before .NET 4. This is really annoying. Please let us know if you found a solution! – gehho Sep 20 '12 at 07:33
  • Have you found the solution? – Daniel May 31 '13 at 15:34
  • no I haven't. And the thing is that this anomaly only occurs on some computers and not everywhere. – Gregor Leban Jun 01 '13 at 16:39
  • I have it on one project without problem and on the other text is very blurry. Same computer, same VS, same .net so it not computer specific – Daniel Jun 05 '13 at 19:32

2 Answers2

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?

Dan Puzey
  • 33,626
  • 4
  • 73
  • 96
  • I changed SnapToDevicePixels to false and still get the same result. The xaml for everything is quite large so I don't think it would make sense to publish it. The blue buttons are of type ToggleButton and the content of the button has several borders: – Gregor Leban Mar 21 '11 at 09:34
  • – Gregor Leban Mar 21 '11 at 09:36
  • as I noted in my edited question, the whole problem only occurs if I set Effect property to a DropShadowEffect. Without that effect, there are no problems with rendering. – Gregor Leban Mar 21 '11 at 09:37
0

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.
Martin Moser
  • 6,219
  • 1
  • 27
  • 41