Click here to Skip to main content
Click here to Skip to main content

Drawing smooth text and pictures on the extended glass area of your WinForm in Windows Vista

, 10 Jul 2008
Rate this:
Please Sign up or sign in to vote.
This article tells you how to draw text and pictures correctly on your Vista form's extended glass area.

Introduction

Windows Vista has a new aero theme that includes what we call the glass effect (powered by the Desktop Windows Manager). While the non-client area of all windows get glass for free, extending glass into the client area and drawing text or pictures on glass are things you have to work for, as a developer.

[This intro text is borrowed from Daniel Moth: Windows Vista: Get the glass effect in your C# applications <-You can go to this link and see more about Vista glass ^_^]

[Copyright Daniel Moth, Aug 22, 2006. All rights reserved.]

The demonstration is written in C#, and was tested on Windows Vista Beta 2.5472.

How to extend the frame into client area?

The Desktop Windows Manager (DWM) provides a group of APIs called DWM API, two of them can help us: DwmIsCompositionEnabled and DwmExtendFrameIntoClientArea.

DwmIsCompositionEnabled is used to check whether the glass is enabled by the user:

[System.Runtime.InteropServices.DllImport("dwmapi.dll")]
public extern static int DwmIsCompositionEnabled(ref int en ) ;

And DwmExtendFrameIntoClientArea is used to extend the frame into your window's client area:

[System.Runtime.InteropServices.DllImport("dwmapi.dll")]
public extern static int DwmExtendFrameIntoClientArea(IntPtr hwnd, 
                         ref MARGINS margin ) ;

The second parameter of DwmExtendFrameIntoClientArea is a structure MARGINS, which indicates how far into the client area the frame should be extended. If you want to render the entire client and non-client area as a seamless sheet of glass, just set any margin to -1:

int en=0;
MARGINS mg=new MARGINS();
mg.m_Buttom = -1;
mg.m_Left = -1;
mg.m_Right = -1;
mg.m_Top = -1 ;
//make sure you are not on a legacy OS 
if (System.Environment.OSVersion.Version.Major >= 6)             
{
    DwmIsCompositionEnabled(ref en);
    //check if the desktop composition is enabled

    if(en>0)
    {
          DwmExtendFrameIntoClientArea(this.Handle, ref mg);

    }else{
          MessageBox.Show("Desktop Composition is Disabled!");

    }
}else{
     MessageBox.Show("Please run this on Windows Vista.");
}

If you run your app now, you can’t see any effect. Because the system will draw the client area with the window backcolor automatically. So we have to paint it with a solid black brush(it so happens that the bit pattern for RGB black (0x00000000) is the same as the bit pattern for the 100% transparent ARGB), or just set the TansparencyKey property into your form’s BackColor. Then run your app, there will be the desired effect.

Sample Image - textonglass_6.png

Problems

But soon you will find some problems:

If there’s a Label on the glass area, or you draw some text using a Graphics object, you’ll see the text smoothing works “ugly”. Since it uses the form’s background to determine the color it should smooth against --- if you set the TansparncyKey,it’s the tansparncy key color, if you paint the area with a black brush, it is black, and, even worse, all the black area(usually the control’s text) is also transparent:

Sample screenshot

Sample screenshot

Solution

The solution to these problem is: do not use any Label, and draw the text by yourself. But don’t draw your text directly on the glass using the Graphics.DrawString() method for the ugly text smoothing. You have to “draw” your text into a GraphicsPath object first, then release the path to the glass surface by using the Graphics.FillPath method:

Graphics g = this.CreateGraphics();
GraphicsPath blackfont = new GraphicsPath();
SolidBrush brsh = new SolidBrush(Color.White);

blackfont.AddString("Hello Vista", 
    new FontFamily("Tahoma", (int)FontStyle.Regular, 26, 
    new Point(0, 0), StringFormat.GenericDefault);

//SmoothingMode must be set, or text smoothing will not work

g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality  ;   
g.FillPath(brsh, blackfont);    //Fill the font with White brush

Here is the effect:

Sample screenshot

Or drawing some “glow” behind the text is also OK, the only thing to remember is to do this with the GraphicsPath object:

Graphics g = this.CreateGraphics();

Rectangle r = new Rectangle(pictureBox1.Left, pictureBox1.Top, 
              pictureBox1.Width, pictureBox1.Height);

GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath();

GraphicsPath fontpath = new GraphicsPath();

path.AddEllipse(r);

fontpath.AddString("Hello Vista", new FontFamily("Tahoma"), 
    (int)FontStyle.Regular, 26,pictureBox1.Location , 
     StringFormat.GenericDefault );
PathGradientBrush pgb = new System.Drawing.Drawing2D.PathGradientBrush(path);

Color[] c ={ (Color.Transparent) };

//SmoothingMode must be set, or text smoothing will not work
 
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality  ;  
pgb.CenterColor = Color.FromArgb(255, Color.White);

pgb.SurroundColors = c;

g.FillEllipse(pgb, r);
g.FillPath(Brushes.Black  , fontpath);

Sample screenshot

And drawing a picture with the Alpha channel on the glass area is quite easy, if you make the form into glass by painting it black (that’s also why the demo project did not use the transparency key method to extend the glass). Just call the Graphics.DrawImage() method and it will work correctly.

Sample screenshot

Some Tips

By the way, don’t extend the glass area by using the transparency key method. Because this method has another problem – Click Transparent: When you click on the glass area, you just click something at the back of your window.

Using DrawThemeTextEx

The method above is simple, but not the standard way Windows Vista uses to draw text. Windows Vista provides an API DrawThemeTextEx for us to darw the glowing text on the Aero glass. It's a little complex to use this API.

First, we must create a memory DC by using the P/Invoke API CreateCompatibleDC. Second, you need to create a 32-bit bitmap by using the API CreateDIBSection. Third, select both the bitmap and the font into the memory DC you created before, and draw the text in the memory DC using DrawThemeTextEx. Fourth, draw the text to screen by using BitBlt. Fifth....there's no fifth now, that's all.

Sample screenshot

To see more details, please visit Vista Goodies in C++: Using Glass in Your UI or Aero Glass from Managed Code, or see the GlassText.cs in the code package.

History

  • 08.29.2006 -- Initial post
  • 07.10.2008 -- Source updated

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

About the Author

Pang Wu
Software Developer
China China
Pang is experienced in developing IM system, distributed backend caching & storage system for large scale internet services. He also has a broad interest in playing around all kinds of programming stuff, like hacking, UI programming. He's current project is MSNPSharp, a C# implementation of MSNP API library which allows you to develop your own MSN client and bot. Please see http://code.google.com/p/msnp-sharp/

Comments and Discussions

 
GeneralMy vote of 4 PinmemberBarbu Victor18-Nov-12 4:49 
SuggestionIt's not a perfect way! PinmemberMember 86589752-Aug-12 20:58 
GeneralMy vote of 5 Pinmembertarek-aec14-Apr-12 18:44 
Generalvb6 PinmemberJaseem Ahmed1-Apr-11 9:46 
GeneralRe: vb6 PinmvpDave Kreskowiak19-Jun-11 6:02 
GeneralRe: vb6 Pinmemberi0025-Sep-12 14:46 
GeneralRe: vb6 PinmvpDave Kreskowiak25-Sep-12 17:29 
QuestionIs this a Windows 7 thing I discovered? PinmemberNetForeverOften28-Feb-10 18:31 
AnswerRe: Is this a Windows 7 thing I discovered? PinmemberPang Wu1-Mar-10 18:05 
GeneralRe: Is this a Windows 7 thing I discovered? Pinmemberjase_02415-Apr-10 16:31 
QuestionHow to fix TextBox? PinmemberOleg Shilo5-Feb-10 14:23 
AnswerRe: How to fix TextBox? PinmemberPang Wu5-Feb-10 14:50 
GeneralRe: How to fix TextBox? PinmemberOleg Shilo5-Feb-10 21:55 
GeneralRe: How to fix TextBox? PinmemberNetForeverOften28-Feb-10 18:32 
GeneralRe: How to fix TextBox? PinmemberKing4848828-May-10 11:34 
Generalwhy dwmextendintocilentareo doesn't take effect when the SetWindowRgn is used Pinmembermarch199327-Jan-10 3:09 
GeneralRe: why dwmextendintocilentareo doesn't take effect when the SetWindowRgn is used PinmemberPang Wu27-Jan-10 15:29 
GeneralDraw Text flicker... Pinmemberalecic20-Nov-09 4:44 
GeneralRe: Draw Text flicker... PinmemberPang Wu5-Dec-09 0:19 
GeneralI Uses VB, i wrote the code with dwmexteadclientintoarea and draw a string,but the program unable to debug Pinmemberleesong12-Oct-09 14:12 
GeneralRe: I Uses VB, i wrote the code with dwmexteadclientintoarea and draw a string,but the program unable to debug PinmemberPang Wu12-Oct-09 18:12 
GeneralRe: I Uses VB, i wrote the code with dwmexteadclientintoarea and draw a string,but the program unable to debug PinmemberNetForeverOften28-Feb-10 18:35 
GeneralMy vote of 1 PinmemberEmil - Gabriel17-Sep-09 7:51 
GeneralRe: My vote of 1 PinmemberPang Wu12-Oct-09 18:15 
GeneralDraw Text in another color PinmemberAlireza Noori28-May-09 4:50 
GeneralRe: Draw Text in another color PinmemberPang Wu28-May-09 5:32 
GeneralRe: Draw Text in another color PinmemberAlireza Noori29-May-09 10:17 
QuestionMultiline Text with Scroller PinmemberAlireza Noori27-May-09 22:29 
AnswerRe: Multiline Text with Scroller PinmemberPang Wu28-May-09 5:10 
GeneralCreate glow for path PinmemberMember 195774114-Jul-08 23:14 
QuestionUsing glass with double buffer Pinmemberfdpsfred1-Jan-08 6:15 
GeneralRe: Using glass with double buffer PinmemberPang Wu2-Jan-08 4:05 
GeneralRe: Using glass with double buffer Pinmemberfdpsfred6-Jan-08 7:25 
GeneralRe: Using glass with double buffer PinmemberPang Wu7-Jan-08 5:26 
GeneralRe: Using glass with double buffer Pinmemberfdpsfred7-Jan-08 20:50 
GeneralRe: Using glass with double buffer Pinmembergslime1827-Jun-08 13:27 
GeneralRe: Using glass with double buffer PinmemberPang Wu12-Jul-08 18:15 
QuestionWhy the aero can not show if FormBorderStyle = none Pinmemberstevenyoung7-Nov-07 1:12 
AnswerRe: Why the aero can not show if FormBorderStyle = none PinmemberPang Wu7-Nov-07 3:42 
GeneralRe: Why the aero can not show if FormBorderStyle = none PinmemberScotley23-Apr-08 19:20 
GeneralRe: Why the aero can not show if FormBorderStyle = none Pinmemberneoandrew13-Dec-08 2:23 
GeneralRe: Why the aero can not show if FormBorderStyle = none PinmemberMikeDaMan259419-Sep-09 7:01 
GeneralRe: Why the aero can not show if FormBorderStyle = none PinmemberDennis_Aries27-Sep-09 22:26 
QuestionHow to draw the line multi-lines(line wrap) text? Pinmemberstevenyoung7-Nov-07 1:09 
AnswerRe: How to draw the line multi-lines(line wrap) text? PinmemberPang Wu7-Nov-07 3:38 
GeneralRe: How to draw the line multi-lines(line wrap) text? PinmemberHayden Ball4-May-09 10:21 
GeneralRe: How to draw the line multi-lines(line wrap) text? PinmemberPang Wu4-May-09 18:52 
GeneralRe: How to draw the line multi-lines(line wrap) text? PinmemberHayden Ball5-May-09 10:55 
GeneralRe: How to draw the line multi-lines(line wrap) text? PinmemberPang Wu5-May-09 21:54 
GeneralRe: How to draw the line multi-lines(line wrap) text? PinmemberHayden Ball6-May-09 0:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 10 Jul 2008
Article Copyright 2006 by Pang Wu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid