Preserving ClearText when using drop shadows

Introduction

When you apply drop shadows to a design element you often end up loosing ClearType on text that are embedded within the control. 

Example  

 

To the left the text is displayed without ClearType and to the right with ClearType.
The text elements on the left are fuzzy and to some degree blurred out (anti aliased) which makes smaller fonts very hard to read.

Solution 

The solution is to organize the text elements to be in front of the control having a drop shadow instead of being contained within the control.

// From the example above
//
  <Grid>
    <Grid.Background>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop  Color="IndianRed" Offset="0"/>
         <GradientStop  Color="DarkRed" Offset="1"/>
      </LinearGradientBrush>
        </Grid.Background>
        
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="10*"/>
          <ColumnDefinition Width="40*"/>
          <ColumnDefinition Width="40*"/>
          <ColumnDefinition Width="10*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
          <RowDefinition Height="10*"/>
          <RowDefinition Height="40*"/>
          <RowDefinition Height="40*"/>
          <RowDefinition Height="10*"/>
      </Grid.RowDefinitions>
 
      <!-- No ClearType -->
      <Border Grid.Column="1" Grid.Row="1" Background="White" CornerRadius="5" Margin="10"> 
         <Border.Effect>
            <DropShadowEffect Direction="320" BlurRadius=".3" Color="Black" Opacity=".3"/>
         </Border.Effect> 
         <TextBlock VerticalAlignment="Center"HorizontalAlignment="Center" FontSize="28"
                  Foreground="DarkBlue">ClearType</TextBlock> 
      </Border>
 
      <!-- With ClearType --> 
     <Border Grid.Column="2" Grid.Row="1" Background="White" CornerRadius="5" Margin="10">
         <Border.Effect>
             <DropShadowEffect Direction="320" BlurRadius=".3" Color="Black" Opacity=".3"/>
         </Border.Effect>
     </Border>
     <TextBlock Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" FontSize="28" 
                  HorizontalAlignment="Center"Foreground="DarkBlue">ClearType</TextBlock>
    </Grid>
 

This will work for custom controls or user controls among others where it is fairly easy to restructure the content.
Changing common controls like ListView and Calendar requires a bit more work. 

More on ClearType and effects see http://msdn.microsoft.com/en-us/library/ms742190.aspx

Points of Interest 

The effects like drop shadow is calculated on a control and each child control even if child controls does not have visible shadows.
I would expect to see a marginal increase in performance if this solution is used on controls with large number of child elements.

History

1.0: Initial idea.