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

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!


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
    }
}

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.

Tags:

C#

Winforms

Label