WPF: Why does text and elements blur if I use drop

问题:

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

回答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>

回答2:

It may be a problem with subpixels.

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

回答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.