I am trying to create a label which has an image and text. The width of the label is 200. Icon is 10x10. Text is about 10 characters. I want the entire content of the label to be left aligned with the icon showing up first, followed by the text. I can't figure out a way to do this. If I set image to MiddleLeft and Text to MiddleCenter, the text ends up way too far from the image. If I set the TextAlign to MiddleLeft, the text ends up overlapping with the image. Is there anyway to do what I want to without using two labels?
Please remember to mark the replies as answers if they help you. | | Himanshu Vasishth Tuesday, August 18, 2009 5:46 AM | Hi Himanshu,
We can create our own label and override the drawing method do custom drawing. We draw the image at first and then draw the text. This is the code snippet:
//Custom label. Text follows the image.
public class ImageLabel : Label
{
private int _imageWidth = 10;
//Image width.
public int ImageWidth
{
get { return _imageWidth; }
set { _imageWidth = value; }
}
public ImageLabel()
{
//Enable own drawing.
this.SetStyle(ControlStyles.UserPaint, true);
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
}
protected override void OnPaint(PaintEventArgs e)
{
//Draw image and text ourselves.
if(Image != null)
{
//calculate the image rectangle and draw image.
Rectangle imgRect = new Rectangle(0, 0, this._imageWidth, e.ClipRectangle.Height);
this.DrawImage(e.Graphics,this.Image,imgRect);
}
//calculate the text rectangle and draw image.
Rectangle textRect;
if (Image == null)
textRect = e.ClipRectangle;
else
textRect = new Rectangle(this._imageWidth, 0, e.ClipRectangle.Width - this._imageWidth, e.ClipRectangle.Height);
this.DrawText(e.Graphics, textRect);
}
private void DrawImage(Graphics g, Image img, Rectangle rect)
{
g.DrawImage(img, rect);
}
private void DrawText(Graphics g, Rectangle rect)
{
//Create format.
StringFormat format = new StringFormat();
this.SetAlign(format);
//Create brush and draw text.
using (Brush brush = new SolidBrush(this.ForeColor))
{
g.DrawString(this.Text, this.Font, brush, rect, format);
}
}
//Set the drawing text align.
private void SetAlign(StringFormat format)
{
switch (this.TextAlign)
{
case ContentAlignment.BottomCenter:
{
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Far;
}
break;
case ContentAlignment.BottomLeft:
{
format.Alignment = StringAlignment.Near;
format.LineAlignment = StringAlignment.Far;
}
break;
case ContentAlignment.BottomRight:
{
format.Alignment = StringAlignment.Far;
format.LineAlignment = StringAlignment.Far;
}
break;
case ContentAlignment.MiddleCenter:
{
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;
}
break;
case ContentAlignment.MiddleLeft:
{
format.Alignment = StringAlignment.Near;
format.LineAlignment = StringAlignment.Center;
}
break;
case ContentAlignment.MiddleRight:
{
format.Alignment = StringAlignment.Far;
format.LineAlignment = StringAlignment.Center;
}
break;
case ContentAlignment.TopLeft:
{
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Near;
}
break;
case ContentAlignment.TopRight:
{
format.Alignment = StringAlignment.Near;
format.LineAlignment = StringAlignment.Near;
}
break;
case ContentAlignment.TopCenter:
{
format.Alignment = StringAlignment.Far;
format.LineAlignment = StringAlignment.Near;
}
break;
}
}
}
Let me know if this helps.
Aland Li
Please mark the replies as answers if they help and unmark if they don't. This can be beneficial to other community members reading the thread. - Marked As Answer byAland LiMSFT, ModeratorThursday, August 20, 2009 2:33 AM
-
| | Aland Li Wednesday, August 19, 2009 1:23 PM | Unfortunately Label control doesnt have TextImageRelation property like the Button control which allows you to achieve the layout which you want. Though not a good technique, but you can make the button act like a Label and achieve what you want.
this.button1.FlatAppearance.BorderSize = 0;
this.button1.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
this.button1.Image = global::RnD2.Properties.Resources.Blue_Lace_16;
this.button1.ImageAlign = System.Drawing.ContentAlignment.MiddleLeft;
this.button1.Location = new System.Drawing.Point(268, 164);
this.button1.Name = "button1";
this.button1.Size = new System.Drawing.Size(103, 85);
this.button1.TabIndex = 3;
this.button1.Text = "button1";
this.button1.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageBeforeText;
this.button1.UseCompatibleTextRendering = true;
this.button1.UseVisualStyleBackColor = false;
Hope that helps.. Regards, Mohib Sheth
Life would have been much easier if I had the source-code !! - Edited byMohib Sheth Tuesday, August 18, 2009 6:01 AM
- Edited byMohib Sheth Tuesday, August 18, 2009 6:02 AM
-
| | Mohib Sheth Tuesday, August 18, 2009 6:01 AM | This is known issue
http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=115785
but still you can try ,
Set Autosize to false, and ImageAlign to left and TextAlign to right. | | NareshG Tuesday, August 18, 2009 8:01 AM | Hi Himanshu,
We can create our own label and override the drawing method do custom drawing. We draw the image at first and then draw the text. This is the code snippet:
//Custom label. Text follows the image.
public class ImageLabel : Label
{
private int _imageWidth = 10;
//Image width.
public int ImageWidth
{
get { return _imageWidth; }
set { _imageWidth = value; }
}
public ImageLabel()
{
//Enable own drawing.
this.SetStyle(ControlStyles.UserPaint, true);
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
}
protected override void OnPaint(PaintEventArgs e)
{
//Draw image and text ourselves.
if(Image != null)
{
//calculate the image rectangle and draw image.
Rectangle imgRect = new Rectangle(0, 0, this._imageWidth, e.ClipRectangle.Height);
this.DrawImage(e.Graphics,this.Image,imgRect);
}
//calculate the text rectangle and draw image.
Rectangle textRect;
if (Image == null)
textRect = e.ClipRectangle;
else
textRect = new Rectangle(this._imageWidth, 0, e.ClipRectangle.Width - this._imageWidth, e.ClipRectangle.Height);
this.DrawText(e.Graphics, textRect);
}
private void DrawImage(Graphics g, Image img, Rectangle rect)
{
g.DrawImage(img, rect);
}
private void DrawText(Graphics g, Rectangle rect)
{
//Create format.
StringFormat format = new StringFormat();
this.SetAlign(format);
//Create brush and draw text.
using (Brush brush = new SolidBrush(this.ForeColor))
{
g.DrawString(this.Text, this.Font, brush, rect, format);
}
}
//Set the drawing text align.
private void SetAlign(StringFormat format)
{
switch (this.TextAlign)
{
case ContentAlignment.BottomCenter:
{
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Far;
}
break;
case ContentAlignment.BottomLeft:
{
format.Alignment = StringAlignment.Near;
format.LineAlignment = StringAlignment.Far;
}
break;
case ContentAlignment.BottomRight:
{
format.Alignment = StringAlignment.Far;
format.LineAlignment = StringAlignment.Far;
}
break;
case ContentAlignment.MiddleCenter:
{
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;
}
break;
case ContentAlignment.MiddleLeft:
{
format.Alignment = StringAlignment.Near;
format.LineAlignment = StringAlignment.Center;
}
break;
case ContentAlignment.MiddleRight:
{
format.Alignment = StringAlignment.Far;
format.LineAlignment = StringAlignment.Center;
}
break;
case ContentAlignment.TopLeft:
{
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Near;
}
break;
case ContentAlignment.TopRight:
{
format.Alignment = StringAlignment.Near;
format.LineAlignment = StringAlignment.Near;
}
break;
case ContentAlignment.TopCenter:
{
format.Alignment = StringAlignment.Far;
format.LineAlignment = StringAlignment.Near;
}
break;
}
}
}
Let me know if this helps.
Aland Li
Please mark the replies as answers if they help and unmark if they don't. This can be beneficial to other community members reading the thread. - Marked As Answer byAland LiMSFT, ModeratorThursday, August 20, 2009 2:33 AM
-
| | Aland Li Wednesday, August 19, 2009 1:23 PM |
|
index > Windows Forms Designer > Label with image and text