Extended Vertical Label Control in C# .NET

• Download VerticalLabel_Demo.zip - 6.6 KB
• Download VerticalLabel_Source.zip - 5.5 KB

Introduction

This article describes how to create a custom vertical label user control in C#.NET. The user control provides drawing of text 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 the text starting from bottom.

Background

On one of my projects, I need 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 need 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 item in Toolbox of Windows Forms designer.

The class used the following namespaces:

using System;
using System.ComponentModel;
using System.Drawing;

Code

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

protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
    float vlblControlWidth;
    float vlblControlHeight;
    float vlblTransformX;
    float vlblTransformY;
    Color controlBackColor = BackColor;
    Pen labelBorderPen = new Pen(controlBackColor, 0);
    SolidBrush 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);
            
            
    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 is 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 X component of translation and the height of the control as value for Y of the translation. This tells the GDI to start drawing from 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 X component of translation and zero as Y component of translation. This tells the 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.

On the screenshot that I provided, I deliberately changed the color of the background of the vertical label to show the anchor on where the control starts drawing the text.

Points of Interest

Since this is my first time to write 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 the Graphics.RotateTransform.

History

July 27, 2007. Initial Version.