玩转控件:封装个带图片的Label控件

话不多说，先看效果

　　 经常做工控上位机或者MES的都知道，UI虽然没有要求那么高，实用就好，但是能美化下winform UI 有时候也能给客户增加几分好感，给枯燥乏味的工作增添一抹颜色

起因

　　 为了给枯燥UI添加点颜色，前后也找了很多UI控件，免费里面效果最好（实际很拉跨）的也就RealTaiizor了，但是集成过的同学们都应该知道，稍微后台逻辑复杂一点，耗时就一点的，加载起来贼慢，而且很容易整个控件崩溃，一个大大的红X

ImageLabel

 

　　惹不起，还躲不起吗？RealTaiizor效果好看，那就按照它的效果，重新封装一个简化版控件，能满足实际业务需求即可！开始动手，继承Label控件，扩展图片显示位置，图片大小，图片和文字间距，图片更改事件等等功能

[ToolboxBitmap(typeof(Label))]
publicpartialclassImageLabel : Label
 {
     private Image _image;
     privateint _imageWidth = 32;
     privateint _imageHeight = 32;
     privateint _imageTextSpacing = 5;
     private ContentAlignment _imageAlign = ContentAlignment.MiddleLeft;  // 默认图片左中对齐

     publicImageLabel()
     {
         this.DoubleClick += ImageLabel_DoubleClick;
         // 确保控件支持透明背景（如果需要）
         this.SetStyle(ControlStyles.SupportsTransparentBackColor | ControlStyles.ResizeRedraw, true);
     }

     #region Public Properties

     [Category("Appearance")]
     [Description("The image displayed.")]
     public Image Image
     {
         get { return _image; }
         set
         {
             _image = value;
             Invalidate();
             OnImageChanged(EventArgs.Empty);
         }
     }

     [Category("Appearance")]
     [DefaultValue(32)]
     publicint ImageWidth
     {
         get { return _imageWidth; }
         set
         {
             _imageWidth = value;
             Invalidate();
         }
     }

     [Category("Appearance")]
     [DefaultValue(32)]
     publicint ImageHeight
     {
         get { return _imageHeight; }
         set
         {
             _imageHeight = value;
             Invalidate();
         }
     }

     [Category("Appearance")]
     [DefaultValue(5)]
     publicint ImageTextSpacing
     {
         get { return _imageTextSpacing; }
         set
         {
             _imageTextSpacing = value;
             Invalidate();
         }
     }

     [Category("Appearance")]
     [Description("Determines the alignment of the image within the control.")]
     [DefaultValue(ContentAlignment.MiddleLeft)]
     public ContentAlignment ImageAlign
     {
         get { return _imageAlign; }
         set
         {
             _imageAlign = value;
             Invalidate();
         }
     }

     #endregion

     #region Events

     [Category("Property Changed")]
     [Description("Occurs when the Image property value changes.")]
     publicevent EventHandler ImageChanged;

     protectedvirtualvoidOnImageChanged(EventArgs e)
     {
         ImageChanged?.Invoke(this, e);
     }

     #endregion

     #region Overridden Methods

     protectedoverridevoidOnPaint(PaintEventArgs e)
     {
         // 计算图片矩形（根据 ImageAlign 对齐）
         Rectangle imageRect = GetImageRectangle();

         // 计算文字矩形（自动避开图片区域）
         Rectangle textRect = GetTextRectangle(imageRect);

         // 绘制图片
         if (Image != null)
         {
             e.Graphics.DrawImage(Image, imageRect);
         }

         // 绘制文字
         TextFormatFlags flags = TextFormatFlags.WordBreak | TextFormatFlags.VerticalCenter;
         // 根据文字对齐方式调整 flags（可选，这里简单使用左对齐）
         flags |= TextFormatFlags.Left;
         TextRenderer.DrawText(e.Graphics, this.Text, this.Font, textRect, this.ForeColor, flags);
     }

     #endregion

     #region Private Layout Methods

     ///<summary>
     /// 根据 ImageAlign 计算图片的绘制位置
     ///</summary>
     private Rectangle GetImageRectangle()
     {
         int x = 0, y = 0;
         int clientWidth = this.ClientSize.Width;
         int clientHeight = this.ClientSize.Height;

         // 水平对齐
         switch (ImageAlign)
         {
             case ContentAlignment.TopLeft:
             case ContentAlignment.MiddleLeft:
             case ContentAlignment.BottomLeft:
                 x = Padding.Left;
                 break;
             case ContentAlignment.TopCenter:
             case ContentAlignment.MiddleCenter:
             case ContentAlignment.BottomCenter:
                 x = (clientWidth - ImageWidth) / 2;
                 break;
             case ContentAlignment.TopRight:
             case ContentAlignment.MiddleRight:
             case ContentAlignment.BottomRight:
                 x = clientWidth - Padding.Right - ImageWidth;
                 break;
         }

         // 垂直对齐
         switch (ImageAlign)
         {
             case ContentAlignment.TopLeft:
             case ContentAlignment.TopCenter:
             case ContentAlignment.TopRight:
                 y = Padding.Top;
                 break;
             case ContentAlignment.MiddleLeft:
             case ContentAlignment.MiddleCenter:
             case ContentAlignment.MiddleRight:
                 y = (clientHeight - ImageHeight) / 2;
                 break;
             case ContentAlignment.BottomLeft:
             case ContentAlignment.BottomCenter:
             case ContentAlignment.BottomRight:
                 y = clientHeight - Padding.Bottom - ImageHeight;
                 break;
         }

         // 边界检查，确保不超出控件范围
         x = Math.Max(Padding.Left, Math.Min(x, clientWidth - Padding.Right - ImageWidth));
         y = Math.Max(Padding.Top, Math.Min(y, clientHeight - Padding.Bottom - ImageHeight));

         returnnew Rectangle(x, y, ImageWidth, ImageHeight);
     }

     ///<summary>
     /// 计算文字区域，自动避开图片区域
     ///</summary>
     private Rectangle GetTextRectangle(Rectangle imageRect)
     {
         Rectangle textRect = new Rectangle(Padding.Left, Padding.Top,
             this.ClientSize.Width - Padding.Left - Padding.Right,
             this.ClientSize.Height - Padding.Top - Padding.Bottom);

         // 如果图片为空，直接返回全区域
         if (Image == null) return textRect;

         // 根据图片对齐方式，判断文字应该放在图片的哪一侧
         // 简单策略：如果图片在左边，文字放在右边；图片在右边，文字放在左边；图片在顶部/底部则文字放在剩余区域
         // 更完善的方案可以自由组合，这里演示最常见的几种
         bool imageLeft = (ImageAlign == ContentAlignment.MiddleLeft || ImageAlign == ContentAlignment.TopLeft || ImageAlign == ContentAlignment.BottomLeft);
         bool imageRight = (ImageAlign == ContentAlignment.MiddleRight || ImageAlign == ContentAlignment.TopRight || ImageAlign == ContentAlignment.BottomRight);
         bool imageTop = (ImageAlign == ContentAlignment.TopCenter || ImageAlign == ContentAlignment.TopLeft || ImageAlign == ContentAlignment.TopRight);
         bool imageBottom = (ImageAlign == ContentAlignment.BottomCenter || ImageAlign == ContentAlignment.BottomLeft || ImageAlign == ContentAlignment.BottomRight);

         if (imageLeft)
         {
             int textLeft = imageRect.Right + ImageTextSpacing;
             textRect = new Rectangle(textLeft, textRect.Y,
                 this.ClientSize.Width - textLeft - Padding.Right,
                 textRect.Height);
         }
         elseif (imageRight)
         {
             int textRight = imageRect.Left - ImageTextSpacing;
             textRect = new Rectangle(Padding.Left, textRect.Y,
                 Math.Max(0, textRight - Padding.Left),
                 textRect.Height);
         }
         elseif (imageTop)
         {
             int textTop = imageRect.Bottom + ImageTextSpacing;
             textRect = new Rectangle(textRect.X, textTop,
                 textRect.Width,
                 this.ClientSize.Height - textTop - Padding.Bottom);
         }
         elseif (imageBottom)
         {
             int textBottom = imageRect.Top - ImageTextSpacing;
             textRect = new Rectangle(textRect.X, Padding.Top,
                 textRect.Width,
                 Math.Max(0, textBottom - Padding.Top));
         }
         else// 居中情况，文字覆盖图片区域（或简单放在下方）
         {
             // 如果图片居中，文字默认放在图片下方
             int textTop = imageRect.Bottom + ImageTextSpacing;
             textRect = new Rectangle(textRect.X, textTop,
                 textRect.Width,
                 this.ClientSize.Height - textTop - Padding.Bottom);
         }

         // 确保文字矩形有效
         if (textRect.Width < 0) textRect.Width = 0;
         if (textRect.Height < 0) textRect.Height = 0;

         return textRect;
     }

     #endregion

     #region Double-click to upload image

     privatevoidImageLabel_DoubleClick(object sender, EventArgs e)
     {
         using (OpenFileDialog openFileDialog = new OpenFileDialog())
         {
             openFileDialog.Title = "请选择一张图片";
             openFileDialog.Filter = "图像文件|*.jpg;*.jpeg;*.png;*.gif;*.bmp";
             if (openFileDialog.ShowDialog() == DialogResult.OK)
             {
                 this.Image = Image.FromFile(openFileDialog.FileName);
             }
         }
     }

     #endregion
 }

结束

　　完整代码如上，欢迎观看，笔者会不定时发布一些实际项目中实用的功能点剥离出来，分享给大家，有需要的帅哥美女可以关注下公众号，赠人玫瑰手有余香，您的支持就是小弟最大的动力