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

Transparent Label .NET Control

By , 9 Sep 2010
 

Introduction

I think many people are having trouble creating a transparent label over a gradient background painted control.

This article illustrates an approach to showing transparent Labels in a Windows based application. uLabelX control in this library is designed to be flexible and stylish in its look. First of all, it supports border shapes, Images and parent controls with gradient backgrounds. Images you have associated with control can be drawn in Alpha Blended form. Texts in the control can be drawn with advanced effects. All these attractions can also be personalized for different states of the controls.

Full.png

Using the Code

The project contains the following files:

  • BorderStyles.vb (Specifies the border style of the Control)
  • ImageSizes.vb (Specifies the Image Size of the Control)
  • uLabelXDesigner.vb (Specifies the class used to implement design-time services for the control)
  • uLabelX.vb (Specifies the custom Control Class)

ULabelX_Prj.png

The Control Class uLabelX Inherited from the base class Control.

Public Class uLabelX 
	Inherits Control 

Constructor

Public Sub New()
InitializeComponent()
	Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
	Me.SetStyle(ControlStyles.ResizeRedraw, True)
	Me.SetStyle(ControlStyles.Opaque, False)
	Me.SetStyle(ControlStyles.OptimizedDoubleBuffer, False)
		AddHandler Me.PropertyChanged, AddressOf OnPropertyChanged
		RaiseEvent PropertyChanged(False)
End Sub

Events

Event Declaration
Protected Event PropertyChanged(ByVal _RecreateHandle As Boolean)
Method Invoked when Property Changed
Private Sub OnPropertyChanged(ByVal _RecreateHandle As Boolean) 
 	If (_RecreateHandle = True) Then Me.RecreateHandle() 
	Me.Invalidate() 
End Sub 

Properties

Properties.png

' Gets or sets the Image of the control 
Public Property Image() As Image 
	Get 
		Return m_Image 
	End Get 
	Set(ByVal value As Image) 
		m_Image = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 
' Gets or sets the ImageSize of the control 
Public ReadOnly Property ImageSize() As ImageSizes 
	Get 
		Return m_ImageSize 
	End Get 
End Property 
' Gets or sets the BorderStyle of the control 
Public Shadows Property BorderStyle() _
	As iGreen.Controls.uControls.uLabelX.Common.BorderStyles 
	Get 
		Return m_BorderStyle 
	End Get 
	Set(ByVal value As iGreen.Controls.uControls.uLabelX.Common.BorderStyles) 
		m_BorderStyle = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 

Panel2.png

' Gets or sets the BorderDashStyle of the control 
Public Property BorderDashStyle() As System.Drawing.Drawing2D.DashStyle 
	Get 
		Return m_BorderDashStyle 
	End Get 
	Set(ByVal value As System.Drawing.Drawing2D.DashStyle) 
		m_BorderDashStyle = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 
' Gets or sets the BorderWidth of the control 
Public Property BorderWidth() As Single 
	Get 
		Return m_BorderWidth 
	End Get 
	Set(ByVal value As Single) 
		m_BorderWidth = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 
' Gets or sets the BorderColor of the control 
Public Property BorderColor() As Color 
	Get 
		Return m_BorderColor 
	End Get 
	Set(ByVal value As Color)
	m_BorderColor = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 

Top.png

' Gets or sets the Text of the control. 
' Represents Text as a series of Unicode characters. 
Public Overrides Property Text() As String 
	Get 
		Return Replace(MyBase.Text, "ULabelX", "uLabelX") 
	End Get 
	Set(ByVal value As String) 
		MyBase.Text = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 
' Specifies alignment of Text on the control. 
' Placement and direction of text in relation to the control border 
Public Property TextAlign() As ContentAlignment 
	Get 
		Return m_TextAlign 
	End Get 
	Set(ByVal value As ContentAlignment) 
		m_TextAlign = value 
		RaiseEvent PropertyChanged(True) 
	End Set 
End Property 

Methods

Here we are Overriding OnPaintBackground(), otherwise the background draw task spoils the recently repainted parent control content by crushing out the OnPaintBackground() method.

Protected Overrides Sub OnPaintBackground(ByVal e As PaintEventArgs) 
	' NOTHING TODO: 
End Sub 
Overriding the following to Refresh the control
Protected Overrides Sub OnFontChanged(ByVal e As System.EventArgs)
	RaiseEvent PropertyChanged(True)
End Sub 
Protected Overrides Sub OnForeColorChanged(ByVal e As System.EventArgs)
	RaiseEvent PropertyChanged(True) 
End Sub
Overriding the base class OnPaint() to draw Control
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e) 
	e.Graphics.CompositingMode = CompositingMode.SourceOver 
	e.Graphics.CompositingQuality = CompositingQuality.GammaCorrected 
	e.Graphics.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias 
		Call DrawControlBorder(e.Graphics, Me.ClientRectangle) 
		Call DrawControlText(e.Graphics, Me.ClientRectangle) 
		Call DrawControlImage(e.Graphics, Me.ClientRectangle) 
End Sub 

In order to remove the unnecessary properties from the designtime property page, here I’m using the ControlDesigner Class’s PostFilterProperties.

Imports System.Windows.Forms.Design
Namespace Common
    Friend Class uLabelXDesigner
        Inherits ControlDesigner
        Protected Overrides Sub PostFilterProperties_
	(ByVal _Properties As System.Collections.IDictionary)
            _Properties.Remove("BackColor")
            _Properties.Remove("BackgroundImage")
            _Properties.Remove("BackgroundImageLayout")
            _Properties.Remove("RightToLeft")
            _Properties.Remove("TabStop")
            _Properties.Remove("TabIndex")
            _Properties.Remove("AutoSize")
            MyBase.PostFilterProperties(_Properties)
        End Sub
    End Class
End Namespace

Hope this can be helpful.
Happy programming !!!

License

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

About the Author

Koshy Panicker John
Software Developer (Senior)
India India
Member
No Biography provided

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
QuestionTransparent Label With Checkboxmembergwittlock24 Mar '13 - 3:53 
Would it be possible to add a checkbox in front of the text? The reason why I am asking is if you put a standard check on a user control and a uLablex label before the check it does not show as transparent.
I tried putting a checkbox with no text so it just show the checkbox but that didn't work.
 
Do you have any suggestions
AnswerRe: Transparent Label With CheckboxmemberAlphaBeta011027 Apr '13 - 21:06 
You can use the normal CheckBox control, without using this new label control. Just set the CheckBox's BackColor property to Transparent and AutoSize property to False.
QuestionLabels Flickering On Update - Not Double buffering?membermtiminer8 Mar '13 - 15:05 
The labels flicker when updated, I saw in the code that double buffering is turned off. When turning it on the labels no longer work. Is there any solution to this?
QuestionThanks Muchmembermtiminer8 Mar '13 - 4:54 
To Koshy,
 
Thanks so much for this article and code. Helped me out tremendously.
 
A heart felt thanks.
 
Michael
QuestionWrap TextmemberMember 81732524 Sep '12 - 22:42 
Hi this is just what I needed.
 
How can I get the label to wrap the text when its longer than the label size though?
GeneralMy vote of 3memberGeekForChrist9 Jul '12 - 3:04 
Interesting but not the best
QuestionAny C# version?memberPudjo9 Jun '12 - 16:27 
It's so interseting. Any C3 Version ?
QuestionIs this control for .Net CF?memberMember 29596325 Sep '10 - 19:40 
Hi Koshy,
 
Is this control for .Net CF? If yes, why doesn't it work with WM6+ development? If not, why does the first line of your article say:
 
"This article explains how to create transparent Label controls in .NET Compact Framework, uLabelX Transparent Label Control that support border styles, Images, and parent controls with gradient backgrounds"
 
I'm not sure whether this control is for Windows Mobile Development (.Net CF)
 

Thanks,
Vijay Arunraj.J
AnswerRe: Is this control for .Net CF?memberKoshy Panicker John9 Sep '10 - 5:54 
Hi Vijay,
 
Sorry, It's my mistake, I will remove COMPACT..!!
 

Thank's & Regards
Koshy
GeneralSmartDevicememberPabloDKP18 Aug '10 - 7:03 
Hi, first of all thanks for tha samples.
 
I'm trying to use this sample into smartdevice app running with .NET CF 3.5
 
I added the project into my solution, added the reference to the DLL and imported the name space, but i can't load the control into the toolbox, i've tried to add it manually but no success.
 
Can you please tell e what i'm doing wrong.
 
Thanks
GeneralRe: SmartDevicememberKoshy Panicker John18 Aug '10 - 7:43 
Hi Dear
 
can you please try this..
 
Step 1 – In visual studio toolbox add your own tab or click on general tab.
 
Step 2 – Right click in the selected tab area and click Chose Items
 
Step 3 – This will open Choose Toolbox Item screen. under .Net Framwork Components Tab Click on Browse button and select the path of the iGreen.Controls.uControls.uLabelX.dll
 
Step 4 – Click Ok and you’re done. uLabelX control will be added to the toolbox
 
please try this and let me know..
GeneralRe: SmartDevicememberPabloDKP18 Aug '10 - 8:27 
This was one of the first things i've tried.
 
My app is for a WinCE smartdevice using CF3.5, could be the reason of why the dll it's not loaded into the toolbar ?
 
Thanks
GeneralRe: SmartDevicememberKoshy Panicker John18 Aug '10 - 9:16 
Yes, you are right, this won't support WindowsCEThumbs Down | :thumbsdown:
GeneralhimemberMegaGigsLtd17 Aug '10 - 14:25 
Hello when i tried to unrar it it gave me an error:
 
"E:\Downloads\uLabelXControlSource.zip: Unexpected end of archive"
GeneralRe: himemberKoshy Panicker John17 Aug '10 - 21:27 
Hi,
 
try download again, it's working fine here..
General[My vote of 2] Good work but not much pointmemberThe Man from U.N.C.L.E.19 Jul '10 - 22:00 
As has been said, transparent label is easy, and done a million times.
 
First you have lost the content alignment on the Image, and done all the paint work that label does for you already, then you have taken away useful properties like autosize.
 
So a new border style, and a well written article, but little else.
If you have knowledge, let others light their candles at it.
Margaret Fuller (1810 - 1850)
[My Articles]  [My Website]

GeneralThanksmemberbabu7415 Jul '10 - 2:50 
Hello Koshy I am very grateful to you. I was desperately needing this control as the normal label was not transparent.
 
regards,
 
Rajesh Babu
GeneralMy vote of 2memberAdrian Cole8 Jul '10 - 11:11 
You can easily make a label transparent by setting it's BackColor property to System.Drawing.Color.Transparent. Therefore all your control really does is add some fancy border styles.
Generaldownload link is not workingmembervcop258 Jul '10 - 5:33 
download link is not working ,it seens that there are spaces in the file name.
GeneralRe: download link is not workingmemberKoshy Panicker John8 Jul '10 - 5:59 
thanks a lot, issue resolved, try now..!! Sniff | :^)
GeneralMy vote of 1memberdigital man7 Jul '10 - 23:11 
Remove the images and code blocks and there is nothing left: perhaps better as (properly formatted) tip/trick or blog post.

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

Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130516.1 | Last Updated 9 Sep 2010
Article Copyright 2010 by Koshy Panicker John
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid