How to make WPF text on Aero glass background readable?

Question

I have a WPF app that draws text on an Aero glass background. The problem is that based on what is displayed behind my application, the text drawn on the glass background can become hard-to-read to downright-impossible-to-read.

As you can see in the following screenshot, the Save, Undo and Redo text blocks become hard to read if the window behind my application is dark.

Now, Microsoft applications, such as Word, solve this with a kind of blur behind text, as you can see in the next screenshot:

I've heard there is some kind of Win32 API call I can make to get this to work. However, that is just hearsay to me at this point, I have no facts to back that up.

---

I've tried a few different WPF-specific things to approximate what Word does:

• Drop shadows on text
• Transparent images of text with a blur baked in (instead of a TextBlock)

None of those give me usable results, they all look pretty crummy. Does anyone know of any method, WPF or Win32, that I could use to draw text the way Microsoft does on glass (i.e., readable)?

Answer 1

I was able to solve this without Win32 (requires .NET 3.5).

 <Grid>
     <TextBlock Foreground="Black" HorizontalAlignment="Center" Margin="0,10,30,0" Text="Text that should be visible on Aero Glass">
         <TextBlock.Effect>
            <BlurEffect Radius="15" KernelType="Gaussian">                                                                    
            </BlurEffect>                                        
         </TextBlock.Effect>
      </TextBlock>
      <TextBlock HorizontalAlignment="Center" Foreground="White" Margin="0,10,30,0" Text="Text that should be visible on Aero Glass">
      </TextBlock>
 </Grid>

This code has the effect of doubling up text and blurring the version of the text that is farther behind, Z-index wise. Works like a charm for me.

One thing to note:
This seems to work best if the text color is white and the blur color is black. It doesn't look so good the other way around. The good news is it looks good regardless of what is behind your Aero Glass window.

Answer 2

The Win32 function you are searching for is DrawThemeTextEx. It has a flag that allows you to draw text with a white glow/blur in the background. You can find an example here: C# Transparent GUI

Answer 3

In case anyone looking for another example, try this it includes backward support for non glass:

Usage:

Style="{StaticResource glassText}"

Goes in a resource dictionary:

 <Style TargetType="TextBlock" x:Key="glassText">
    <Setter Property="Foreground" Value="Black" />
    <Style.Triggers>
        <Trigger Property="Foreground" Value="Black">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="White" BlurRadius="10" RenderingBias="Performance" ShadowDepth="0" Direction="0" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>
<Style TargetType="TextBlock" x:Key="glassLink" BasedOn="{StaticResource glassText}">
    <Setter Property="Foreground" Value="#FF0066CC" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="TextDecorations" Value="Underline" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{x:Static SystemColors.GrayTextBrush}" />
        </Trigger>
    </Style.Triggers>
</Style>