Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / Windows Forms

Extended Vertical Label Control in C# .NET

Rate me:
Please Sign up or sign in to vote.
4.27/5 (10 votes)
26 Sep 2007CPOL3 min read 177.2K   8.7K   71   23
A custom vertical label user control in C#.NET with support for transparent backgrounds.

Screenshot - trans_vertical.png

Introduction

This article describes how to create a custom vertical label user control in C# .NET. The user control provides text draw from top or from bottom. This article is a derivation of Raman Tayal's Vertical Label Control in VB.NET. I just translated his work to C# and added the functionality of drawing text starting from bottom to top. Also, an updated version now supports transparent backgrounds.

Background

On one of my projects, I needed a label control that can display text vertically. I encountered Raman Tayal's Vertical Label Control in VB.NET and translated it to C#. But, I needed additional functionality of drawing text starting from the top, so I just added the functionality. This control has been useful to me, and I hope others would find it useful too.

Using the Code

The code provided is a class that creates a DLL that can be added as an item in the Toolbox of the Windows Forms designer. The class uses the following namespaces:

C#
using System;
using System.ComponentModel;
using System.Drawing;

Code

The part of the code that really does the job is the override for the OnPaint event.

C#
protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
    float vlblControlWidth;
    float vlblControlHeight;
    float vlblTransformX;
    float vlblTransformY;

    Color controlBackColor = BackColor;
    Pen labelBorderPen;
    SolidBrush labelBackColorBrush;

    if (_transparentBG)
    {
        labelBorderPen = new Pen(Color.Empty, 0);
        labelBackColorBrush = new SolidBrush(Color.Empty);
    }
    else
    {
        labelBorderPen = new Pen(controlBackColor, 0);
        labelBackColorBrush = new SolidBrush(controlBackColor);
    }
    
    SolidBrush labelForeColorBrush = new SolidBrush(base.ForeColor);
    base.OnPaint(e);
    vlblControlWidth = this.Size.Width;
    vlblControlHeight = this.Size.Height;
    e.Graphics.DrawRectangle(labelBorderPen, 0, 0, 
                             vlblControlWidth, vlblControlHeight);
    e.Graphics.FillRectangle(labelBackColorBrush, 0, 0, 
                             vlblControlWidth, vlblControlHeight);
    e.Graphics.TextRenderingHint = this._renderMode;
    e.Graphics.SmoothingMode = 
               System.Drawing.Drawing2D.SmoothingMode.HighQuality;
    
    if (this.TextDrawMode == DrawMode.BottomUp)
    {
        vlblTransformX = 0;
        vlblTransformY = vlblControlHeight;
        e.Graphics.TranslateTransform(vlblTransformX, vlblTransformY);
        e.Graphics.RotateTransform(270);
        e.Graphics.DrawString(labelText, Font, labelForeColorBrush, 0, 0);
    }
    else
    {
        vlblTransformX = vlblControlWidth;
        vlblTransformY = vlblControlHeight;
        e.Graphics.TranslateTransform(vlblControlWidth, 0);
        e.Graphics.RotateTransform(90);
        e.Graphics.DrawString(labelText, Font, labelForeColorBrush, 0, 0, 
                              StringFormat.GenericTypographic);
    }            
}

As you can see, I have an if condition in if (this.TextDrawMode == DrawMode.BottomUp). This tells us where the control decides whether to draw the text from bottom up or from top to bottom depending on the value of the property TextDrawMode.

When the value of TextDrawMode is BottomUp, you will notice that TranslateTransform accepts values zero for the X component of the translation and the height of the control as value for Y of the translation. This tells GDI to start drawing from the bottom left of the rectangle occupied by the control.

When the value of TextDrawMode is TopBottom, you will see that TranslateTransform accepts the control's width as the X component of the translation and zero as the Y component of the translation. This tells GDI to start drawing from top right of the rectangle occupied by the control.

The TextDrawMode property is an additional property that can be set during design time and also during runtime.

In this update, please notice that I am checking for the value of the _transparentBG variable which gets its value from a public boolean property TransparentBackground. If this is set to true, notice that the Brush color is set to Color.Empty; otherwise, it uses the control's assigned Color.

Also, I made the modifications on the constructor of the VerticalLabel control to include the following line:

C#
SetStyle(System.Windows.Forms.ControlStyles.Opaque, true);

And finally, to enable transparency, the following override was added:

C#
protected override CreateParams CreateParams
{
    get
    {
        CreateParams cp = base.CreateParams;
        cp.ExStyle |= 0x20;  // Turn on WS_EX_TRANSPARENT
        return cp;
    }
}

On the screenshot that I have provided, the horizontally-aligned text uses a WinForms Label control. The three vertical labels were displayed in different orientation (Bottom-Up | Top-Bottom) and also with different transparency (BackgroundTransparent = true|false) settings.

Points of Interest

Since this is my first time writing a program using GDI+, I tried to do it using trial and error, but it was frustrating at first, until I found a nice article on how to use Graphics.RotateTransform.

History

  • July 27, 2007: Initial version.
  • September 27: Updated with support for transparent background.

License

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


Written By
Software Developer (Senior)
United States United States
I am working as as a full-time Software Developer in Downtown DC Area

Comments and Discussions

 
QuestionAbout the Vertical Label Control Pin
熊熊2-Sep-14 22:12
熊熊2-Sep-14 22:12 
GeneralMy vote of 5 Pin
pcs041425-Apr-12 3:58
pcs041425-Apr-12 3:58 
Generalvery thanks Pin
talinhuu23-Nov-09 19:25
talinhuu23-Nov-09 19:25 
GeneralThis is copied from another source Pin
MonkeyCat28-Jan-09 4:41
MonkeyCat28-Jan-09 4:41 
GeneralRe: This is copied from another source Pin
/randz14-Mar-10 20:49
/randz14-Mar-10 20:49 
NewsI have posted previously an article on this subject!!! Pin
Horia Tudosie6-Nov-08 3:58
Horia Tudosie6-Nov-08 3:58 
GeneralRe: I have posted previously an article on this subject!!! Pin
#realJSOP19-Nov-08 15:24
mve#realJSOP19-Nov-08 15:24 
GeneralThanks Pin
SpikeAustin20-Aug-08 10:20
SpikeAustin20-Aug-08 10:20 
GeneralRe: Thanks Pin
/randz21-Aug-08 0:40
/randz21-Aug-08 0:40 
QuestionLabel at Run-time Pin
AlexB4716-Nov-07 3:32
AlexB4716-Nov-07 3:32 
AnswerRe: Label at Run-time Pin
/randz18-Nov-07 15:03
/randz18-Nov-07 15:03 
QuestionVertical control does not clear old text before writing new one Pin
dmcyu30-Oct-07 6:12
dmcyu30-Oct-07 6:12 
AnswerRe: Vertical control does not clear old text before writing new one Pin
/randz9-Nov-07 18:52
/randz9-Nov-07 18:52 
AnswerRe: Vertical control does not clear old text before writing new one Pin
dmcyu11-Nov-07 4:24
dmcyu11-Nov-07 4:24 
GeneralRe: Vertical control does not clear old text before writing new one Pin
/randz13-Nov-07 13:43
/randz13-Nov-07 13:43 
GeneralRe: Vertical control does not clear old text before writing new one Pin
dmcyu13-Nov-07 18:47
dmcyu13-Nov-07 18:47 
GeneralRe: Vertical control does not clear old text before writing new one Pin
/randz13-Nov-07 19:28
/randz13-Nov-07 19:28 
GeneralRe: Vertical control does not clear old text before writing new one Pin
m0nk3yi3unz5-Oct-08 18:38
m0nk3yi3unz5-Oct-08 18:38 
GeneralTransparent Background Pin
BenjaminHelbig25-Sep-07 21:28
BenjaminHelbig25-Sep-07 21:28 
AnswerRe: Transparent Background [modified] Pin
/randz26-Sep-07 16:31
/randz26-Sep-07 16:31 
AnswerRe: Transparent Background Pin
JinHwan4624-Jul-08 19:40
JinHwan4624-Jul-08 19:40 
GeneralWith anti-aliasing support Pin
flops428-Aug-07 5:49
flops428-Aug-07 5:49 
GeneralRe: With anti-aliasing support [modified] Pin
/randz8-Aug-07 17:56
/randz8-Aug-07 17:56 

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

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