Multiple colors in a C# .NET label

Question

I'm looking for a way to display multiple colors in a single C#/.NET label. E.g the label is displaying a series of csv separated values that each take on a color depending on a bucket they fall into. I would prefer not to use multiple labels, as the values are variable length and I don't want to play with dynamic layouts. Is there a native support for this?

Solution 1

There is no native control in .NET that does this. Your best bet is to write your own UserControl (call it RainbowLabel or something). Normally you would have a custom label control inherit directly from Label, but since you can't get multi-colored text in one label, you would just inherit from UserControl.

For rendering the text, your UserControl could split the text on commas and then dynamically load a differently-colored Label for each chunk. A better way, however, would be to render the text directly onto your UserControl using the DrawString and MeasureString methods in the Graphics namespace.

Writing UserControls in .NET is really not difficult, and this kind of unusual problem is exactly what custom UserControls are for.

Update: here's a simple method you can use for rendering the multi-colored text on a PictureBox:

public void RenderRainbowText(string Text, PictureBox pb)
{
    // PictureBox needs an image to draw on
    pb.Image = new Bitmap(pb.Width, pb.Height);
    using (Graphics g = Graphics.FromImage(pb.Image))
    {
        // create all-white background for drawing
        SolidBrush brush = new SolidBrush(Color.White);
        g.FillRectangle(brush, 0, 0,
            pb.Image.Width, pb.Image.Height);
        // draw comma-delimited elements in multiple colors
        string[] chunks = Text.Split(',');
        brush = new SolidBrush(Color.Black);
        SolidBrush[] brushes = new SolidBrush[] { 
            new SolidBrush(Color.Red),
            new SolidBrush(Color.Green),
            new SolidBrush(Color.Blue),
            new SolidBrush(Color.Purple) };
        float x = 0;
        for (int i = 0; i < chunks.Length; i++)
        {
            // draw text in whatever color
            g.DrawString(chunks[i], pb.Font, brushes[i], x, 0);
            // measure text and advance x
            x += (g.MeasureString(chunks[i], pb.Font)).Width;
            // draw the comma back in, in black
            if (i < (chunks.Length - 1))
            {
                g.DrawString(",", pb.Font, brush, x, 0);
                x += (g.MeasureString(",", pb.Font)).Width;
            }
        }
    }
}

Obviously this will break if you have more than 4 comma-delimited elements in your text, but you get the idea. Also, there appears to be a small glitch in MeasureString that makes it return a width that is a couple pixels wider than necessary, so the multi-colored string appears stretched out - you might want to tweak that part.

It should be straightforward to modify this code for a UserControl.

Note: TextRenderer is a better class to use for drawing and measuring strings, since it uses ints. Graphics.DrawString and .MeasureString use floats, so you'll get off-by-a-pixel errors here and there.

Update: Forget about using TextRenderer. It is dog slow.

Solution 2

You could try using a RichTextBox so that you can get multiple colors for the string and then make it read only and remove the border. Change the background color to the same as the Form it is on and you might get away with it.

Solution 3

As an alternative, you might do this as rtf or html in a suitable control (such as WebBrowser). It would probably take a bit more resources that you'd ideally like, but it'll work fairly quickly.

Solution 4

If you are building your Windows app for people with XP and up, you can use WPF. Even if it's a Windows Forms app, you can add a WPF UserControl.

I would then use a Label, and set the "Foreground" property to be a gradient of colors.

Or, in Windows Forms (no WPF), you could just use a "Flow Panel", and then in a for loop add multiple Labels as segments of your sentense... they will all "flow" together as if it was one label.

Solution 5

I'm using colored labels quite often to mark keywords in red color etc. Like in Phil Wright's answer I use a RichTextBox control, remove the border and set the background color to SystemColors.Control.

To write colored text the control is first cleared and then I use this function to append colored text:

private void rtb_AppendText(Font selfont, Color color, Color bcolor, 
                        string text, RichTextBox box)
    {
            // append the text to the RichTextBox control
            int start = box.TextLength;
            box.AppendText(text);
            int end = box.TextLength;

            // select the new text
            box.Select(start, end - start);
            // set the attributes of the new text
            box.SelectionColor = color;
            box.SelectionFont = selfont;
            box.SelectionBackColor = bcolor;
            // unselect
            box.Select(end, 0);

            // only required for multi line text to scroll to the end
            box.ScrollToCaret();
    }

If you want to run this function with "mono" then add a space before every new colored text, or mono will not set new the color correctly. This is not required with .NET

Usage:

myRtb.Text = "";
rtb_AppendText(new Font("Courier New", (float)10), 
                   Color.Red, SystemColors.Control, " my red text", myRtb);
rtb_AppendText(new Font("Courier New", (float)10), 
                   Color.Blue, SystemColors.Control, " followed by blue", myRtb);

View more solutions

Comments

[Roman Starkov]

Inheriting from Control might make more sense than from UserControl if the control is to draw itself.

[Jack]

Very nice idea. By setting the WebBrowser's backgound color to same as the Form's and hidding the scroll bars make it look like a label. Something like this: Color color = this.BackColor; string text = string.Format("<style> body {{ background-color: rgb({0},{1},{2}) }}</style> Hello, <b>every</b><i>one</i>!</div>", color.R, color.G, color.B); webBrowser1.DocumentText = text; with webBrowser1.ScrollBarsEnabled = false; make it great.