Clear Text On Windows Aero Glass

Introduction

This tip will show you how to get perfectly clear text on Aero glass very easily.

Background

I started using the Aero glass effect by calling DwmExtendFrameIntoClientArea from dwmapi.dll.

To get a highly-professional design, I wanted to have the glass as the background of the form, with controls such as labels, pictureboxes, etc. on top of it.

The problem with this is that the glass changes the alpha channel of the labels, etc. This causes these awful effects:

1. All colours are lighter than intended
2. All controls have a backcolor, and consequently have an ugly, blurry outline
3. Black controls become completely transparent

How to Achieve Perfect Text Clarity

The reason why this method is so easy is because it only takes 5 minutes. Here's the idea behind it.

If you want to have the Aero effect, you cannot have clear, high-quality text. So you don't use Aero-that's the secret. This will be explained in Method-Part 2.

Method

Part 1

Firstly, if you don't already have the code to implement Aero, use this:

<StructLayout(LayoutKind.Sequential)> Public Structure MARGINS

        Public LeftWidth As Integer
        Public RightWidth As Integer
        Public TopHeight As Integer
        Public Bottomheight As Integer
End Structure

<DllImport("dwmapi.dll")> Private Shared Function DwmExtendFrameIntoClientArea_
(ByVal hwnd As IntPtr, ByRef margins As MARGINS) As Integer
End Function

Private Sub SetGlassRegion()
        Dim margins As MARGINS = New MARGINS
        margins.LeftWidth = -1
        margins.RightWidth = -1
        margins.TopHeight = -1
        margins.Bottomheight = -1
        DwmExtendFrameIntoClientArea(Me.Handle, margins)
End Sub

To apply the glass effect, call SetGlassRegion().

C#

[StructLayout(LayoutKind.Sequential)]
public struct MARGINS
{
        public int leftWidth;
        public int rightWidth;
        public int topHeight;
        public int bottomHeight;
}

private void SetGlassRegion
{ 
        MARGINS margins = new MARGINS();
        margins.LeftWidth = -1;
        margins.RightWidth = -1;
        margins.TopHeight = -1;
        margins.Bottomheight = -1;
        DwmExtendFrameIntoClientArea(this.Handle, margins);
}

To apply the glass effect, call SetGlassRegion();.

Part 2

The idea is to change the form's BackgroundImage to an image of the Aero effect. As a result, there is no actual alpha blending and the text is perfectly clear.

You need to set the Visible property of all of the controls on the form to False.

After that, open up Notepad and maximize it. This is to get a plain, white background.

Next, take a screenshot:

Now, using a piece of image editing software that supports transparency such as Paint.net, crop the image to just the form itself, and delete the corners so they're transparent.

Finally, save the image in a .tif format for best quality.

Part 3

All that's left to do now is apply the image. Delete the code for Aero glass, and set the form's BackgroundImage to the .tif that you just created. The very last thing to do is set the Visible property of all of the controls on the form to True again. And now you have perfectly clear text on Aero glass.

Advantages of this Method

1. Very quick
2. Much better rendering
3. More flexibility in terms of graphics capability

Disadvantages of this Method

You have to create a button to act as the form's close button and lay it over the real button's image, that's all.

Points of Interest

I was so fed up with alpha blending ruining my ideas of professional design, and didn't want to have to learn how to program in WPF for just one application. So I was sitting there, and thought of this amazing idea.

A Final Note

Thank you for reading my tip. I hope it helps you as you've probably come here because you tried everything and can't get it to show clear text!

All the best to everyone,

-Rixterz