How can I draw a true transparent label above the desktop without weird outline?

Question

5.00/5 (2 votes)

See more:

Hi there,

Sorry about my English first. I am trying to write a program to show lyrics on the screen above all the window.I found a third party application doing the same thing and its effect is very nice. Here is the URL to see it http://www.easyremember.net/downloads/ThirdParty1.jpg[^]

I used my own customized label to drawing the lyrics and almost get the same effect, only the difference is there always the wired outline showing. See what my application drew http://www.easyremember.net/downloads/MyApp1.jpg[^]

The way I make the label transparent is below code:

C#

this.TransparencyKey = this.MyLabelWord.BackColor;

Please notice the little difference about the outline color around the words when the desktop background is not white.Especially the words "That you". I tried to set the difference back color of my label, the use this.TransparencyKey = this.MyLabelWord.BackColor; to make it transparent.No matter what backcolor I choose, when it works in transparent mode, there is always a outline around the letters since the desktop always has difference color. But the third party application always draws the perfect strings no matter you move it to where.

But if my application is not in transparent mode, it is very close to the third party application except the color difference. There is no outline. This is screen shot of the third party application show lyrics in white back ground.
http://www.easyremember.net/downloads/ThirdParty0.jpg[^]

This is screen shot of the my application show lyrics in white back ground.
http://www.easyremember.net/downloads/MyApp0.jpg[^]

My question is how can I get rid of the outline in transparent mode. How can I get the same effect as that application?

The way I draw the label with two color is just wrote a OnPaint() using GDI+ drawstring method. It works similar to bellow codes, the original one is too long to post ( There are more codes dealing with multiline, highlight text, highlight color etc...)

C#

protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
        {
            Graphics g1 = e.Graphics;

            g1.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;

            Rectangle rect = new Rectangle(0, 0, this.Font.Height, this.Font.Height);
            LinearGradientBrush myBrush = new LinearGradientBrush(rect,Color.White,Color.Blue,LinearGradientMode.Vertical);
            g1.TextRenderingHint = TextRenderingHint.AntiAlias;

            try 
            {
               g1.DrawString(string1, this.Font, myBrush, 0, 0); 

            }
            catch
            {

            }
            finally
            {
                // Dispose of brush resources after use
                //it's important to call the Dispose() method after using a Pen or Brush. 
                myBrush.Dispose();
            }
        }

I found very similar example using c++ . You can download and run it, it's very small application, but exactly what I need.http://www.codeproject.com/KB/GDI-plus/DesktopLyrics.aspx The problem for me now is I am not familiar with C++. If somebody can translater it to c#, that will be perfect solution for me. Thanks a lot in advance!

Posted 15-Mar-11 18:08pm

Hanson Cheng

Updated 17-Mar-11 5:55am

v6

Add a Solution

4 solutions

Solution 4

Answering a follow-up Question:

Actually I tried this before, the problem I met is to draw the background picture I need capture the image underneath first.

It is not quite clear what do you mean by "capture". Do you mean screen capture? Why do you need it if this your program anyway. Let me do some assumption. Probably you simply need to capture some currently rendered graphics from your application, but you need not all the layers blended together (as I understand, only what goes "under" the text). Yes, you cannot just "capture it" from already rendered screen, as information is already lost (more exactly, entropy increased). So you should preserve this data instead. This is how.

Abstract out the rendering of every separate layer into a method agnostic to a Graphics object. The parameter of each layer render function would be the two System.Drawing.Rectangle (or Size) and System.Drawing.Graphics (maybe some more, due to your application semantic). Let me call these functions RenderLayer. Now, have a command "Save Layer" (not "Layer" of course, some semantic name, like "Score images").

Call one of two of your RenderLayer methods from two different places. One place is already done: this is your control's Paint handler or overridden OnPaint: "lower" layer(s), first, upper next. Another place is a call from you "Save" handler. Let's assume you want to store it in file. Create a bitmap, calculate the required size, instantiate a bitmap, obtain its Graphics instance (in "using" block to ensure automatic Dispose) and then call your RenderLayer with this Graphics instance and proper Size or Rectangle. Close and save the bitmap. Something like that.

Is that clear now?

[EDIT]
I almost forgot: I wanted to suggest switching to WPF. Many problems we're discussing are already solved, and performance is better. I would forget about rendering whatsoever.
I fully support the idea suggested by Espen, please see his advice.
--SA

—SA

Posted 16-Mar-11 10:49am

Sergey Alexandrovich Kryukov

Updated 16-Mar-11 11:28am

v2

Comments

Espen Harlinn 16-Mar-11 17:42pm

My 5
Depending on how a control has been implemented:
"For some common controls, the default WM_PAINT message processing checks the wParam parameter. If wParam is non-NULL, the control assumes that the value is an HDC and paints using that device context." From http://msdn.microsoft.com/en-us/library/dd145213(v=vs.85).aspx

When it works - and it often does, he can send a WM_PAINT to the window below his label passing a handle to a memory DC.

This technique was used by the initial authors of the open source delphi RX library to provide similar functionality.

Sergey Alexandrovich Kryukov 16-Mar-11 18:47pm

Thank you, Espen.
That's true, but with the abstraction provided by the class Graphics things are much simpler than that. And even simpler with WPF, as we both agree.
--SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2011-03-15T18:20:00

Solution 1

I do not recommend using transparency mode. Not using it could solve all your problems. You're rendering you graphics on Control anyway (on a Form, as I can see) anyway. This is very good.

Instead, you should simple use transparent colors. All GDI+ objects, including the gradient brush you use can use colors with alpha channel which actually represent transparency. See: http://msdn.microsoft.com/en-us/library/at1k42eh.aspx[^], http://msdn.microsoft.com/en-us/library/ms142561.aspx[^], and so on.

—SA

Posted 15-Mar-11 18:20pm

Sergey Alexandrovich Kryukov

Comments

Sergey Alexandrovich Kryukov 16-Mar-11 1:45am

OP commented:

Hi SA,

Thank you for your quick reply.
I have checked the 2 links, but still didn't get it. I did use LinearGradientBrush to drawstring on the label. But the label is in the WinForm, how can I make the winForm transparent? I need show string on the desktop directly.

Thanks

Sergey Alexandrovich Kryukov 16-Mar-11 1:56am

I think you're using wrong design. There is no physical "transparency" in the video card, right? Transparency simply means that you have two (or more) layers of graphics; usually pictured as painted on plates of absolutely transparent glass. Let's say, there are two. Why doing second (top) layer transparent? To show something underneath. In fact, you simply will get a colors of two layers blended together. You should not use transparent windows which is inherently problematic (and you should not render anything on a form, you should draw on custom control, and make a control as a child of the form or another control, and you don't need your transparent control). Use the control, and in its Paint (or OnPaint) draw your 2 layers: background picture first, you semi-transparent layer with text second. If you only use alpha channel on your text layers, if will be blended automatically to show effect of transparency.

Is that clear now?

--SA

Hanson Cheng 16-Mar-11 11:33am

Thank you for your explanation. "Use the control, and in its Paint (or OnPaint) draw your 2 layers: background picture first, you semi-transparent layer with text second." Actually I tried this before, the problem I met is to draw the background picture I need capture the image underneath first. I tried using "opacity=0" first then capture the image covered by the container form, but this way made flashing when I move the text around the screen. Is there any other way I can capture the image underneath?

Sergey Alexandrovich Kryukov 16-Mar-11 16:51pm

OK, I has to post whole bit Answer to explain that. You could find this way yourself after some thinking. If I addressed wrong problem, please forgive me. In this case, clarify and ask another follow-up question.
--SA

Hanson Cheng 16-Mar-11 22:56pm

I found this article "Desktop Lyrics"excactly doing the same thing. http://www.codeproject.com/KB/GDI-plus/DesktopLyrics.aspx But it is written by c++. I noticed ths steps:
1. Create a compatible bitmap.
2. Draw on the bitmap.
3. Draw bitmap on the device content.
4. Invoke the UpdateLayeredWindows().
Then I found UpdateLayeredWindows maybe the API I need. Then I googled and found this article http://www.vcskicks.com/splash-screen.php. So I start to study both the article.
I believe this is the direction I should go.

Sergey Alexandrovich Kryukov 16-Mar-11 23:03pm

It would work but the bitmap is ***completely*** redundant. Will only eat up memory and performance. This is typical, usual, boring mistake. I'm not sure how about transparency. You control can have DoubleBuffering options. What this bitmap does? It does not have any additional value, only looks more understandable. There are additional problems: how you resize? A whole story. No, you should draw on control.
--SA

Hanson Cheng 17-Mar-11 0:30am

You can download and run it, it's very small application, but exactly what I need. The problem for me now is I am not familiar with C++.
http://www.codeproject.com/KB/GDI-plus/DesktopLyrics.aspx

Sergey Alexandrovich Kryukov 17-Mar-11 0:56am

Throw it out, I tell you. Just trash it.

C++ eats up an order of magnitude more time even for the experienced compared to C#, maybe three orders of magnitude by novice. And the approach, if I can trust you description, is wrong (this approach is due to normal mental inertia, in implementation it's harder and run-time is no good).

Look, if you really needs something ready-to-use, go to WPF. All is already done there. And forget all your Forms as nightmare. For me it's easy, but you're hanging around for a long time I thing, still figuring the basic techniques.

What do you do? Music? I'm very interested in that? Just for yourself or something more serious?

--SA

Hanson Cheng 17-Mar-11 1:34am

Actually it's not a music player, it is a free software for learning English vocabulary. It shows the words and sample sentences on desktop and play the audio. There is a timer to control how often the word and sentence will be changed, ect. I want to improve the dispaly effection for current version. Most of the current users are still using .net 2.0 on Windows XP.I need a main upgrade if I use WPF, it's also new to me. More than 20000 users have instaleld the software, but not too many people use it every day. I will say about 600 users run it today.

I am not a professional programer, I just do this in my spare time.

You see I have no problem drawing the string on the form or label, but the difficult part is making the form transparent to the desktop and keep the string beautiful. Since the string need be moved around, I don't think capture the back image and draw it under the string is a good idea. It will make it flashing when move it.

I tird to find an article about this but only find one writing in c++.

I really appreciate you spend your time on my question. Thank you!

Sergey Alexandrovich Kryukov 17-Mar-11 1:48am

OK, I though it was musics with notation, scores, theory, etc.
Well if you're not such a master of programming, I suggest you do not learn C++, (will have a chance to learn something newer, maybe later) and switch to WPF which is easier for graphics, especially diagrams. You do not render, you only place object on canvas, move them, resize, animate, zoom/pan. Basically, no low-level (unless you drill to much in). All graphics can be vector. You can even draw vector pictures (InkSpace: wonderful thing, in SVG), convert it to XAML and put on your canvas, in design time or even run-time, so -- no low-level drawing.

Think about it.
--SA

Albin Abel 16-Mar-11 2:12am

Good explanation. I am remembering my drawing class where we use a dry color technique. paint with one color, let it dry and then paint another color over it, it gives blend at the overlapping places. Hmm transparent water color pigments get into alpha channel. I think your explanation is more than enough to say what is transparency. My 5

Sergey Alexandrovich Kryukov 16-Mar-11 3:27am

Yes, water color, right? I've done it... Prefer wet technique or "dry brush", did you try it? (I invented the technique when I was a child, before I read about it.) This days, we do layers in Photoshop (I use GIMP now)...
Thank you, Albin.
--SA

Albin Abel 16-Mar-11 8:38am

Good, But sadly code project missed you when you invented that technique. Will give a try to GIMP. thanks

Sergey Alexandrovich Kryukov 16-Mar-11 15:37pm

Thank you, Albin.
--SA

Sergey Alexandrovich Kryukov 16-Mar-11 16:07pm

Did you get that I mean "hardware" brush, made of wood, metal and hair? :-)
Also india ink (best) or gouache. Still like water color, but did not master it so well...
--SA

Espen Harlinn 16-Mar-11 14:38pm

Good points - my 5 :)

Sergey Alexandrovich Kryukov 16-Mar-11 15:37pm

Thank you, Espen.
--SA

Espen Harlinn · Accepted Answer · 2011-03-16T08:36:00

Solution 3

You could consider moving your application to WPF - my guess is that you would find it a lot more satisfying, as it seems that you enjoy creating graphics - it offers a far richer environment for playing around with fancy graphics.

Take a look at XAML Overview[^] for more information.

Regards
Espen Harlinn

Posted 16-Mar-11 8:36am

Espen Harlinn

Comments

Sergey Alexandrovich Kryukov 16-Mar-11 17:26pm

Oh, I completely forgot that I forgot to recommend WPF instead. I added a new Answer, because now the discussion goes deep in design with persistence, capture and what not (take a look, by the way, makes sense).
My 5. I'll join you by referencing this.
--SA

Sergey Alexandrovich Kryukov 16-Mar-11 17:29pm

OK, done. I supported your advice in my second Answer and referenced this one.
Teamwork? :-)
--SA

Espen Harlinn 16-Mar-11 17:33pm

Thank you, SAKryukov!

Hanson Cheng 17-Mar-11 0:38am

Thank you for replay. But WPF needs .net 3.0, my current application is running on .net 2.0.

Espen Harlinn 17-Mar-11 9:46am

.Net 2.0, 3.0 and 3.5 - are in many ways the same thing, as the 3.0 and 3.5 uses the same runtime as 2.0 - think of as installing additional libraries :)

Hanson Cheng · Accepted Answer · 2011-03-17T18:53:00

I figuted it out by study on http://www.codeproject.com/KB/GDI-plus/DesktopLyrics.aspx and http://www.vcskicks.com/splash-screen.php

I am trying my best to explain it bellow:

The Key is to use API.UpdateLayeredWindow(). It enable my application to display background images with transperancy.
The other trick is where I draw the text. instead of drawing the text on the Windows Form or Label directly, it needs draw it on a bitmap. The bitmap is not any component from tool box, it's in the memory.(All regular component won't be shown).

As the first article "To Create A COOL Desktop Lyrics Demo (A Gift To All People On CP)[^]"said, the steps are:
1. Create a compatible bitmap. 2. Draw the Text with the color and font on the bitmap. 3. Draw bitmap on the device content. 4. Invoke the UpdateLayeredWindows().

All those steps need do when OnPaint Event happen. Bellow is my codes to draw the Text of the Form on the desktop.

C#

#region FORM EVENTS -------------------------------------------------------
private void Form1_Load(object sender, EventArgs e)
{
    UpdateFormDisplay(this.BackgroundImage);
}
protected override void OnPaint(PaintEventArgs e)
{
    //Call our drawing function
    UpdateFormDisplay(this.BackgroundImage);
}
#endregion


        //Updates the Form's display using API calls
        public void UpdateFormDisplay(Image backgroundImage)
        {
            IntPtr screenDc = API.GetDC(IntPtr.Zero);
            IntPtr memDc = API.CreateCompatibleDC(screenDc);
            IntPtr hBitmap = IntPtr.Zero;
            IntPtr oldBitmap = IntPtr.Zero;
            Graphics g1 = this.CreateGraphics();
            SizeF thissize = g1.MeasureString(Text, this.Font);
            Bitmap bmp = new Bitmap( (int) thissize.Width,(int) thissize.Height);
            g1 = Graphics.FromImage(bmp);
            try
            {
                g1.SmoothingMode = SmoothingMode.AntiAlias;
                g1.InterpolationMode = InterpolationMode.HighQualityBicubic;
               LinearGradientBrush myBrush = new LinearGradientBrush(new Rectangle(0, 0, this.Font.Height,this.Font.Height), Color.White, Color.Blue, LinearGradientMode.Vertical);

                SolidBrush backBrush = new SolidBrush(Color.FromArgb(100,this.BackColor)); // draw the back color, 0 is transparent , 255 is solid back bolor.
                g1.FillRectangle(backBrush,0,0,thissize.Width,thissize.Height); // disable this line if you don't want background
                this.Size = new Size((int) thissize.Width, (int) thissize.Height);
                g1.DrawString(Text, this.Font, myBrush, 0, 0);
                hBitmap = bmp.GetHbitmap(Color.FromArgb(0));  //Set the fact that background is transparent  
                oldBitmap = API.SelectObject(memDc, hBitmap);
                //Display-rectangle
                Size size = bmp.Size;
                Point pointSource = new Point(0, 0);
                Point topPos = new Point(this.Left, this.Top);
                //Set up blending options
                API.BLENDFUNCTION blend = new API.BLENDFUNCTION();
                blend.BlendOp = API.AC_SRC_OVER;
                blend.BlendFlags = 0;  // Must be zero.
                blend.SourceConstantAlpha = 255;
                blend.AlphaFormat = API.AC_SRC_ALPHA;
                API.UpdateLayeredWindow(this.Handle, screenDc, ref topPos, ref size, memDc, ref pointSource, 0, ref blend, API.ULW_ALPHA);

                //Clean-up
                bmp.Dispose();
                API.ReleaseDC(IntPtr.Zero, screenDc);
                if (hBitmap != IntPtr.Zero)
                {
                    API.SelectObject(memDc, oldBitmap);
                    API.DeleteObject(hBitmap);
                }
                API.DeleteDC(memDc);
            }
            catch (Exception)
            {
            }
            finally
            {
                g1.Dispose();
                bmp.Dispose();
            }

        }
 
        protected override CreateParams CreateParams
        {
            get
            {
                CreateParams cp = base.CreateParams;
                cp.ExStyle |= 0x00080000; // Required: set WS_EX_LAYERED extended style
                return cp;
            }
        }

C#

internal class API
   {
       public const byte AC_SRC_OVER = 0x00;
       public const byte AC_SRC_ALPHA = 0x01;
       public const Int32 ULW_ALPHA = 0x00000002;
       [StructLayout(LayoutKind.Sequential, Pack = 1)]
       public struct BLENDFUNCTION
       {
           public byte BlendOp;
           public byte BlendFlags;
           public byte SourceConstantAlpha;
           public byte AlphaFormat;
       }
       [DllImport("user32.dll", ExactSpelling = true, SetLastError = true)]
       public static extern bool UpdateLayeredWindow(IntPtr hwnd, IntPtr hdcDst, ref Point pptDst, ref Size psize, IntPtr hdcSrc, ref Point pprSrc, Int32 crKey, ref BLENDFUNCTION pblend, Int32 dwFlags);

       [DllImport("user32.dll", ExactSpelling = true, SetLastError = true)]
       public static extern IntPtr GetDC(IntPtr hWnd);
       [DllImport("gdi32.dll", ExactSpelling = true, SetLastError = true)]
       public static extern IntPtr CreateCompatibleDC(IntPtr hDC);
       [DllImport("user32.dll", ExactSpelling = true)]
       public static extern int ReleaseDC(IntPtr hWnd, IntPtr hDC);
       [DllImport("gdi32.dll", ExactSpelling = true, SetLastError = true)]
       public static extern bool DeleteDC(IntPtr hdc);

       [DllImport("gdi32.dll", ExactSpelling = true)]
       public static extern IntPtr SelectObject(IntPtr hDC, IntPtr hObject);
       [DllImport("gdi32.dll", ExactSpelling = true, SetLastError = true)]
       public static extern bool DeleteObject(IntPtr hObject);
   }

/pre

To make the Text can be moved by mouse, the mousedown event needs to handled.

[DllImportAttribute("user32.dll")]
public static extern int SendMessage(IntPtr hWnd, int Msg, int wParam, int lParam);
public const int WM_NCLBUTTONDOWN = 0xA1;
public const int HTCAPTION = 0x2;
[DllImportAttribute("user32.dll")]
public static extern bool ReleaseCapture();
private void frmSplash_MouseDown(object sender, MouseEventArgs e)
{
ReleaseCapture();
SendMessage(Handle, WM_NCLBUTTONDOWN, HTCAPTION, 0);
}

How can I draw a true transparent label above the desktop without weird outline?

4 solutions

Solution 1

Solution 4

Solution 3

Solution 5

Add your solution here

Preview 0

Existing Members

...or Join us