Rotated Text Control for .NET (C#)

• Download source - 19 KB
• Download demo - 9.2 KB

Introduction

This article demonstrates a .NET Framework control for adding rotated text to a form. The control reproduces the behavior of the built-in Label control but allows the text to be rotated. It allows the user to set the text, angle of rotation, text alignment, and auto-size properties in the designer. With these features in place, the control will resize itself and align the text automatically. It will exhibit appropriate behavior for the settings of the Anchor or Dock properties.

Below are some examples of the label. Each black outline is a label. The text in each label is set to a different angle, text alignment, and font.

Background

The .NET Framework does not seem to have a built-in control for displaying rotated text. There are several examples online of how to produce basic rotated text, however, there doesn't seem to be a fully developed control for doing this. That is, there isn't a control that allows for rotated text and that obeys the Anchor, Dock, TextAlign, and AutoSize properties.

Using the Control

Since the control was designed to feel built-in, its use should be intuitive. It is recommended to add it as part of a control library. In the case of the example code, you will find it in the Toolbox under the Controls Components. Then it can be dragged-and-dropped onto a form.

The control can then be used exactly like a standard Label control, with one difference. In the Properties window, you will find an entry for the Angle, as shown highlighted below. The angle rotates the text in a clockwise direction.

Demonstration

A demonstration project is included in the downloads section. It has two RotatedLabels that can be updated using the controls on the left. The top label is anchored on all four sides and the bottom label has the docking set to Fill. When started, the form appears like the following:

As the controls are updated, the labels will also update accordingly. The labels will also update when the form is resized.

Code

The code contains a few properties. Most of them override the base class to allow the text to be updated when a property changes. An Angle property is added to store the text angle.

Most of the work takes place in the OnPaint event.

protected override void OnPaint(System.Windows.Forms.PaintEventArgs paintEventArgs)
{
    // Get the text size.
    SizeF textSize         = paintEventArgs.Graphics.MeasureString(this.Text, this.Font,
                                                                   this.Parent.Width);

    // When you rotate the text, the width and height will now have an X and a Y component
    // because they no longer fall along the X or Y axis.  These are the components of the
    // width and height after rotation.
    int x                  = Math.Abs((int)Math.Ceiling(textSize.Height * Math.Sin(_radians)));
    int y                  = Math.Abs((int)Math.Ceiling(textSize.Height * Math.Cos(_radians)));
    Point rotatedHeight    = new Point(x, y);

    x                      = Math.Abs((int)Math.Ceiling(textSize.Width * Math.Cos(_radians)));
    y                      = Math.Abs((int)Math.Ceiling(textSize.Width * Math.Sin(_radians)));
    Point rotatedWidth     = new Point(x, y);

    // Size of the rotated text.  This is the size of the bounding box around the text.
    // SetControlSize will update the control size or leave it alone based on how auto 
    // sizing is set.
    Size textBoundingBox   = new Size(rotatedWidth.X + rotatedHeight.X,
                                      rotatedWidth.Y + rotatedHeight.Y);
    SetControlSize(textBoundingBox);

    // Two offsets (translations) are used.  The first is to accounts for the effects of the
    // rotation.  The second accounts for the effects of the alignment.  It's a lot easier to
    // calculate them separately and add together than to try to account for them both at the
    // same time.
    Point rotationOffset   = CalculateOffsetForRotation(ref rotatedHeight, ref rotatedWidth,
                                                        ref textBoundingBox);
    Point alignmentOffset  = CalculateOffsetForAlignment(ref textBoundingBox);

    // Apply the transformation and rotation to the graphics.
    paintEventArgs.Graphics.TranslateTransform(rotationOffset.X + alignmentOffset.X,
                                               rotationOffset.Y + alignmentOffset.Y);
    paintEventArgs.Graphics.RotateTransform(_angle);

    // Draw the text and let the base class do its painting.
    paintEventArgs.Graphics.DrawString(this.Text, this.Font, new SolidBrush(this.ForeColor),
                                       0f, 0f);
    base.OnPaint(paintEventArgs);
}

The first step...

SizeF textSize = paintEventArgs.Graphics.MeasureString(this.Text, this.Font,
                                                       this.Parent.Width);

...calculates the size of the text. That is, it calculates the height and width of a "bounding box," a box that surrounds the text.

The height and width are placed into textSize such that textSize.X = H and textSize.Y = W. The next lines...

int x                 = Math.Abs((int)Math.Ceiling(textSize.Height * Math.Sin(_radians)));
int y                 = Math.Abs((int)Math.Ceiling(textSize.Height * Math.Cos(_radians)));
Point rotatedHeight   = new Point(x, y);

x                     = Math.Abs((int)Math.Ceiling(textSize.Width * Math.Cos(_radians)));
y                     = Math.Abs((int)Math.Ceiling(textSize.Width * Math.Sin(_radians)));
Point rotatedWidth    = new Point(x, y);

...calculate the X and Y values for the rotated height and width. These are shown in the following image:

The variables correlate to the dimensions in the image as follows:

• rotatedHeight.X = h'_x
• rotatedHeight.Y = h'_y
• rotatedWidth.X = w'_x
• rotatedWidth.Y = w'_y

From the above image, it is easy to see that the bounding box for the rotated text has height H' = h'_y + w'_y and W' = h'_x + w'_x. This is represented in the code as:

Size textBoundingBox = new Size(rotatedWidth.X + rotatedHeight.X,
                                rotatedWidth.Y + rotatedHeight.Y);

The functions CalculateOffsetForRotation and CalculateOffsetForAlignment then use the three variables, textBoundingBox, rotatedHeight, and rotatedWidth to reposition the coordinate system of the graphics so that the text is drawn in the correct location.

At the end of OnPaint, the graphics are used to draw the text and the base class's OnPaint event is called.

Limitations

Because of the way Windows handles drawing rotated text, the rotated version may appear slightly different than the horizontal version.

References and Acknowledgements

This class is partially based on the concepts posted by users Javed Akram and Buddy at:

• https://stackoverflow.com/questions/1371943/c-sharp-vertical-label-in-a-windows-forms

History

• October 2019 - First release
• October 2019 - Added examples to the introduction