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

without shadow

Answer 1

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>

Answer 2

It may be a problem with subpixels.

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

Answer 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.