WPF: Why does text and elements blur if I use dropshadow effect on a parent item

Question

If I add a DropShadowEffect to an parent element the text of the child elements are blurred. Why?

<Grid>
    <Grid.Effect>
        <DropShadowEffect />
    </Grid.Effect>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock Background="White">Test</TextBlock>
</Grid>

Update:

with shadow

enter image description here

without shadow

enter image description here

I'm working with Windows XP over Parallels on my Mac, could this be the problem? — Smolla, Jun 23 '11 at 08:59
Good question. I work with Visual Studio 2010 Express. Where can I find the version of the WPF? — Smolla, Jun 23 '11 at 09:51
@Smolla should be 4, anyway check the version on PresentationCore — Felice Pollano, Jun 23 '11 at 09:52
@Smolla tryed with 2010 too, same as in kaxaml test is ok on my side — Felice Pollano, Jun 23 '11 at 09:55

Patrick Klug · Accepted Answer · 2012-06-20T00:23:28.187

53

The reason why the text is blurred is because Effects cause the elements and all sub-elements to be rendered into a Bitmap first. This means that sub-pixel rendering (ClearType) cannot take place and therefore the text appears lower-quality.

You can work around this by applying the effect to only parts of your visual tree. The parts that don't contain the text.

In your case you probably want something like this:

<Grid>
    <Border>
        <Border.Effect>
            <DropShadowEffect />
        </Border.Effect>
    </Border>
    <TextBlock Background="White">Test</TextBlock>
</Grid>

edited Jun 20 '12 at 00:23

answered Aug 04 '11 at 06:38

Patrick Klug

14,056
13
71
118

1

This should be marked as the accepted answer since it's clearly the right one. I think you might need to set the backround on the border instead of the textblok below for the drop shadow to show, since it wont show if border has not visual part to cast the shadow from. – Øyvind Bråthen Oct 15 '12 at 07:01
Thanks Patrick for your answer, which I accepted. Sorry for the delay ;) – Smolla Dec 04 '12 at 10:35
The accepted answer cannot be entirely correct, because in my case (where the shadow is directly on the text but the effect is applied to the ContentProvider) is fine in the designer but not in the running app. There's something more going on here. – Feb 17 '13 at 00:59
4

You can also try `` This has helped me. – Darren Oct 10 '13 at 15:11
I tried this but depending on the location on the screen, the border is offset by a pixel in different directions, presumably due to rounding. – xr280xr Jan 29 '15 at 17:28

score 25 · Answer 2 · edited Feb 20 '13 at 01:42

25

It may be a problem with subpixels.

Try to add UseLayoutRounding = "True" to the grid.

edited Feb 20 '13 at 01:42

António Almeida

9,620
8
59
66

answered Feb 20 '13 at 01:21

labito

251
3
2

score 3 · Answer 3 · edited May 23 '17 at 11:54

3

Try adding TextOptions.TextFormattingMode="Display" to the TextBlock as shown in WPF Blurry fonts problem - Solutions.
The effect might somehow increase the "bluriness" by e.g. moving the grid some fractions of a pixel or so.

edited May 23 '17 at 11:54

Community

1
1

answered Jun 22 '11 at 08:02

Matthias

12,053
4
49
91

3

This didn't change anything :( – Smolla Jun 23 '11 at 08:58
Try adding it to the TextBlock, not the Grid. – LawMan Aug 27 '14 at 19:57

WPF: Why does text and elements blur if I use dropshadow effect on a parent item

3 Answers3

Linked