AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Winform控件优化之TabControl控件的美化和功能扩展

2022-11-27 2777
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在基本的TabControl控件使用和功能之上，可以尝试对其进行美化和功能扩展，比如动态删除或添加tab、绘制图标按钮及鼠标hover时的背景变化、Tab从右向左布局的优化处理等。最重要...

在基本的TabControl控件使用和功能之上，可以尝试对其进行美化和功能扩展，比如动态删除或添加tab、绘制图标按钮及鼠标hover时的背景变化、Tab从右向左布局的优化处理等。最重要的是推荐参考花木兰控件库中对TabControl美化，现代UI效果的tab，绝对值得一看或者使用。

实现动态增加或删除tab的功能(添加和关闭按钮)

添加、关闭按钮图标

通过ImageList或Resources添加“加号”和“关闭”图片作为全局变量，也可以指定这两个图片的路径为全局变量。

此处使用imageList。

设置DrawMode为OwnerDrawFixed

tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;

DrawItem中绘制添加、关闭按钮

tabControl1.DrawItem += TabControl1_DrawItem2;

//.....
// 绘制add和close按钮
private void TabControl1_DrawItem2(object sender, DrawItemEventArgs e)
{
   var tabPage = tabControl1.TabPages[e.Index];
   var tabRect = tabControl1.GetTabRect(e.Index);
//    tabRect.Inflate(0, -2); // 似乎未起作用
   //e.DrawBackground(); // 背景
   if (e.Index == tabControl1.TabCount - 1) // 最后一个TabPage
   {
       var addImage = imageList1.Images["add"]; // 也可以从路径获取new Bitmap(imagePath);
       e.Graphics.DrawImage(addImage,
           tabRect.Left + (tabRect.Width - addImage.Width) / 2,
           tabRect.Top + (tabRect.Height - addImage.Height) / 2);
   }
   else // 其他TabPages绘制关闭
   {
       var closeImage = imageList1.Images["close"];
       e.Graphics.DrawImage(closeImage,
           (tabRect.Right - closeImage.Width - 2),
           tabRect.Top + (tabRect.Height - closeImage.Height) / 2);

       TextRenderer.DrawText(e.Graphics, tabPage.Text, tabPage.Font,
           new Rectangle(tabRect.X, tabRect.Y, tabRect.Width-closeImage.Width, tabRect.Height), tabPage.ForeColor, TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter);
   }
}

设置最后一个“添加”按钮的tab尽可能短

通过SendMessage使最后一个“添加”按钮的tab比较短。

实际测试要想此方法生效，TabControl.SizeMode 不能为 Fixed。

// 创建句柄时触发。通过发送消息SendMessage使绘制的(每个)tab尽可能短。SizeMode 不能为 Fixed
tabControl1.HandleCreated += TabControl1_HandleCreated;

//.....
[DllImport("user32.dll")]
private static extern IntPtr SendMessage(IntPtr hWnd, int msg, IntPtr wp, IntPtr lp);
private const int TCM_SETMINTABWIDTH = 0x1300 + 49;
private void TabControl1_HandleCreated(object sender, EventArgs e)
{
   SendMessage(tabControl1.Handle, TCM_SETMINTABWIDTH, IntPtr.Zero, (IntPtr)16);
}

可以看到，在使用了非Fixed的SizeMode后，由于tab的宽度设置无效，导致默认的宽度仅可以显示文字。在重新绘制时，原本的文字范围内添加了close图片，占用了16px的范围（close图片的大小为16*16），剩余的范围无法一行放下文字，导致了tab文字的换行。

比较好的解决办法就是添加一个padding.X的值，最好为16px，正好可以放下绘制close图片。

效果如下：

实际可以自行调整padding.X的值，未必需要指定16，比如13、12都可以正常一行放下文字。

设置鼠标点击关闭和添加按钮时的处理

处理最后一个tab(即"添加"按钮的tab)点击时，动态添加tabpage；点击tab的关闭按钮时关闭移除当前tab。

在MouseDown事件中，获取鼠标按下时的位置，并依次判断是否点击在close按钮上或最后一个“添加”按钮的tab上，依据判断结果执行添加和关闭操作。

tabControl1.MouseDown += TabControl1_MouseDown;

//.....
private void TabControl1_MouseDown(object sender, MouseEventArgs e)
{
   // 依次循环判断，鼠标点击位置是否位于close图片范围内；或是否位于“添加”按钮tab内
   for (var i = 0; i < tabControl1.TabPages.Count; i++)
   {
       var tabRect = tabControl1.GetTabRect(i);
       if (i == tabControl1.TabPages.Count - 1) // 组后一个 add 按钮
       {
           if (tabRect.Contains(e.Location))
           {
               CreateTabPage();
           }
       }
       else
       {
           var closeImage = imageList1.Images["close"];
           var imageRect = new Rectangle(
               tabRect.Right - closeImage.Width - 2,
               tabRect.Top + (tabRect.Height - closeImage.Height) / 2,
               closeImage.Width,
               closeImage.Height);
           if (imageRect.Contains(e.Location))
           {
               tabControl1.TabPages.RemoveAt(i);
               break;
           }
       }
   }
}

创建tabpage的方法CreateTabPage（以实际情况实现）

private void CreateTabPage()
{
   //insert会导致DrawItem中异常(索引错误)
   //tabControl1.TabPages.Insert(tabControl1.TabPages.Count - 1,"新选项卡"+(tabControl1.TabPages.Count - 1));
   tabControl1.TabPages.Add("新选项卡" + (tabControl1.TabPages.Count - 1));
   var addPage = tabControl1.TabPages["add"];
   tabControl1.TabPages.Remove(addPage);
   tabControl1.TabPages.Add(addPage);
}

鼠标位于关闭按钮上方时背景变化效果

依据MouseDown处理中判断鼠标位置的方法，通过在MouseMove判断鼠标位置，可以绘制鼠标位于关闭按钮上方时，“关闭”背景相应变化（比如变灰）。

tabControl1.MouseMove += TabControl1_MouseMove;

//.......
/// <summary>
/// 鼠标Hover关闭按钮效果
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void TabControl1_MouseMove(object sender, MouseEventArgs e)
{
   // 依次循环判断，鼠标点击位置是否位于close图片范围内
   for (var i = 0; i < tabControl1.TabPages.Count - 1; i++)
   {
       var tabPage = tabControl1.TabPages[i];
       var tabRect = tabControl1.GetTabRect(i);
       //tabRect.Inflate(0, -2); // 似乎未起作用
       var closeImage = imageList1.Images["close"];
       var imageRect = new Rectangle(
           tabRect.Right - closeImage.Width - 2,
           tabRect.Top + (tabRect.Height - closeImage.Height) / 2,
           closeImage.Width,
           closeImage.Height);
       if (imageRect.Contains(e.Location))
       {
           if (tabPage.Tag?.ToString() != "1")
           {
               using (var g = tabControl1.CreateGraphics())
               {
                   g.FillRectangle(new SolidBrush(Color.FromArgb(100, 100, 100, 45)), imageRect);
                   tabPage.Tag = "1";//表示已有透明灰色背景
               }
           }
           break;
       }
       else
       {
           if (tabPage.Tag?.ToString() == "1")//清除已有的灰色背景
           {
               using (var g = tabControl1.CreateGraphics())
               {
                   g.FillRectangle(new SolidBrush(tabPage.BackColor), imageRect);
                   g.DrawImage(closeImage, imageRect);
                   tabPage.Tag = null;
               }
           }
       }
   }
}

效果如下，分别查看点击添加、鼠标悬停时、点击关闭按钮的效果：

设置RightToLeftLayout = true和RightToLeft = true时tab选项卡的绘制优化

上面的实现，如果设置属性RightToLeftLayout = true和RightToLeft = true时，将会出现选项卡文字和关闭图标分离混乱的问题。

因此需要优化RightToLeft模式下的tab绘制。

RightToLeft的坐标转换（Rectangle的坐标）可以从原始坐标通过下面的函数，从容器中矩形的坐标转换为RTL坐标：

public static Rectangle GetRTLCoordinates(Rectangle container, Rectangle drawRectangle)
{
   return new Rectangle(
       container.Right - drawRectangle.Width - drawRectangle.X,
       drawRectangle.Y,
       drawRectangle.Width,
       drawRectangle.Height);
}

因此，扩展下获取TabRect的方法如下：

/// <summary>
/// 绘制tab时需要考虑RTF模式
/// </summary>
/// <param name="tabCtl"></param>
/// <param name="idx"></param>
/// <returns></returns>
public static Rectangle GetTabRect(TabControl tabCtl, int idx)
{
   var tabRect = tabCtl.GetTabRect(idx);
   if (tabCtl.RightToLeftLayout && tabCtl.RightToLeft == RightToLeft.Yes) // RTL
   {
       tabRect = GetRTLCoordinates(tabCtl.ClientRectangle, tabRect);
   }
   return tabRect;
}

通过GetTabRect获取正确的tab的矩形区域。

DrawItem事件方法对应修改为如下：

private void TabControl1_DrawItem2(object sender, DrawItemEventArgs e)
{
   var tabPage = tabControl1.TabPages[e.Index];
   var tabRect = GetTabRect(tabControl1,e.Index);

   //tabRect.Inflate(0, -2);
   //e.DrawBackground(); // 背景
   if (e.Index == tabControl1.TabCount - 1) // 最后一个TabPage
   {
       var addImage = imageList1.Images["add"]; // 也可以从路径获取new Bitmap(imagePath);
       e.Graphics.DrawImage(addImage,
           tabRect.Left + (tabRect.Width - addImage.Width) / 2,
           tabRect.Top + (tabRect.Height - addImage.Height) / 2);
   }
   else // 其他TabPages绘制关闭
   {
       using (var sf = new StringFormat(StringFormat.GenericDefault))
       {
           sf.Alignment = StringAlignment.Center;
           sf.LineAlignment = StringAlignment.Center;

           if (tabControl1.RightToLeft == RightToLeft.Yes && tabControl1.RightToLeftLayout == true) // RTL模式
           {
               sf.FormatFlags |= StringFormatFlags.DirectionRightToLeft;
           }

           var closeImage = imageList1.Images["close"];
           var imgRect = new Rectangle(//tabRect.Right - closeImage.Width - 2,
               tabRect.Right - closeImage.Width - (tabControl1.RightToLeftLayout && tabControl1.RightToLeft == RightToLeft.Yes ? 4 : 2),
               tabRect.Top + (tabRect.Height - closeImage.Height) / 2, closeImage.Width, closeImage.Height);
           e.Graphics.DrawImage(closeImage, imgRect.Location);

           var textRect = new Rectangle(tabRect.X, tabRect.Y, tabRect.Width - closeImage.Width, tabRect.Height);
           e.Graphics.DrawString(tabPage.Text, tabPage.Font, new SolidBrush(tabPage.ForeColor), textRect, sf);
       }                
   }
}

MouseMove和MouseDown事件处理中，tabRect获取方式也改为此方法：var tabRect = GetTabRect(tabControl1, i);。

同时注意，判断鼠标位置时，e.Location在RTF下也要进行转换，才能获取正确的位置：

var mousePos = e.Location;
if (tabControl1.RightToLeftLayout && tabControl1.RightToLeft == RightToLeft.Yes) // RTL调整鼠标位置
{
  mousePos.X = tabControl1.Right - mousePos.X;
}

此部分主要参考自从右到左TabControl的TabPage的关闭按钮C#

TabControl的[终极]美化扩展

关于TabControl的[终极]美化扩展，可以参考花木兰控件库的实现，该控件库通过重写 OnPaint、OnMouseClick 方法，实现全部的绘制优化和美化。

文章介绍 TabControl美化扩展----------WinForm控件开发系列

参考

以上的优化没有进行继承TabControl控件，重写重绘方法，如果想要继承优化的，重写OnMouseClick时注意判断鼠标左右中键的处理、点击时选中tab的处理的，可简要参考下c#重写TabControl控件实现关闭按钮

另，TabControl控件的美化介绍的优化，源代码实在有点长，有兴趣可以了解下

文章标签：
C#
容器
代码迷途
目录
相关文章
代码迷途
|
C# 索引 Windows
Winform控件优化之TabControl控件的使用和常用功能
TabControl是一个分页切换（tab）控件，不同的页框内可以呈现不同的内容，将主要介绍调整tab的左右侧显示、设置多行tab、禁用或删除tabpage、隐藏TabControl头部的选项卡等
代码迷途
5187 0
Winform控件优化之TabControl控件的使用和常用功能
代码迷途
|
算法 API C#
Winform控件优化之圆角按钮【各种实现中的推荐做法】（下）
最终优化实现ButtonPro按钮（继承自Button），既提供Button原生功能，又提供扩展功能，除了圆角以外，还实现了圆形、圆角矩形的脚尖效果、边框大小和颜色、背景渐变颜色...
代码迷途
2102 0
Winform控件优化之圆角按钮【各种实现中的推荐做法】（下）
代码迷途
|
C# 图形学 Windows
Winform控件优化之圆角按钮【各种实现中的推荐做法】（上）
Windows 11下所有控件已经默认采用圆角，其效果更好、相对有着更好的优化...尝试介绍很常见的圆角效果，通过重写控件的OnPaint方法实现绘制，并在后面进一步探索对应的优化和可能的问题
代码迷途
1478 0
Winform控件优化之圆角按钮【各种实现中的推荐做法】（上）
杰克.陈
|
C# Windows
利用WPF创建含多种交互特性的无边框窗体
原文:利用WPF创建含多种交互特性的无边框窗体 咳咳，标题一口气读下来确实有点累，让我先解释一下。另外文章底部有演示程序的下载。
杰克.陈
1268 0
利用WPF创建含多种交互特性的无边框窗体
feiyangqingyun
|
XML 程序员 C语言
Qt编写控件属性设计器2-拖曳控件
一、前言 上一篇文章把插件加载好了，并且把插件中的所有控件都显示到了列表框中，这次要做的就是实现拖曳控件的功能，用户选择一个控件拖曳到画布上，松开，在松开位置处自动实例化该控件，这个需要用到dropEvent和dragEnterEvent事件，重新实现这两个事件，对拖曳的对象进行过滤并调用函数实例化该控件，在实例化该控件的同时实例化控件跟随控件以便拉伸调整大小和位置。
feiyangqingyun
920 0
feiyangqingyun
|
开发工具 C语言
Qt编写自定义控件9-导航按钮控件
一、前言 导航按钮控件，主要用于各种漂亮精美的导航条，我们经常在web中看到导航条都非常精美，都是html+css+js实现的，还自带动画过度效果，Qt提供的qss其实也是无敌的，支持基本上所有的CSS2属性，配合QPainter这个无敌大法工具，没有什么不能绘制的。
feiyangqingyun
1278 0
开发者说
一个控件几行代码实现换肤（可支持菜单）
这是从vbAccelerator(http://vbaccelerator.com)的皮肤程序修改而来，把DLL方式修改为OCX，并且修改为仅通过几行指令，即可完成皮肤加载。
开发者说
513 0
杰克.陈
|
前端开发 C#
WPF MVVM模式下实现ListView下拉显示更多内容
原文:WPF MVVM模式下实现ListView下拉显示更多内容 在手机App中，如果有一个展示信息的列表，通常会展示很少一部分，当用户滑动到列表底部时，再加载更多内容。这样有两个好处，提高程序性能，减少网络流量。
杰克.陈
1560 0
杰克.陈
|
C#
WPF 控件库——轮播控件
原文:WPF 控件库——轮播控件 一、要做成什么样 　　bs端的轮播控件千千万，有的甚至能作为一个单独的库来开发，所涉及到的功能也是缤纷多彩。相对来说，cs端的轮播用得不多，我这里只是简单的做了个能满足一般需求的轮播，在项目中凑会凑会还是可以的。
杰克.陈
1922 0
wangccsy
|
C#
WPF中动态添加控件，并为控制指定样式
wangccsy
3262 0

热门文章

最新文章

  • 1
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 2
    使用cProfile等工具来提高python的执行速度
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    Spring-boot+Dubbo应用启停源码分析
  • 5
    Myeclipse常用优化1
  • 6
    Android开发学习笔记：数据存取之File浅析
  • 7
    Android Service完全解析，关于服务你所需知道的一切(下)
  • 8
    【妄言之言】致二十四岁的自己
  • 9
    oracle 11g adrci 工具使用方法
  • 10
    S3C2410-WinCE6.0-OAL的快速调试
  • 1
    《容器化赋能：C++人工智能模型部署的卓越之道》
    27
  • 2
    《C++与类脑芯片：开启人工智能硬件新征程》
    26
  • 3
    《C++与AMD ROCm：人工智能计算的强力引擎》
    31
  • 4
    《C++携手英特尔OpenVINO：加速人工智能推理新征程》
    25
  • 5
    《C++ 赋能强化学习：Q - learning 算法的实现之路》
    22
  • 6
    鸿蒙开发：ForEach中为什么键值生成函数很重要
    19
  • 7
    AI+脱口秀，笑点能靠算法创造吗
    18
  • 8
    「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
    100
  • 9
    AI客服会完全替代人工客服吗
    21
  • 10
    影智科技唐沐：人形是累赘，具身智能并不缺少落地场景
    20

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云oss存储简介和如何使用