惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Proofpoint News Feed
V
V2EX
博客园_首页
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Recent Announcements
Recent Announcements
博客园 - 司徒正美
Microsoft Security Blog
Microsoft Security Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Latest news
Latest news
Vercel News
Vercel News
The Register - Security
The Register - Security
T
The Exploit Database - CXSecurity.com
S
Schneier on Security
N
Netflix TechBlog - Medium
WordPress大学
WordPress大学
小众软件
小众软件
L
Lohrmann on Cybersecurity
GbyAI
GbyAI
P
Privacy & Cybersecurity Law Blog
T
Tor Project blog
AWS News Blog
AWS News Blog
美团技术团队
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
K
Kaspersky official blog
B
Blog RSS Feed
G
Google Developers Blog
量子位
大猫的无限游戏
大猫的无限游戏
Google DeepMind News
Google DeepMind News
Scott Helme
Scott Helme
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
I
Intezer
雷峰网
雷峰网
Martin Fowler
Martin Fowler
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Blog — PlanetScale
Blog — PlanetScale
IT之家
IT之家
F
Full Disclosure
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - 【当耐特】
The Hacker News
The Hacker News
U
Unit 42
S
SegmentFault 最新的问题
I
InfoQ
aimingoo的专栏
aimingoo的专栏
Y
Y Combinator Blog
宝玉的分享
宝玉的分享
罗磊的独立博客
Spread Privacy
Spread Privacy
C
CERT Recently Published Vulnerability Notes

博客园 - 何以解忧唯有撸码

C# 视频录制监控系统 c#实现包裹扣面单的几种方式 c#造个轮子--GIF录制工具 c#造个轮子-取色器TakeColor(附源码) OpenCvSharp基于颜色反差规避FBA面单贴标2 OpenCvSharp基于颜色反差规避FBA面单贴标 winform 绘制太阳,地球,月球 运作规律 玩转控件:GDI+动态绘制流程图 玩转控件:Fucking ERP之流程图 玩转控件:对Dev的GridControl控件扩展 玩转控件:封装Dev的SearchLookupEdit 玩转控件:对Dev中GridControl控件的封装和扩展 玩转控件:封装Dev的LabelControl和TextEdit 玩转控件:扩展Dev中SimpleButton 玩转控件:重写/重绘Dev中MessageBox弹窗控件 C# 视频监控系统(提供源码分享) C# 小游戏-拼图魔方【Game Puzzle】 玩转控件:重绘DEVEXPRESS中DateEdit控件 —— 让DateEdit支持只选择年月 (提供源码下载) 玩转控件:重绘ComboBox —— 让ComboBox多列显示 (提供源码下载) 分享:动态添加控件和公用章水印工具 提供源码下载
玩转控件:封装个带图片的Label控件
何以解忧唯有撸码 · 2026-04-17 · via 博客园 - 何以解忧唯有撸码

话不多说,先看效果

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

ScreenShot_2026-04-14_105733_321

起因

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

ImageLabel

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

image

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

结束

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