Click here to Skip to main content
11,415,973 members (83,624 online)
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 GPL3
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)

Share

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 Pin
Barbu Victor18-Nov-12 5:49
memberBarbu Victor18-Nov-12 5:49 
SuggestionIt's not a perfect way! Pin
Member 86589752-Aug-12 21:58
memberMember 86589752-Aug-12 21:58 
GeneralMy vote of 5 Pin
tarek-aec14-Apr-12 19:44
membertarek-aec14-Apr-12 19:44 
Generalvb6 Pin
Jaseem Ahmed1-Apr-11 10:46
memberJaseem Ahmed1-Apr-11 10:46 
can u plz convert this code in vb6...i need same thing for vb, whaT HAVE Y MADE for vb.net..
GeneralRe: vb6 Pin
Dave Kreskowiak19-Jun-11 7:02
mvpDave Kreskowiak19-Jun-11 7:02 
GeneralRe: vb6 Pin
i0025-Sep-12 15:46
memberi0025-Sep-12 15:46 
GeneralRe: vb6 Pin
Dave Kreskowiak25-Sep-12 18:29
mvpDave Kreskowiak25-Sep-12 18:29 
QuestionIs this a Windows 7 thing I discovered? Pin
NetForeverOften28-Feb-10 19:31
memberNetForeverOften28-Feb-10 19:31 
AnswerRe: Is this a Windows 7 thing I discovered? Pin
Pang Wu1-Mar-10 19:05
memberPang Wu1-Mar-10 19:05 
GeneralRe: Is this a Windows 7 thing I discovered? Pin
jase_02415-Apr-10 17:31
memberjase_02415-Apr-10 17:31 
QuestionHow to fix TextBox? Pin
Oleg Shilo5-Feb-10 15:23
memberOleg Shilo5-Feb-10 15:23 
AnswerRe: How to fix TextBox? Pin
Pang Wu5-Feb-10 15:50
memberPang Wu5-Feb-10 15:50 
GeneralRe: How to fix TextBox? Pin
Oleg Shilo5-Feb-10 22:55
memberOleg Shilo5-Feb-10 22:55 
GeneralRe: How to fix TextBox? Pin
NetForeverOften28-Feb-10 19:32
memberNetForeverOften28-Feb-10 19:32 
GeneralRe: How to fix TextBox? Pin
King4848828-May-10 12:34
memberKing4848828-May-10 12:34 
Generalwhy dwmextendintocilentareo doesn't take effect when the SetWindowRgn is used Pin
march199327-Jan-10 4:09
membermarch199327-Jan-10 4:09 
GeneralRe: why dwmextendintocilentareo doesn't take effect when the SetWindowRgn is used Pin
Pang Wu27-Jan-10 16:29
memberPang Wu27-Jan-10 16:29 
GeneralDraw Text flicker... Pin
alecic20-Nov-09 5:44
memberalecic20-Nov-09 5:44 
GeneralRe: Draw Text flicker... Pin
Pang Wu5-Dec-09 1:19
memberPang Wu5-Dec-09 1:19 
GeneralI Uses VB, i wrote the code with dwmexteadclientintoarea and draw a string,but the program unable to debug Pin
leesong12-Oct-09 15:12
memberleesong12-Oct-09 15:12 
GeneralRe: I Uses VB, i wrote the code with dwmexteadclientintoarea and draw a string,but the program unable to debug Pin
Pang Wu12-Oct-09 19:12
memberPang Wu12-Oct-09 19:12 
GeneralRe: I Uses VB, i wrote the code with dwmexteadclientintoarea and draw a string,but the program unable to debug Pin
NetForeverOften28-Feb-10 19:35
memberNetForeverOften28-Feb-10 19:35 
GeneralMy vote of 1 Pin
Emil - Gabriel17-Sep-09 8:51
memberEmil - Gabriel17-Sep-09 8:51 
GeneralRe: My vote of 1 Pin
Pang Wu12-Oct-09 19:15
memberPang Wu12-Oct-09 19:15 
GeneralDraw Text in another color Pin
Alireza Noori28-May-09 5:50
memberAlireza Noori28-May-09 5:50 
GeneralRe: Draw Text in another color Pin
Pang Wu28-May-09 6:32
memberPang Wu28-May-09 6:32 
GeneralRe: Draw Text in another color Pin
Alireza Noori29-May-09 11:17
memberAlireza Noori29-May-09 11:17 
QuestionMultiline Text with Scroller Pin
Alireza Noori27-May-09 23:29
memberAlireza Noori27-May-09 23:29 
AnswerRe: Multiline Text with Scroller Pin
Pang Wu28-May-09 6:10
memberPang Wu28-May-09 6:10 
GeneralCreate glow for path Pin
Member 195774115-Jul-08 0:14
memberMember 195774115-Jul-08 0:14 
QuestionUsing glass with double buffer Pin
fdpsfred1-Jan-08 7:15
memberfdpsfred1-Jan-08 7:15 
GeneralRe: Using glass with double buffer Pin
Pang Wu2-Jan-08 5:05
memberPang Wu2-Jan-08 5:05 
GeneralRe: Using glass with double buffer Pin
fdpsfred6-Jan-08 8:25
memberfdpsfred6-Jan-08 8:25 
GeneralRe: Using glass with double buffer Pin
Pang Wu7-Jan-08 6:26
memberPang Wu7-Jan-08 6:26 
GeneralRe: Using glass with double buffer Pin
fdpsfred7-Jan-08 21:50
memberfdpsfred7-Jan-08 21:50 
GeneralRe: Using glass with double buffer Pin
gslime1827-Jun-08 14:27
membergslime1827-Jun-08 14:27 
GeneralRe: Using glass with double buffer Pin
Pang Wu12-Jul-08 19:15
memberPang Wu12-Jul-08 19:15 
QuestionWhy the aero can not show if FormBorderStyle = none Pin
stevenyoung7-Nov-07 2:12
memberstevenyoung7-Nov-07 2:12 
AnswerRe: Why the aero can not show if FormBorderStyle = none Pin
Pang Wu7-Nov-07 4:42
memberPang Wu7-Nov-07 4:42 
GeneralRe: Why the aero can not show if FormBorderStyle = none Pin
Scotley23-Apr-08 20:20
memberScotley23-Apr-08 20:20 
GeneralRe: Why the aero can not show if FormBorderStyle = none Pin
neoandrew13-Dec-08 3:23
memberneoandrew13-Dec-08 3:23 
GeneralRe: Why the aero can not show if FormBorderStyle = none Pin
MikeDaMan259419-Sep-09 8:01
memberMikeDaMan259419-Sep-09 8:01 
GeneralRe: Why the aero can not show if FormBorderStyle = none Pin
Dennis_Aries27-Sep-09 23:26
memberDennis_Aries27-Sep-09 23:26 
QuestionHow to draw the line multi-lines(line wrap) text? Pin
stevenyoung7-Nov-07 2:09
memberstevenyoung7-Nov-07 2:09 
AnswerRe: How to draw the line multi-lines(line wrap) text? Pin
Pang Wu7-Nov-07 4:38
memberPang Wu7-Nov-07 4:38 
GeneralRe: How to draw the line multi-lines(line wrap) text? Pin
Hayden Ball4-May-09 11:21
memberHayden Ball4-May-09 11:21 
GeneralRe: How to draw the line multi-lines(line wrap) text? Pin
Pang Wu4-May-09 19:52
memberPang Wu4-May-09 19:52 
GeneralRe: How to draw the line multi-lines(line wrap) text? Pin
Hayden Ball5-May-09 11:55
memberHayden Ball5-May-09 11:55 
GeneralRe: How to draw the line multi-lines(line wrap) text? Pin
Pang Wu5-May-09 22:54
memberPang Wu5-May-09 22:54 
GeneralRe: How to draw the line multi-lines(line wrap) text? Pin
Hayden Ball6-May-09 1:08
memberHayden Ball6-May-09 1: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 | Terms of Use | Mobile
Web04 | 2.8.150427.4 | Last Updated 10 Jul 2008
Article Copyright 2006 by Pang Wu
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid