Oct 05 2009
Transparent WindowsForms controls & drawing on top of ProgressBar
No, I actually have not given up posting blog entries :) My inactivity was caused by a lot of things that happened recently. I am changing my job, but it is not actually what I wanted to write today about ;) Some things seem to be simple until you really try to do it. It was exactly the case of one of the questions on StackOverflow that I found. So, how do you create a progress bar with text on top of it? Well, it seems that the easiest way to do it, is just to derive from Progressbar control, override OnPaint and use Graphics to draw anything, right? Well… the idea itself works for other controls but unfortunately not for ProgressBar. It is really strange, but ProgressBar control seems to ‘overdraw’ somehow everything what should be placed on top of it. The second problem is that WindowsForms controls does not support transparency. In WPF it is simple, what could be simpler than adding one attribute with specified opacity?
But hey… there are no things ‘impossible’ for software developers, right? I tried different approaches, and step by step I was just getting closer and closer to the final solution. Just to make it short: my solution is to create:
-
a Label control with transparent background
-
a user control that will hold ProgressBar and a label control (on top of progress bar). This control will be used instead of standard progress bar control.
-
Creating label control with transparent background is a must, because assigning Color.Transparent to BackColor property of Label control does not affect the way the control is rendered. What you really need to do is to create a control, that derives from Label control, and add some code to make this control’s background transparent:
public class TransparentLabel : System.Windows.Forms.Label { public TransparentLabel() { this.SetStyle(ControlStyles.Opaque, true); this.SetStyle(ControlStyles.OptimizedDoubleBuffer, false); } protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.ExStyle |= 0x20; return cp; } } } -
Second control is just a standard UserControl, with a ProgressBar (Dock=Fill) and a TransparentLabel control placed on top of ProgressBar. Code:
public partial class ProgressBarWithTransparentLabel : UserControl { public ProgressBarWithTransparentLabel() { InitializeComponent(); } protected override void OnPaint(PaintEventArgs e) { this.progressBar1.SendToBack(); this.transparentLabel1.BringToFront(); this.transparentLabel1.Text = this.progressBar1.Value.ToString(); this.transparentLabel1.Invalidate(); } public int Value { get { return this.progressBar1.Value; } set { this.progressBar1.Value = value; } } }
And… that’s it. You may also want to download complete source (C#) and see if it works for you (I do hope so!). Please, mind that I was creating it with Visual Studio 2010 Beta, so you may need to create a project/solution for yourself, and just copy the .cs files and add them to your project. Happy coding!
Oh, you may wonder why do I constantly invoke SendToBack and BringToFront methods in OnPaint – well, this is done to avoid this ‘overdrawing’ of anything was is being placed on top of ProgressBar. I don’t know why ProgressBar works like this, but… nevermind it just works this way, and if you want to use it, you have to live with it.
And just to prove, that I am not cheating ;)
