Label with an Image on the left - preventing the text to come over the picture?

Question

I want to report status of an operation in a WinForm application written in C#. To make it more user-friendly, I want to show an icon on the left depending on the status.

• Animated GIF during the process
• Ok or Error icon depending on the result.

I wanted to use the native WinForms Label control which works well with animated GIFs and looks as standard as it can get.

My problem however is that text comes is written over the picture. There does not seem to be any property to set a margin for the text. I tried the most obvious thing, which is to prefix it with spaces, which works, except when the text wraps to the next line, as shown below.

I would prefer not spend too much time writing/testing/debugging derived control for this if possible... I could put a quick and dirty user-control, with a picturebox on the left of a label, but it doesn't feel very clean.

Is there any trick to get around this quickly and elegantly, or can someone point me to a Label derived class supporting this that is relatively lightweight? (I had a look at CodeProject but couldn't find much).

Thank you.

Answer 1

A simple alternative is to use a Button instead of a Label, as shown below:

By using the following properties, you can style the Button to look just like a Label, whilst also having the option to keep the image and text aligned next to eachother:

FlatAppearance ↴
  BorderSize         = 0
  MouseDownBackColor = Control
  MouseOverBackColor = Control
FlatStyle            = Flat
Image                = [Your image]
ImageAlign           = MiddleLeft
Text                 = [Your text]
TextAlign            = MiddleLeft
TextImageRelation    = ImageBeforeText

A simple way to achieve the desired effect; no user controls!

Answer 2

The quick-and-dirty usercontrol with an image and a separate label is your best option. Just add a public string property to set the label's text and you're pretty much done.

Answer 3

Here's a different solution that I find less hacky than the "styled button" approach. It also allows you to set the distance (spacing) between the image and the text.

class ImageLabel : Label
{
    public ImageLabel()
    {
        ImageAlign = ContentAlignment.MiddleLeft;
    }

    private Image _image;
    public new Image Image
    {
        get { return _image; }

        set
        {
            const int spacing = 4;

            if (_image != null)
                Padding = new Padding(Padding.Left - spacing - _image.Width, Padding.Top, Padding.Right, Padding.Bottom);

            if (value != null)
                Padding = new Padding(Padding.Left + spacing + value.Width, Padding.Top, Padding.Right, Padding.Bottom);

            _image = value;
        }
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        if (Image != null)
        {
            Rectangle r = CalcImageRenderBounds(Image, ClientRectangle, ImageAlign);
            e.Graphics.DrawImage(Image, r);
        }

        base.OnPaint(e); // Paint text
    }
}